How do I make a j-query photo gallery slider play nice with duplicate slider?

Question

Hello, 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

Here is the all the code for the first one:

j-query:

<script type="text/javascript">

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();
});

</script>

html:

<div id="new_home_photo" class="round_10px">
                    <div id="rotator">
                      <ul>
                        <li class="show">
                        <a href="javascript:void(0)">
                        <div id="photo_1" class="round_7px">
                        </div>
                        </a>
                        </li>
                        <li>
                        <a href="javascript:void(0)">
                        <div id="photo_2" class="round_7px">
                        </div>
                        </a>
                        </li>
                        <li>
                        <a href="javascript:void(0)">
                        <div id="photo_3" class="round_7px">
                        </div>
                        </a>
                        </li>
                      </ul>
                    </div>
                </div>

the css:

/* 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;}

Here is the second one the is working and caused this first one to stop working:

j-query:

<script type="text/javascript">

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();
});

</script>

html:

<div id="new_home_update">
                        <div id="rotator_update">
                          <ul>
                            <li class="show_update">
                            <a href="javascript:void(0)">
                            <div id="update_1" class="round_7px">
                            <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">
                            PTC Therapeutics Awarded $1.6 Mil FDA Orphan Drug Grant to Support an Phase 3 Study in CF
                            </a>
                            </div>
                            </a>
                            </li>
                            <li>
                            <a href="javascript:void(0)">
                            <div id="update_2" class="round_7px">
                            <a href="http://www.docguide.com/news/content.nsf/news/852576140048867C852577A4005BDB10" target="_blank">
                            Denufosol Provides Significant Lung Function Improvement in Patients With Mild Cystic Fibrosis
                            </a>
                            </div>
                            </a>
                            </li>
                            <li>
                            <a href="javascript:void(0)">
                            <div id="update_3" class="round_7px">
                            <a href="http://www.news-medical.net/news/20100918/Researchers-identify-new-target-for-cystic-fibrosis.aspx" target="_blank">
                            Researchers identify new target for cystic fibrosis
                            <a/>
                            </div>
                            </a>
                            </li>
                          </ul>
                        </div>
                </div>

css:

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;}

I have also tried many combinations of renaming classes and sharing classes and nothing has caused them to work at the same time.

Thanks so much in advance!

Answer 1

The issue is that your functions are still named the same (i.e. theRotator and rotate appear twice in the page), which is causing the issue.

The best solution would be to change your theRotator and rotate methods so that you can pass in the ID of whichever slideshow you want to rotate. Something like:

function theRotator(sliderId) {
    //Set the opacity of all images to 0
    $('div#' + sliderId + 'ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    $('div#' + sliderId + ' 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(' + sliderId + ')',10000);
}

function rotate(sliderId) { 
    //Get the first image
    var current = ($('div#' + sliderId + 'ul li.show')?  $('div#' + sliderId + ' ul li.show') : $('div#' + sliderId + ' ul li:first'));

    ...
};

$(document).ready(function() {      
    //Load the slideshows
    theRotator('rotator');
    theRotator('rotator_update');
});