0
我有一系列幻燈片，每個幻燈片都包含許多小縮略圖。然後這些將在一個燈箱中打開到更大的圖像。Jquery Cycle內的Fancybox幻燈片
我正在使用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 ? ' ' + 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>
刪除此評論，請參閱下一條評論。 – royalenfield
感謝您的幫助。在玩你的代碼版本之後，未定義的函數錯誤確實消失了。現在，當我查看該頁面時，幻燈片沒有問題，但fancybox沒有。如果我刪除正在調用循環插件的腳本，fancybox可以正常工作，但幻燈片不會（這是預期的）。即使有noconflict，他們仍然可能是兩個職能之間的衝突嗎？ – royalenfield