Hi, I am trying to build a slide show with jQuery cycle plug in.
In the slide show there are contents and inside the contents there is basic image gallery.
Timeout of cycle which image gallery uses is fewer than the contents timeout. So content waits for 15 second and the image gallery will have 5 pics with 3 seconds timeout which makes 15 second then the content changes.
Everything sounds ok but when i execute the page, it cycles the content and the first image gallery. But when it jumps to second content it doesn't cycle the image gallery.
I have tried to put $('#cycleImages').cycle({... this code block above the image gallery repeater but it didnt work out.
How can i get these nested cycles work together? Thank you
<head runat="server">
<script type="text/javascript" src="/Js/jquery-1.2.6.js"></script>
<script src="/Js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#cycleContent').cycle({
fx: 'scrollRight',
delay: -1000,
timeout: 15000
});
});
$('#cycleImages').cycle({
fx: 'fade',
speed: 500,
timeout: 3000,
pause: 1
});
</script>
</head>
And this is my html mark up
<div id="cycleContent">
<asp:Repeater ID="rptContent" runat="server">
<ItemTemplate>
<div>
<h2 class="slideShow-type">("Type.Name") %></h2>
<h2 class="slideShow-title">("Title") %></h2>
<div id="cycleImages">
<asp:Repeater ID="rptBigPictures" DataSource='<%#Eval("Images") %>' EnableViewState="false"
runat="server">
<ItemTemplate>
<asp:Image ID="imgProfile" runat="server" ImageUrl='<%#Eval("Path") + ".jpg" %>' />
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>