jquery Cycle & Fancyzoom together?
I am trying to use two jquery libraries together and am having some difficulty. I am trying to have a FancyZoom popup (http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/) contain a cycle scroller (http://jquery.malsup.com/cycle/)
To test/see the scroller work as expected you can add fancyZoom_LoadComplete() to the $(document).ready function. Works perfectly until it is contained in the fancyzoom.
There are no js errors in the debug window.
My code is below - NOTE: The fancyZoom_LoadComplete() function is a custom callback that I added to the fancyZoom js file. It works as expected, but if you want to truly recreate it you'll need to add
if (options.callback == true) { fancyZoom_LoadComplete(); }
to the end of the show function in the fancyZoom.js file.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#medium_box_link').fancyZoom({ height: 250, width: 550, callback: true });
});
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$("#ddlImageSelect").val(index + 1);
}
function fancyZoom_LoadComplete() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 0,
prev: '#prev',
next: '#next',
after: onAfter
})
$("#ddlImageSelect").change(function() {
var selvalue = parseInt($(this).val()) - 1;
$('.slideshow').cycle(selvalue);
return false;
})
}
</script>
</head>
<body>
<a href="#medium_box" id="medium_box_link">Launch a slideshow</a>
<div id="medium_box" style="display: none;">
<div class="cycleNav">
<a href="#" class="prev" id="prev">
<img alt="" src="images/slideshow-previous-button.png" /></a>
<select id="ddlImageSelect">
<option selected="selected" value="1">Slide 1</option>
<option value="2">Slide 2</option>
<option value="3">Slide 3</option>
</select>
<a href="#" class="next" id="next">
<img alt="" src="images/slideshow-next-button.png" /></a>
</div>
<div class="slideshow" id="slideshow">
<div class="slide">
<div class="slideLeft">
Some Text 1</div>
<div class="slideRight">
Some image 1</div>
</div>
<div class="slide">
<div class="slideLeft">
Some Text 2</div>
<div class="slideRight">
Some开发者_Python百科 image 2</div>
</div>
<div class="slide">
<div class="slideLeft">
Some Text 3</div>
<div class="slideRight">
Some image 3</div>
</div>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论