Question

我正在使用Fancy Box和Elevate Zoom - 我正在尝试将图片和iframe内容打开到图库中。

这可以单独使用，但是当我点击图片的“点击缩放”链接并滚动浏览图库时，当它到达iframe时它会显示“内容无法加载”。但是，如果您点击360旋转图标，则会在灯箱中打开iframe内容。

我的代码在下面 - 有人能指出我正确的方向来获得这个吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<head>
<link href="http://www.cjabeta.co.uk/test/tangibles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://www.cjabeta.co.uk/test/fancybox/jquery.fancybox-1.3.4.css" media="screen" />   
<script src="http://www.cjabeta.co.uk/test/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.cjabeta.co.uk/test/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="http://www.cjabeta.co.uk/test/fancybox/helpers/jquery.fancybox-media.js"></script>

</head>
<!--/End Head/-->


<body >

<!--/Start Container/-->
<div class="wrapper_inner"> 

<!--/Start Content Area/-->
<div id="content_area" itemscope itemtype="http://schema.org/Product">

    <!--/Start Product Spotlight Container/-->
        <div id="product_spotlight_container" class="tangibles">
            <div class="zoom" style="width:297px; height:208px;">
                <a href="#" rel="example_group">
                <img style="border:1px solid #e8e8e6;" id="tangprodpagezoom" src="http://www.cjabeta.co.uk/test/images/heart-key-large.jpg" width="300" title="test"/>
                </a>
            </div>
            <div id="img_zoom_text" class="zoom">
                <a href="#" rel="example_group">
                <span>Click to zoom</span> 
                </a>
            </div>                        

            <div id="gallery_01" style="width:300px; float:left;">
                <a href="#" class="elevatezoom-gallery active" data-update="" data-image="http://www.cjabeta.co.uk/test/images/heart-key-large.jpg" data-zoom-image="http://www.cjabeta.co.uk/test/images/heart-key-xl.jpg">
                    <img src="http://www.cjabeta.co.uk/test/images/heart-key-cross-sell.jpg" width="50" title="test1"/>
                </a>
                <a href="#" class="elevatezoom-gallery" data-image="http://www.cjabeta.co.uk/test/images/heart-key-other-large.jpg" data-zoom-image="http://www.cjabeta.co.uk/test/images/heart-key-other-xl.jpg">
                    <img src="http://www.cjabeta.co.uk/test/images/thumb2.jpg" width="50" title="test2"/>
                </a>
                <a href="#" class="elevatezoom-gallery" data-image="http://www.cjabeta.co.uk/test/images/heart-large.jpg" data-zoom-image="http://www.cjabeta.co.uk/test/images/heart-new-xl.jpg">
                    <img src="http://www.cjabeta.co.uk/test/images/thumb3.jpg" width="50" title="test3"/>
                </a>
                <a href="http://www.swiftspin360.com/buyagift/" class="fancybox.iframe" id="spin360" data-fancybox-href="http://www.swiftspin360.com/buyagift/" rel="example_group">
                    <img src="http://www.cjabeta.co.uk/test/images/spin_icon.jpg" width="50" title="360 view"/>
                </a>
            </div>
        </div>


        <script type="text/javascript">
        $(document).ready(function () {
        $("#tangprodpagezoom").elevateZoom({gallery:'gallery_01', cursor: 'pointer', zoomWindowWidth:0, zoomWindowHeight:0, galleryActiveClass: "active"}); 
        $("#img_zoom_text").elevateZoom({gallery:'gallery_01', cursor: 'pointer', zoomWindowWidth:0, zoomWindowHeight:0, galleryActiveClass: "active"}); 
        $('#spin360').fancybox({'type':'iframe','width': 600, 'height': 400});
        $("#tangprodpagezoom, #img_zoom_text").bind("click", function(e) {  
          var ez =   $('#tangprodpagezoom').data('elevateZoom');
          ez.closeAll(); //NEW: This function force hides the lens, tint and window 
            $.fancybox(ez.getGalleryList());
            $("a[rel=example_group]").fancybox({
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'titleShow'         : 'true',
            'titlePosition'     : 'inside',
            'showNavArrows'     : 'true'
                });

          return false;
        }); 
        }); 

        </script>
        <!--/End Product Spotlight Container/--> 

</div>
</div>




</body>
<!--/End Body/-->
</html>

Fancybox - 图库中的图像和iframe内容

0 个答案: