jQuery Cycle Slide中的Fancybox
[英]Fancybox within Jquery Cycle Slide
问题描述
I have a series of slides that each contain a number of small thumbnails. 
我有一系列幻灯片，每个幻灯片都包含许多小缩略图。 These would then open to larger images in a lightbox. 然后，这些将在灯箱中打开以显示更大的图像。
I'm using Jquery Cycle and Fancybox to achieve this. 我正在使用Jquery Cycle和Fancybox实现此目的。 As of now I cannot get the images to open the lightbox. 到目前为止，我无法打开灯箱的图像。
I'm fairly new to jquery so any help/tips would be great. 我对jquery还是一个新手，所以任何帮助/技巧都很棒。 Here is the code for my small demo I was putting together: 这是我正在整理的小型演示的代码：
<!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 ? ' ' + 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>
2 个解决方案
解决方案1
0 2013-12-17 20:03:15
Well I can't test the full code, but I noticed a few things that were out of place or wrong. 好吧，我无法测试完整的代码，但是我注意到一些不适当的地方或错误的地方。
I wasn't able to access the cycle plugin on a test page using the src you currently have, so I changed it to a non https url. 我无法使用您当前拥有的src在测试页上访问循环插件，因此我将其更改为非https网址。
Also, you call at the end of your sample code: 另外，您在示例代码的末尾调用：
$("a.grouped_elements").fancybox();
Which doesn't exist. 不存在。 You have no 'a' elements with a class of 'grouped_elements', so that returns an error. 您没有带有“ grouped_elements”类的“ a”元素，因此返回错误。
Below is the code that I used to get it to work locally for me. 下面是我用来使其在本地工作的代码。 Apologize in advance for the formatting. 事先为格式道歉。
<!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 ? ' ' + 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>
解决方案2
0 已采纳 2013-12-18 03:54:09
After playing around a bit, the final solution ended up being that an issue with setting the z-index of the slideshow to a negative number. 经过一番尝试之后，最终的解决方案最终是将幻灯片的z-index设置为负数的问题。 The final code looks as such: 最终代码如下所示：
<!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 ? ' ' + 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
浏览到特定幻灯片-jQuery循环 - Browse to specific slide - jquery cycle
jQuery Cycle - 未加载img幻灯片，重新排列幻灯片 - jQuery Cycle - img slide not loaded, requeuing slideshow
在jQuery Cycle2中定位下一个幻灯片 - Target the slide after next in jQuery Cycle2
使用当前的jQuery Cycle幻灯片更新DIV内容 - Update DIV contents with current jQuery Cycle slide
jQuery Cycle2：如何通过幻灯片编号获取幻灯片 - jquery cycle2: how to get a slide by its slide number
在iframe中使用Jquery Fancybox自动高度？ - Using Jquery Fancybox auto height within an Iframe?
幻灯片更改之前或之后的jQuery周期触发事件 - jquery cycle trigger event on slide change not before or after
jQuery Cycle-#next #prev，在currentGallery的最后一张幻灯片之后转到nextGallery - jQuery Cycle - #next #prev, goto nextGallery after final slide of currentGallery
在JQuery Cycle中，如何获取当前幻灯片的src？ - In JQuery Cycle how do you get the src of the current slide?
jQuery周期-您能否定位其他页面上的某些“幻灯片”？ - jquery cycle - can you target certain “slide” from other page?
相关标签