Databases
StackOverflow2013
Postsdbo
POCycle Divs and Thumbnails
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCycle Divs and Thumbnails
    text
    copied!<p>I'm hoping someone can save my me! I'm trying to create a (hopefully) simple rotating banner for my page. I have 7 divs that contain photos and text, they are as follows:</p> <pre><code>&lt;div id="content-1"&gt;Sample text&lt;/div&gt; &lt;div id="content-2"&gt;Sample text&lt;/div&gt; &lt;div id="content-3"&gt;Sample text&lt;/div&gt; &lt;div id="content-4"&gt;Sample text&lt;/div&gt; &lt;div id="content-5"&gt;Sample text&lt;/div&gt; &lt;div id="content-6"&gt;Sample text&lt;/div&gt; &lt;div id="content-7"&gt;Sample text&lt;/div&gt; </code></pre> <p>And below those divs I have 7 corresponding divs that are thumbnails:</p> <pre><code>&lt;div id="thumb-content-1"&gt;Sample text&lt;/div&gt; &lt;div id="thumb-content-2"&gt;Sample text&lt;/div&gt; &lt;div id="thumb-content-3"&gt;Sample text&lt;/div&gt; &lt;div id="thumb-content-4"&gt;Sample text&lt;/div&gt; &lt;div id="thumb-content-5"&gt;Sample text&lt;/div&gt; &lt;div id="thumb-content-6"&gt;Sample text&lt;/div&gt; &lt;div id="thumb-content-7"&gt;Sample text&lt;/div&gt; </code></pre> <p>I would like to do a few things:</p> <p>1) Every 5 seconds cycle through a new div (so "content-1" would display for 5 seconds, then "content 2" etc.</p> <p>2) Apply a class to the current thumbnail called "cr-rotator". I have the style already setup.</p> <p>3) I would like to be able to pause it from rotating when a user hovers over either the main div or thumbnail div.</p> <p>4) Lastly, I would like to have it so that if you hover over a thumbnail it would change the main content, then continue cycling when you mouse off. So say for example you hover over 'thumb-content-3' it will make the div 'content-3' visible and then when you mouse out it will continue cycling.</p> <p>I understand there is a lot demanded here and I thank in advance anyone who can help me out. I have been provided a script to cycle through the main images but I'm not sure how to implement the rest: </p> <pre><code>var divs = $('div[id^="content-"]').hide(), i = 0; (function cycle() { divs.eq(i).fadeIn(200) .delay(3000) .fadeOut(200, cycle); i = ++i % divs.length; // increment i, // and reset to 0 when it equals divs.length })(); </code></pre> <p>Thank you so much to anyone that can help me.</p>
 

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