1

I want to use jQuery cycle to make a banner with several elements that have different automatically playing effects.

For instance I want the image to fade in and out. And the text on top of the image to scroll from left to right.

I made the following HTML:

<div class="slideshow">
    <div>
        <p>txt</p>
        <img src="images/banner1.jpg" alt="banner1" />          
    </div>
    <div>
        <p>txt2</p>
        <img src="images/banner2.jpg" alt="banner2" />      
    </div>
</div>

I tried to initiate a second jQuery cycle instance with an after inside the first. But that doesn't work.

$('.slideshow').cycle({
    fx: 'fade',
    after: function(currSlideElement, options) {
        $('.slideshow p').cycle({
            fx: 'scrollHorz'
        });
    }
});

I also tried two totally different .cycle instances but then I got a next is undefined error.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
jansmolders86
  • 5,449
  • 8
  • 37
  • 51
  • I know what you're asking, and I don't know the answer, but you do know the link to the multiple effects is http://jquery.malsup.com/cycle/multi.html ... but I don't think that addresses your issue, if I understand it correctly. You want 2 separate cycles, one right after the other, each doing their own thing. I would say pay close attention to and make sure the jquery.cycle.all.js-1.7.1 loads before anything, so put that higher up on in between your head tags. – Jason Weber Feb 08 '12 at 08:06
  • Thank you for your reply! And yes, that's exactly what I want to do. Only on the same DIV. In the example the multi effect is loaded on two different DIV's. – jansmolders86 Feb 28 '12 at 08:52
  • I'm pretty sure you will need to write your own transition. Here is a similar question that I answered that may point you in the right direction: – lucuma May 08 '12 at 20:54
  • Yup, I see know that I needed to write something myself in the callback of Cycle. – jansmolders86 Nov 22 '12 at 19:53

0 Answers0