Simple Jquery image rotator generating two galleries side by side



Currently, I am encountering an issue where I am unable to configure the Jquery rotator from
Easy Jquery Auto Image Rotator and script source Google jquery.min.js

I attempted to give the second gallery a different class and duplicated the js script.
Then, I replaced all the class and selector names with the second gallery.
However, only one of the galleries works, and I am seeking a solution that can encompass
both galleries with one function.

Additionally, I tried to use only one function and input both div ids into the (id) sections
-> which did not work. Now, both layers are stacked on top of each other, and I am unable to move them
by assigning float:left and float:right.

I would greatly appreciate your assistance.

Thank you in advance.

These are the divs: 

<div class="rotator">
  <ul>
    <li class="show"><img src="img/screenshots/screen1-big.jpg" alt="pic1" /></li>
    <li><img src="img/screenshots/screen2-big.jpg" alt="pic2" /></li>
    <li><img src="img/screenshots/screen3-big.jpg" alt="pic3" /></li>
    <li><img src="img/screenshots/screen4-big.jpg" alt="pic4" /></li>
  </ul>
</div>  
</div>
<div class="wrapper">
<div class="gallery">
  <ul>
    <li class="take"><img src="img/screenshots/screen3.jpg" alt="pic1" /></li>
    <li><img src="img/screenshots/screen2.jpg" alt="pic2" /></li>
    <li><img src="img/screenshots/screen4.jpg" alt="pic3" /></li>
    <li><img src="img/screenshots/screen1.jpg" alt="pic4" /></li>
  </ul>
</div>  


</div>



These are the div classes

/* rotator in-page placement */
div.rotator {display:none; float:left; width: 451px;}
/* rotator css */
div.rotator ul { margin:0; padding:0;}
div.rotator ul li { position:absolute; list-style: none;}
/* rotator image style */   
div.rotator ul li img {width:451px; height: 313px;}
div.rotator ul li.show {z-index:500;}

div.gallery {display:none; float:right; width: 451px;}
/* rotator css */
div.gallery ul { margin:0; padding:0;}
div.gallery ul li { position:absolute; list-style: none;}
/* rotator image style */   
div.gallery ul li img {width:451px; height:313px;}
div.gallery ul li.take {z-index:500;}



Function 1 for the rotator div 

    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

        if ($('div.rotator ul li').length > 1) {
        setTimeout('rotate()', 6000);
    }
    }

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

        if (current.length == 0 ) current = $('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'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
            //var rndNum = Math.floor(Math.random() * sibs.length );
            //var next = $( sibs[ rndNum ] );


        //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, function(){setTimeout('rotate()', 6000);}) .removeClass('show');

    };

    $(document).ready(function() {      
        //Load the slideshow
        theRotator();
        $('div.rotator').fadeIn(1000);
            $('div.rotator ul li').fadeIn(1000); // tweek for IE
    });



Function 2 for the gallery div 

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

        //Get the first image and display it (gets set to full opacity)
        $('div.gallery ul li:first').css({opacity: 1.0});

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds

        if ($('div.gallery ul li').length > 1) {
        setTimeout('rotate()', 6000);
    }
    }

    function rotate() { 
        //Get the first image
        var current = ($('div.gallery ul li.take')? $('div.gallery ul li.take') : $('div.gallery ul li:first'));

        if (current.length == 0 ) current = $('div.gallery 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('take')) ? $('div.gallery ul li:first') :current.next()) : $('div.gallery ul li:first'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
            //var rndNum = Math.floor(Math.random() * sibs.length );
            //var next = $( sibs[ rndNum ] );


        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({opacity: 0.0}).addClass('take').animate({opacity: 1.0}, 1000);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000, function(){setTimeout('rotate()', 6000);}) .removeClass('take');

    };

    $(document).ready(function() {      
        //Load the slideshow
        theGallery();
        $('div.gallery').fadeIn(1000);
            $('div.gallery ul li').fadeIn(1000); // tweek for IE
    });
javascriptjqueryhtmlcss

Answer №1

Typo

Firstly, there seems to be a typo in your code where you define the function as theGalley, but then call it as theGallery.

Is the issue with the second slideshow that is not working?

If the typo fix doesn't resolve the problem, let me know so we can investigate further.

I will provide more information after you respond.

Update:

Working Live Site:

Regarding: 

