JQuery의 FancyBox 플러그인으로 그림 표시 기능 제공

이번에는 JQuery의 FancyBox 플러그인의 그림 표시 기능을 가져왔습니다. FancyBox 플러그인의 주의사항에는 어떤 것이 있나요?

FancyBox는 이미지, HTML 콘텐츠 및 멀티미디어를 표시하기 위한 라이트박스 도구입니다.

jquery 플러그인의 fancybox 팝업 상자 효과는 널리 알려진 라이트박스 플러그인과 유사합니다. 단일 사진이나 사진 그룹을 표시할 수 있으며 사용자 정의된 콘텐츠와 외부 파일의 콘텐츠도 표시할 수 있습니다. ajax 등을 통해 로드되며 기능도 매우 편리하고 실용적입니다.

데모 효과(이미지 갤러리):

샘플 코드:

<link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
<p>
  <h2>First test(Image gallery)</h2>
  <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg"><img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" /></a>
  <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"><img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" alt="" /></a>
</p>

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
      $(".fancybox1").fancybox();      
    });
</script>

데모 효과(단일 이미지):

샘플 코드:

<link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
<p>
  <h2>Single images</h2>
  <a id="single_1" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg" title="Lupines (Kiddi Einars)">
    <img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" alt="" />
  </a>
  <a id="single_2" href="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_b.jpg" title="Colorful Feldberg II (STEFFEN EGLY)">
    <img src="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_m.jpg" alt="" />
  </a>
  <a id="single_3" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg" title="Cannon Needles (JustinPoe)">
    <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg" alt="" />
  </a>
  <a id="single_4" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg" title="Making a summer # 3 :) ((Nikon woman))">
    <img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg" alt="" />
  </a>
</p>

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
      $("#single_1").fancybox({
        helpers: {
          title: {
            type: 'float'
          }
        }
      });
      $("#single_2").fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic',
        helpers: {
          title: {
            type: 'inside'
          }
        }
      });
      $("#single_3").fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        helpers: {
          title: {
            type: 'outside'
          }
        }
      });
      $("#single_4").fancybox({
        helpers: {
          title: {
            type: 'over'
          }
        }
      });      
    });
  </script>

마스터가 있다고 믿습니다 읽은 후 방법을 편집했습니다. 이 기사의 사례에 대해 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jquery+php로 동적 디지털 디스플레이 효과 구현

jQuery 애니메이션 효과 이미지 캐러셀 구현(코드 포함)

위 내용은 JQuery의 FancyBox 플러그인으로 그림 표시 기능 제공의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!