Databases
StackOverflow2013
Postsdbo
POjquery cycle a child from a different random div one at a time
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery cycle a child from a different random div one at a time
    text
    copied!<p>I have multiple content teasers on a page, where each teaser has multiple images that can be cycled through. I want to be able to use a jquery cycle such that it selects a random teaser and cycles through to the next image, and then selects another random teaser and repeats the same. The result should be a page of images where one image moves at a time somewhere on the page.</p> <p>HTML - </p> <pre><code>&lt;div class="video-slidehow"&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="video-slidehow"&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="video-slidehow"&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;span class="video-thumb slideshow"&gt;&lt;img src=""&gt;&lt;/span&gt; &lt;/div&gt; </code></pre> <p>So it selects a random "video-slideshow" wrapper and then cycles that wrapper's "video-thumb" child to the next. It then selects a different "video-slideshow" wrapper and cycles that "video-thumb" child to the next. </p> <p>Please note that I have cleaned up this html to make it easier, each video-slideshow div does have additional parent divs etc.</p> <p>I've been trying to do this by moving a class around to different divs and having that as the jquery element but that clearly doesn't appear to be the solution! </p> <p>Jquery - </p> <pre><code>var elements = $('.video-slidehow'); $(elements[Math.floor(Math.random()*elements.length)]).addClass('someClass'); $('.someClass').cycle({ fx: 'scrollRight', easing: 'easeInOutBack', speed: 700, timeout: 7000, after: doAfter }); function doAfter() { $('.someClass').removeClass('someClass'); var elements = $('.video-slidehow'); $(elements[Math.floor(Math.random()*elements.length)]).addClass('someClass'); } </code></pre> <p>With regards the 'random' requirement. Ideally it wouldn't be able to do the same wrapper div twice in a row.</p> <p>AFTER puppybeard's answer I have attempted the following to no avail but i feel like this is starting to go down the right lines! - </p> <pre><code>var elements = $('.video-slidehow'); $('.video-slidehow').cycle({ fx: 'scrollRight', easing: 'easeInOutBack', speed: 700, timeout: 7000, after: doAfter }); function doAfter() { $('.video-slidehow').cycle('pause'); $(elements[Math.floor(Math.random()*elements.length)]).cycle('resume'); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload