Nested jQuery Cycle?

Question

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>

Jab · Answer 1 · 2009-02-17T17:22:59.277

If I'm getting your concept this should work. One thing you will need to do to make it look right is to have a fixed width and height of cycleContent with overflow:hidden.

Edit I changed the second jquery selector to use the class. So the markup no longer has cycleImages as an id. Since you will be repeating it, you should use a class to select the elements.

jQuery(function($) {
    $('#cycleContent').cycle({
        fx: 'scrollRight',
        timeout: 15000
    });
    $('.cycleImages').cycle({
        fx: 'fade',
        speed: 500,
        timeout: 3000,
        pause: 1
    });
});

The CSS I'm using is this, note the width and height are the sizes of my test images.

#cycleContent
{        
    width: 77px;
    height: 94px;
    overflow: hidden;
}

And the markup, just so for clarity.

<div id="cycleContent">
    <div>
        <div class="cycleImages">
            <img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg" /><img
                src="images/4.jpg" /><img src="images/5.jpg" />
        </div>
    </div>
    <div>
        <div class="cycleImages">
            <img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg" /><img
                src="images/4.jpg" /><img src="images/5.jpg" />
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Jan 16 '12 at 04:23

What about this ? (I am not shure but...) end: function() { ... } should work properly

$(document).ready(function() {
    $('.cycleImages').cycle(); // <- class in here
    var slideshow = $('#cycleContent').cycle({ // <- ID in here
        fx: 'scrollRight',
        speed: 'fast',
        timeout: 0,
        before: function() {
            $(this).cycle({ // <- new call of the inner
                fx: 'fade',
                speed: 'fast',
                timeout: 3000,
                autostop: true,
                end: function(){ slideshow.cycle('next'); } // <- new call of the outer
            });
        }
    });
});

So you don´t need to worry about numbers of elements in the inner cycles, 3 or 5 or what, don´t care.

Greetinx, Michael

Nested jQuery Cycle?

2 Answers2

Linked