jQuery

【jQuery】画像ズームプラグインjQuery Gallery elevatezoom

November 12, 2016
jQuery gallery elevatezoom

jQuery Gallery elevatezoomは画像ズームjQueryプラグイン。

マークアップ

<!--LIB-->
<script src='jquery-1.11.0.min.js'></script>
<script src='jquery.elevateZoom-3.0.8.min.js'></script>
<link href="fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script src='fancybox/jquery.mousewheel-3.0.6.pack.js' type='text/javascript'></script>     
<script src='fancybox/jquery.fancybox.js' type='text/javascript'></script>
<!--LIB-->
<div class="man0img">
    <img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
</div>
<div id="slide-detail-carousel-1">
    <a class="item" href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">
    <img id="zoom_01" src="images/thumb/image1.jpg" />
    </a>

    <a class="item" href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
    <img id="zoom_01" src="images/thumb/image2.jpg" />
    </a>

    <a class="item" href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
    <img id="zoom_01" src="images/thumb/image3.jpg" />
    </a>

    <a class="item" href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
    <img id="zoom_01" src="images/thumb/image4.jpg" />
    </a>

</div>
javascript
<script>
    $(document).ready(function () {
            $('.fancybox').fancybox();

            $("#zoom_01").elevateZoom({
                gallery:'slide-detail-carousel-1', 
                cursor: 'pointer', 
                galleryActiveClass: 'active', 
                imageCrossfade: true,
                loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
            }); 
            //pass the images to Fancybox
            $("#zoom_01").bind("click", function(e) {  
              var ez =   $('#zoom_01').data('elevateZoom'); 
                $.fancybox(ez.getGalleryList());
              return false;
            });
        });
</script>
Css Plus
<style type="text/css">
    #slide-detail-carousel-1 img{
        border:2px solid white;
    }
    .active img{
        border:2px solid #333 !important;
    }
</style>

MIT、GPLライセンス