function(){setTimeout('rotate()',
within your rotate function (callback at the end), you have two functions named rotate. This is considered bad practice when writing Javascript.

Let's assume for better readability, your classes were named:

  • rotator
  • rotator2

You can make it work like this:

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

    //Get the first image and display it (sets full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});
    $('div.rotator2 ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    if ($('div.rotator ul li').length > 1) {
        setTimeout('rotate()', 1000);
        setTimeout('rotate2()', 1000);
    }
}
function rotate() { 
    //Get the first image
    var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if (current.length == 0) current = $('div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate 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 fade in effect for the next image, 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, function(){setTimeout('rotate()', 1000);}) .removeClass('show');
};
function rotate2() {    
    //Get the first image
    var current = ($('div.rotator2 ul li.show')? $('div.rotator2 ul li.show') : $('div.rotator2 ul li:first'));

    if (current.length == 0) current = $('div.rotator2 ul li:first');

    //Get next image, when it reaches the end, rotate back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator2 ul li:first') :current.next()) : $('div.rotator2 ul li:first'));
    
    //Set fade in effect for the next image, 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, function(){setTimeout('rotate2()', 1000);}) .removeClass('show');
};
$(document).ready(function() {      
    //Load the slideshow
    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweak for IE
    $('div.rotator2').fadeIn(1000);
    $('div.rotator2 ul li').fadeIn(1000); // tweak for IE
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing functions in AJAX using JavaScript callbacks

I'm in need of assistance to grasp how to start working on this problem. I have a task to write code for an object that allows multiple functions to be registered to execute a single common callback function. The objective of the object is to run al ...

javascriptajaxcallback

Tips for aligning an image in the center of a div

I'm facing a challenge that seems simple, but I just can't seem to crack it. Here's the HTML snippet in question: <div class="product"> <img src="product123.png" /> </div>` Accompanied by the following CSS: .product { ...

htmlcssmargin

Do I need to implement server side rendering in Vue or React to secure my REST API?

When my REST API is located on the same machine as the SSR of Vue or React (NUXT, NEXT), is it still necessary to secure the API? ...

javascriptreactjsvue.jsserver-side-rendering

Change JSON to an unordered list using <ul> and <li

I came across an item that resembles the following: { "qA": [ { "question": "How deep is the ocean", "answer": [ "quite deep", "very deep", "no deep at all" ] ...

javascriptjqueryhtmljson

The MessageError: expressjs is unable to read the property "image" because it is null

I am currently working on developing a shopping cart using express and mongodb. However, I encountered an error when attempting to include an image category in the form. Here is the code snippet for handling post requests in admin_product.js: router.post(& ...

javascriptnode.jsexpress

Discovering nearby intersections within 2 sets of arrays

Imagine having these two arrays: var a = [126, 619, 4192, 753, 901]; var b = [413, 628, 131, 3563, 19]; Is there a way to identify elements in both arrays that are close to each other by a certain percentage? Let's say we have the following functio ...

javascriptarrays

Transfer groups between divisions

In my HTML structure, I have two main divs named Group1 and Group2. Each of these group divs contains at least two inner divs, all with the class .grp_item. Currently, the grp_item class is set to display:none, except for one div in each group that has a c ...

javascriptjqueryhtmlswap

Assistance with PHP checkboxes in forms

I'm struggling to extract a list of selected items from checkboxes within a form. The checkboxes are part of an HTML table: HTML <input type="checkbox" name="carry[]" value="1" /> <input type="checkbox" name="carry[]" value="2" /> < ...

phphtmlarrayspost

I've noticed that my Node.js installation is missing the String.localCompare method. Can anybody explain why that

My question is clear, but to clarify further, here is a code example: > node > 'at'.localCompare undefined > 'at'.compare In anticipation of the next question, here are the details of my environment: > npm version { npm: ...

javascriptnode.jsstring-comparison

Lodash: the art of simplification

What is the best way to streamline the following code: rules = rules.map(rule => Object.assign(rule, rule.ruleOption.options)) rules.forEach(rule => delete rule.ruleOption) rules = _.keyBy(rules, 'code') I have recently started using Loda ...

javascriptlodash

Prevent HTML escaping inside of a code tag in JavaScript

Is there a way to search for tags "<" and ">" within a <code> block, setting them as text instead of HTML so that all tags and HTML can be displayed on the page? Currently, when I use jQuery to do a string replace, all tags are coming through ...

jqueryhtmlstringescaping

The ExpressJS EJS issue arises when trying to access a property that is undefined

I'm new to NodeJS and seeking assistance. I am working on a website where users can promote their virtual conferences for others to see. I have set up a form with the POST method, where the data gets pushed into an array and then displayed in an EJS f ...

javascripthtmlexpressejsbackend

Is there a disconnect between the input and upload methods?

While developing a website using PHP and Ajax, I encountered an issue where I need to use the GET method for inputting data when performing certain actions but have to utilize the POST method for uploading images due to its limitations. How can I retrieve ...

phpjqueryajaxpostget

Is there a way to modify the value of a constructor key once it has already been defined?

I am currently working on a simple constructor exercise where I need to update a value after the constructor has been created. Even after changing the value to true, the cat is still not making its noise. Challenge parameters The constructor function wi ...

javascript

What's the best method for concealing components: using a class to hide or removing them from the

I am encountering difficulties in React as I try to add a class to a component after a specific time duration. My goal is to apply the "hidden" class to a loading image, changing it to display: none after a few seconds. However, despite my efforts, I keep ...

javascriptreactjssettimeout

Socket.io crashes when refreshed repeatedly

I have set up a socket.io connection to a secure https server to receive data from JavaScript. Upon refreshing the page, I noticed that the socket is maintaining the connection - confirming this when I log information in the on('connection', func ...

javascriptnode.jssocket.io

Button from Bootstrap extends beyond the page on mobile devices

I am facing an issue with my button. It looks great on desktop, but when I switch to the mobile version, it goes beyond the screen width like in the image below: https://i.sstatic.net/69Zbs.png 1) How can I prevent this from happening with the code provi ...

htmlcsstwitter-bootstrap

Having trouble locating the element associated with the 'Accept All' button

Recently, I delved into the world of Selenium and Python webscraping. My current challenge involves locating and clicking the elusive 'Accept All' button on a pesky pop-up (image provided below) that appears when accessing the site in Chrome. Th ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Is it possible to use a PHP array as a JSON-encoded object for a select field value and interact with it using JavaScript?

I have a PHP function that retrieves database values to populate a select form field. I am attempting to fill the option elements with all relevant data from the query (id, name, min, max) without needing an AJAX request. To achieve this, I decided to json ...

phpjqueryjson

The content in tinymce cannot be edited or removed

Is there a method to prevent certain content within the tinyMCE Editor from being edited or removed? While I know that adding a class "mceNonEditable" can make a div non-editable, it can still be deleted. Is there a way to make it unremovable as well? ...

javascriptjquerytinymce