0

我正在尝试在画廊的每张图片上制作带有内部缩放的花式画廊。我在 stackexchange 上看到了许多已过时的问题，因此请不要在此声明它是重复的，因为它不是重复的。我正在使用我通过 cloudzoom 获得的模板来创建 fancybox 画廊。我设法创建了画廊。至今：

  • 缩放功能在图库后面工作。
  • 一旦你关闭画廊，它就不会再次打开。

<head>
    <title>Cloud Zoom</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Include jQuery. -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

    <!-- Include Cloud Zoom CSS. -->
    <link rel="stylesheet" type="text/css" href="cloudzoom.css" />

    <!-- Include Cloud Zoom script. -->
    <script type="text/javascript" src="cloudzoom.js"></script>

    <LINK type="text/css" href="http://website-dev.uk.local.com/mcmap/fancyBox/source/jquery.fancybox.css" rel="Stylesheet" >
    <SCRIPT type="text/javascript" src="http://website-dev.uk.local.com/mcmap/fancyBox/source/jquery.fancybox.pack.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="http://website-dev.uk.local.com/mcmap/fancyBox/source/jquery.fancybox.js"></SCRIPT>

    <!-- Call quick start function. -->
    <script type="text/javascript">
        //CloudZoom.quickStart();
        $(function() {
            $('.fancybox').fancybox({
                padding: 0,
                background: 'none',
                transitionIn: 'fade',
                transitionOut: 'fade',
                overlayOpacity: .9,
                afterShow:function(){
                    //$(this).attr('id','zoom');
                    $('.fancybox-skin').css("background","transparent");
                    this.inner[0].childNodes[0].id = 'zoom';
                    this.inner[0].childNodes[0].classList.add("cloudzoom");
                    $(this.inner[0].childNodes[0]).attr("data-cloudzoom","zoomImage: 'images/large/seismic_Adriatic_L1.jpg', zoomPosition:'inside'");
                    CloudZoom.quickStart({tintOpacity:1});
                    console.log(this);
                    //console.log(this.inner[0].childNodes[0]);
                },
                beforeClose: function(){
                    //$('.cloudzoom').data('CloudZoom').destroy();
                    $('.cloudzoom').each(function(){
                          $(this).data('CloudZoom').destroy();
                    });
                    this.inner[0].childNodes[0].id = '';
                    $(this.inner[0].childNodes[0]).removeClass("cloudzoom");
                    $(this.inner[0].childNodes[0]).removeAttr("data-cloudzoom");


                }
            });
        });
        function openfancybox() {
            $(".fancybox").trigger("click");

        }
    </script>    
</head>

<body>


<a href=# onclick="openfancybox()">fancybox</a>


<div id=seisUrl style="display:none">

<a  href="images/small/seismic_Adriatic_L1_small.jpg" class="cloudzoom-gallery fancybox"  data-cloudzoom="useZoom: '#zoom', image: 'images/small/seismic_Adriatic_L1_small.jpg', zoomImage: 'images/large/seismic_Adriatic_L1.jpg',zoomPosition:'inside'" rel="seismicgallery">Image 1</a>

<a href="images/small/image2.jpg" class="cloudzoom-gallery fancybox" data-cloudzoom = "useZoom: '#zoom', image: 'images/small/image2.jpg', zoomImage: 'images/large/image2.jpg'" rel="seismicgallery">Image 2</a>

<a href="images/small/image3.jpg" class="cloudzoom-gallery fancybox" data-cloudzoom="useZoom: '#zoom', image: 'images/small/image3.jpg', zoomImage: images/large/image3.jpg'" rel="seismicgallery">Image 3</a>

</div>


</body>
4

0 回答 0