Databases
StackOverflow2013
Postsdbo
POHow do I make a j-query photo gallery slider play nice with duplicate slider?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I make a j-query photo gallery slider play nice with duplicate slider?
    text
    copied!<p>First off, I am very new to j-query. That being said, I have a very simple j-query photo gallery slider that holds images and fades into new ones every few seconds. I have a page where I duplicated it, and gave it different css and class/id names in the js to make a different one. I want both on the same page. Now that I have the second one up and running perfectly. It's causing the first one to not work even though they share different css,html, and j-query script</p> <p>Here is the all the code for the first one:</p> <p>j-query:</p> <pre><code>&lt;script type="text/javascript"&gt; function theRotator() { //Set the opacity of all images to 0 $('div#rotator ul li').css({opacity: 0.0}); //Get the first image and display it (gets set to full opacity) $('div#rotator ul li:first').css({opacity: 1.0}); //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('rotate()',10000); } function rotate() { //Get the first image var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); //Get next image, when it reaches the end, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); //Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { //Load the slideshow theRotator(); }); &lt;/script&gt; </code></pre> <p>html:</p> <pre><code>&lt;div id="new_home_photo" class="round_10px"&gt; &lt;div id="rotator"&gt; &lt;ul&gt; &lt;li class="show"&gt; &lt;a href="javascript:void(0)"&gt; &lt;div id="photo_1" class="round_7px"&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:void(0)"&gt; &lt;div id="photo_2" class="round_7px"&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:void(0)"&gt; &lt;div id="photo_3" class="round_7px"&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>the css:</p> <pre><code>/* rotator in-page placement */ div#rotator {position:relative;height:345px;margin-left:0px;} /* rotator css */ div#rotator ul li {float:left;position:absolute;list-style:none;} /* rotator image style */ div#rotator ul li img {vertical-align:left;} div#rotator ul li.show {z-index:500;} #photo_1 {background:url(images/home_actual_1.jpg)no-repeat; width:621px;height:420px;} #photo_2 {background:url(images/home_actual_2.jpg)no-repeat; width:621px;height:420px;} #photo_3 {background:url(images/home_actual_3.jpg)no-repeat; width:621px;height:420px;} </code></pre> <p>Here is the second one the is working and caused this first one to stop working:</p> <p>j-query:</p> <pre><code>&lt;script type="text/javascript"&gt; function theRotator() { //Set the opacity of all images to 0 $('div#rotator_update ul li').css({opacity: 0.0}); //Get the first image and display it (gets set to full opacity) $('div#rotator_update ul li:first').css({opacity: 1.0}); //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('rotate()',10000); } function rotate() { //Get the first image var current = ($('div#rotator_update ul li.show_update')? $('div#rotator_update ul li.show_update') : $('div#rotator_update ul li:first')); //Get next image, when it reaches the end, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('show_update')) ? $('div#rotator_update ul li:first') :current.next()) : $('div#rotator_update ul li:first')); //Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}) .addClass('show_update') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show_update'); }; $(document).ready(function() { //Load the slideshow theRotator(); }); &lt;/script&gt; </code></pre> <p>html:</p> <pre><code>&lt;div id="new_home_update"&gt; &lt;div id="rotator_update"&gt; &lt;ul&gt; &lt;li class="show_update"&gt; &lt;a href="javascript:void(0)"&gt; &lt;div id="update_1" class="round_7px"&gt; &lt;a href="http://www.prnewswire.com/news-releases/ptc-therapeutics-awarded-16-million-fda-orphan-drug-grant-to-support-an-ongoing-phase-3-study-in-cystic-fibrosis-103425769.html" target="_blank"&gt; PTC Therapeutics Awarded $1.6 Mil FDA Orphan Drug Grant to Support an Phase 3 Study in CF &lt;/a&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:void(0)"&gt; &lt;div id="update_2" class="round_7px"&gt; &lt;a href="http://www.docguide.com/news/content.nsf/news/852576140048867C852577A4005BDB10" target="_blank"&gt; Denufosol Provides Significant Lung Function Improvement in Patients With Mild Cystic Fibrosis &lt;/a&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:void(0)"&gt; &lt;div id="update_3" class="round_7px"&gt; &lt;a href="http://www.news-medical.net/news/20100918/Researchers-identify-new-target-for-cystic-fibrosis.aspx" target="_blank"&gt; Researchers identify new target for cystic fibrosis &lt;a/&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>css:</p> <pre><code>div#rotator_update {position:relative;height:345px;margin-left:0px;} /* rotator css */ div#rotator_update ul li {float:left;position:absolute;list-style:none;} /* rotator image style */ div#rotator_update ul li img {vertical-align:left;} div#rotator_update ul li.show_update {z-index:500;} #update_1 { width:621px;height:420px;margin:7px auto 7px 60px;} #update_1 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;} #update_1 a:hover {color:#F16C22;} #update_2 { width:621px;height:420px;margin:7px auto 7px 60px;} #update_2 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;} #update_2 a:hover {color:#F16C22;} #update_3 { width:621px;height:420px;margin:7px auto 7px 60px;} #update_3 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;} #update_3 a:hover {color:#F16C22;} </code></pre> <p>I have also tried many combinations of renaming classes and sharing classes and nothing has caused them to work at the same time. </p> <p>Thanks so much in advance!</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