Question

我有一系列幻灯片，每个幻灯片都包含许多小缩略图。然后，这些将在灯箱中打开更大的图像。

我正在使用Jquery Cycle和Fancybox来实现这一目标。截至目前，我无法让图像打开灯箱。

我对jquery很新，所以任何帮助/提示都会很棒。这是我正在整理的小型演示的代码：

<!DOCTYPE html>
<html>
<head>

<!-- FANCY BOX -->
<link rel="stylesheet" href="/scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
       var $jq = jQuery.noConflict();
</script>
<script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.4.pack.js">        </script>

<!-- JQUERY CYCLE -- >
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="https://raw.github.com/malsup/cycle/master/jquery.cycle.all.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
var titles = $('#cycleContainer div.item').find("h2").map(function() { return    $(this).text(); });
 // Code that uses jQuery's $ can follow here.
$('#cycleContainer').before('<div id="current_resident_nav"></li><ul id="pager"><li><h2>artists</h2></ul></div>').cycle({
    //Specify options
    fx:     'scrollLeft', //Name of transition effect
    timeout: 0,           //Disable auto advance
    pager:  '#pager',     //Selector for element to use as pager container
    pagerAnchorBuilder: function (index) {               //Build the pager
    return '<li><p class="artists"><a href="#">' + titles[index] + '</p></a></li>';
},
updateActivePagerLink: function(pager, currSlideIndex) {
    $(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
}
});
});

</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$jq("a[rel=example_group]").fancybox({
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'titlePosition'     : 'over',
            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });

 });

</script>



 <title>Tech Demo</title>
 </head>

<body>
 <div id="cycleContainer" style="z-index: -100;">   
    <div class="item">
    <div id="current_resident_content" style="border:1px solid black; width: 960px; height: 500px;">
                        <div id="current_resident_images">
                            <div class="current_resident_img"><a class="example_group" rel="group1" href="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg"><img src="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg" width=100 height=100 /></a></div>

                            <div class="current_resident_img"><img src="http://www.newyorker.com/online/blogs/alpha/test/test-thumb-100x100.jpg" width=100 height=100 /></div>

                            <div class="current_resident_img"><img src="{resident-thumbnail-3}" width=100 height=100 /></div>

                            <div class="current_resident_img"><img src="{resident-thumbnail-4}" width=100 height=100 /></div>

                            <div class="current_resident_img"><img src="{resident-thumbnail-5}" width=100 height=100 /></div>

                        </div><br />
                        <div id="current_resident_bio">
                                    <h2>This is a test</h2>
                                        <p>Lorem Ipsum blah blah blah</p>                               

                        </div>
                    </div>


</div>
<div class="item">
    <div id="current_resident_content" style="border:1px solid black; width: 960px; height: 500px;">
                        <div id="current_resident_images">
                            <div class="current_resident_img"><img src="http://www.fmwconcepts.com/misc_tests/caption_test/1tmp_6819.gif" width=100 height=100 /></div>

                            <div class="current_resident_img"><img src="http://www.nasa.gov/centers/marshall/images/content/99076main_DSCF8603_t.jpg" width=100 height=100 /></div>

                            <div class="current_resident_img"><img src="{resident-thumbnail-3}" width=100 height=100 /></div>

                            <div class="current_resident_img"><img src="{resident-thumbnail-4}" width=100 height=100 /></div>

                            <div class="current_resident_img"><img src="{resident-thumbnail-5}" width=100 height=100 /></div>

                        </div><br />
                        <div id="current_resident_bio">
                                    <h2>This is a test</h2>
                                        <p>Lorem Ipsum blah blah blah</p>                               

                        </div>
                    </div>


</div>
<script>
    $("a.grouped_elements").fancybox();
</script>

Answer 1

我无法测试完整的代码，但我注意到一些不合适或错误的事情。

我无法使用您当前拥有的src访问测试页面上的循环插件，因此我将其更改为非https网址。

另外，您可以在示例代码的末尾调用：

$("a.grouped_elements").fancybox();

哪个不存在。你没有＆＃39; a＆＃39;具有＆＃39; grouped_elements＆＃39;类的元素，以便返回错误。

以下是我用来让我在本地工作的代码。请事先为格式化道歉。

<!DOCTYPE html>
<html>
<head>

<!-- FANCY BOX -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
   var $jq = jQuery.noConflict();
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js">        </script>

<!-- JQUERY CYCLE -- >
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle.all.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
var titles = $('#cycleContainer div.item').find("h2").map(function() { return    $(this).text(); });
// Code that uses jQuery's $ can follow here.
$('#cycleContainer').before('<div id="current_resident_nav"></li><ul id="pager"><li> <h2>artists</h2></ul></div>').cycle({
//Specify options
fx:     'scrollLeft', //Name of transition effect
timeout: 0,           //Disable auto advance
pager:  '#pager',     //Selector for element to use as pager container
pagerAnchorBuilder: function (index) {               //Build the pager
return '<li><p class="artists"><a href="#">' + titles[index] + '</p></a></li>';
},
updateActivePagerLink: function(pager, currSlideIndex) {
$(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
}
});
});

</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$jq("a[rel=example_group]").fancybox({
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'titlePosition'     : 'over',
        'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
        }
    });

});

</script>



<title>Tech Demo</title>
</head>

<body>
<div id="cycleContainer" style="z-index: -100;">   
<div class="item">
<div id="current_resident_content" style="border:1px solid black; width: 960px; height: 500px;">
                    <div id="current_resident_images">
                        <div class="current_resident_img"><a class="example_group" rel="group1" href="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg"><img src="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg" width=100 height=100 /></a></div>

                        <div class="current_resident_img"><img src="http://www.newyorker.com/online/blogs/alpha/test/test-thumb-100x100.jpg" width=100 height=100 /></div>

                        <div class="current_resident_img"><img src="{resident-thumbnail-3}" width=100 height=100 /></div>

                        <div class="current_resident_img"><img src="{resident-thumbnail-4}" width=100 height=100 /></div>

                        <div class="current_resident_img"><img src="{resident-thumbnail-5}" width=100 height=100 /></div>

                    </div><br />
                    <div id="current_resident_bio">
                                <h2>This is a test</h2>
                                    <p>Lorem Ipsum blah blah blah</p>                               

                    </div>
                </div>


</div>
<div class="item">
<div id="current_resident_content" style="border:1px solid black; width: 960px; height: 500px;">
                    <div id="current_resident_images">
                        <div class="current_resident_img"><img src="http://www.fmwconcepts.com/misc_tests/caption_test/1tmp_6819.gif" width=100 height=100 /></div>

                        <div class="current_resident_img"><img src="http://www.nasa.gov/centers/marshall/images/content/99076main_DSCF8603_t.jpg" width=100 height=100 /></div>

                        <div class="current_resident_img"><img src="{resident-thumbnail-3}" width=100 height=100 /></div>

                        <div class="current_resident_img"><img src="{resident-thumbnail-4}" width=100 height=100 /></div>

                        <div class="current_resident_img"><img src="{resident-thumbnail-5}" width=100 height=100 /></div>

                    </div><br />
                    <div id="current_resident_bio">
                                <h2>This is a test</h2>
                                    <p>Lorem Ipsum blah blah blah</p>                               

                    </div>
                </div>


</div>
</div>
</body>
</html>

Answer 2

在玩了一下之后，最终的解决方案最终成为将幻灯片的z-index设置为负数的问题。最终代码如下：

        <!DOCTYPE html>
        <html>
        <head>

        <!-- FANCY BOX -->
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript"> 
           var $jq = jQuery.noConflict();
        </script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js">        </script>

        <!-- JQUERY CYCLE -->
        <!-- include jQuery library -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <!-- include Cycle plugin -->
        <script type="text/javascript" src="http://malsup.github.io/jquery.cycle.all.js"></script>

        <script type="text/javascript">
        jQuery(document).ready(function($) {
        var titles = $('#cycleContainer div.item').find("h2").map(function() { return    $(this).text(); });
        // Code that uses jQuery's $ can follow here.
        $('#cycleContainer').before('<div id="current_resident_nav"></li><ul id="pager"><li> <h2>artists</h2></ul></div>').cycle({
        //Specify options
        fx:     'scrollLeft', //Name of transition effect
        timeout: 0,           //Disable auto advance
        pager:  '#pager',     //Selector for element to use as pager container
        pagerAnchorBuilder: function (index) {               //Build the pager
        return '<li><p class="artists"><a href="#">' + titles[index] + '</p></a></li>';
        },
        updateActivePagerLink: function(pager, currSlideIndex) {
        $(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
        }
        });
        });

        </script>

        <script type="text/javascript">
        jQuery(document).ready(function($) {
        $jq("a.example_group").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

        });

        </script>

        <title>Tech Demo</title>
        </head>

        <body>
        <div id="cycleContainer" style="z-index:0;">   
        <div class="item">
        <div id="current_resident_content" style="border:1px solid black; width: 960px; height: 500px;" >
                            <div id="current_resident_images">

                                <!-- <div class="current_resident_img"><a class="swipebox" rel="gallery-1" href="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg"><img src="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg" width=100 height=100 /></a></div>

                                <div class="current_resident_img"><a class="swipebox" rel="gallery-1" href="http://www.newyorker.com/online/blogs/alpha/test/test-thumb-100x100.jpg"><img src="http://www.newyorker.com/online/blogs/alpha/test/test-thumb-100x100.jpg" width=100 height=100 /></a></div>-->


                                <div class="current_resident_img"><a class="example_group" rel="group1" href="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg"><img src="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg" width=100 height=100 /></a></div>

                                <div class="current_resident_img"><a class="example_group" rel="group1" href="http://www.newyorker.com/online/blogs/alpha/test/test-thumb-100x100.jpg"><img src="http://www.newyorker.com/online/blogs/alpha/test/test-thumb-100x100.jpg" width=100 height=100 /></a></div>

                                <div class="current_resident_img"><a href="www.reddit.com" >This is a test link.</a></div>

                                <div class="current_resident_img"><img src="{resident-thumbnail-4}" width=100 height=100 /></div>

                                <div class="current_resident_img"><img src="{resident-thumbnail-5}" width=100 height=100 /></div>

                            </div><br />
                            <div id="current_resident_bio">
                                        <h2>This is a test</h2>
                                            <p>Lorem Ipsum blah blah blah</p>                               

                            </div>
                        </div>


        </div>
        <div class="item">
        <div id="current_resident_content" style="border:1px solid black; width: 960px; height: 500px;">
                            <div id="current_resident_images">
                                <div class="current_resident_img"><a class="example_group" rel="group2" href="http://www.fmwconcepts.com/misc_tests/caption_test/1tmp_6819.gif"><img src="http://www.fmwconcepts.com/misc_tests/caption_test/1tmp_6819.gif" width=100 height=100 /></a></div>

                                <div class="current_resident_img"><a class="example_group" rel="group2" href="http://www.nasa.gov/centers/marshall/images/content/99076main_DSCF8603_t.jpg"><img src="http://www.nasa.gov/centers/marshall/images/content/99076main_DSCF8603_t.jpg" width=100 height=100 /></a></div>

                                <div class="current_resident_img"><img src="{resident-thumbnail-3}" width=100 height=100 /></div>

                                <div class="current_resident_img"><img src="{resident-thumbnail-4}" width=100 height=100 /></div>

                                <div class="current_resident_img"><img src="{resident-thumbnail-5}" width=100 height=100 /></div>

                            </div><br />
                            <div id="current_resident_bio">
                                        <h2>This is a test</h2>
                                            <p>Lorem Ipsum blah blah blah</p>                               

                            </div>
                        </div>


        </div>
        </div>
        </body>
        </html>

Jquery Cycle Slide中的Fancybox

2 个答案: