Switching image display using JQuery

Switching image display using JQuery

JQuery is very useful in terms of client side website manipulation and adjustment. This highly decorated JavaScript library is also very popular among developers because of its extremely detailed workflow and ease of use.

In this article, I will describe how you can create a small panel and achieve switching image display among multiple images using JQuery functions.

First, let us create the HTML panel that will contain an image. The HTML panel is simple. Just create a div area that will hold an image element. Set appropriate width and height according to your choice. Here’s the HTML –

Switching images using JQuery on click

Once the HTML space is ready, we start our JQuery code for switching image display. The concept is that we have multiple images and we want the display to switch these images on firing of a specific event. This event might be hover, click or keypress.

Please make a note here. This tutorial is not about creating a carousel type display. The idea is to change the image that is being displayed currently. So, we just change the image source.

Switching image display on button click

Buttons are a common tradition. Although this is weak in terms of UI design and presentation, but switching image display on click of a button is still very common.

So, we create a button and give it an id. We will now use the JQuery click function to track the event and start switching image display in the HTML panel. As soon as the button is clicked, the callback function will track the current image’s source attribute.

Once the source attribute is tracked, we change the source attribute with our next desired source. In this way, the container remains the same but the image that was being displayed is replace by another one.

Here’s the JQuery code for doing the above job –

$(document).ready(function(){
                /* We define the sources */
                var src1 = 'img/1.jpg';
                var src2 = 'img/2.jpg';
                
                /* When the click event is fired, the image gets changed */
                $('#button').click(function(){
                    /* We change the src attribute of the image to switch the display */
                    $('#first').children('img').attr('src', src2);
                });                
            });

Switching image display while hover in and out

The above code would work fine and awesome! Switching image display is not a problem anymore. There are few more variations. Like changing the event on which the image gets switched. We can do another variation like we can show a second image on hover in and then come back to the first image on hover out.

Let’s see. Here’s the code –

Switching images using JQuery on hover

$(document).ready(function(){
                /* We define the sources */
                var src1 = 'img/1.jpg';
                var src2 = 'img/2.jpg';
                    
                /* Code for hover */
                $('#second').hover(function(){
                    $(this).children('img').attr('src', src2);
                },function(){
                    $(this).children('img').attr('src', src1);
                });
            });

So, basically we store the URIs to the image files in two variables and on firing of the respective event; we do the switching of images.

Image switching from database sources

Switching image display from database sources can also be a good option in case your web application requires interaction with the server. You need not write the basic HTML and JQuery codes in a PHP file. The HTML file is enough. You just need to fetch the image path value from the database using a $GET or $POST call to a PHP file that reads the database data.

If you are unaware of using GET and POST methods via JQuery and AJAX, try reading my article – Retrieve data using JQuery PHP.

Once you make the call via GET or POST, remember that you must return data in the JSON format. Usually data is returned in HTML format. So, that won’t work when you put that as a value for the src attribute.

Go on. Try for yourself and share your thoughts in the comments section.

Comments are closed.