jQuery Image Gallery

jQuery Image Gallery with Examples

In this article, I am going to discuss jQuery Image Gallery with Examples. Please read our previous article, where we discussed the jQuery Scroll Event.

jQuery Image Gallery

Let’s see how to make Image Gallery using jQuery. First, create a folder with the name Images within the D drive and then put any 4 images with the name PIC1.jpg, PIC2.jpg, PIC3.jpg, and PIC4.jpg within the Images folder. The image gallery should look as shown in the image below. When we click on the thumbnail image, that image should be displayed in the main image gallery.

jQuery Image Gallery

Following is the complete source code of the image gallery using jQuery. Let us write the code first and then we will understand how it will work.

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
        <title>Home</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                        box-sizing: border-box;
                }

                body {
                        background: #fff;
                        min-height: 100vh;
                        background: linear-gradient(to right bottom, #273c75, #079992);
                        background-repeat: no-repeat;
                }

                img {
                        max-width: 100%;
                }

                .container {
                        padding: 40px 0;
                }

                figure {
                        max-width: 800px;
                        margin: 0 auto 40px;
                        border: 2px solid #fff;
                }

                figure img {
                        max-width: 100%;
                        min-width: 100%;
                        display: block;
                        height: 500px;
                        width: 540px;
                        box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
                }

                ul {
                        list-style: none;
                        margin: 0;
                        text-align: center;
                }

                ul li {
                        margin: 0 5px;
                        display: inline-block;
                        width: 150px;
                        border: 1px solid #fff;
                        cursor: pointer;
                }

                ul li img {
                        display: block;
                        opacity: 0.4;
                        transition: 0.4s;
                        height: 100px;
                        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
                }
        </style>
</head>

<body>
        <div class="container">
                <figure>
                        <img id="mainImg" src="D:\Images\PIC1.jpg">
                </figure>
                <ul>
                        <li><img src="D:\Images\PIC1.jpg"></li>
                        <li><img src="D:\Images\PIC2.jpg"></li>
                        <li><img src="D:\Images\PIC3.jpg"></li>
                        <li><img src="D:\Images\PIC4.jpg"></li>
                </ul>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
                $(document).ready(function () {
                        $('ul img').on({
                                mouseover: function () {
                                        $(this).css({
                                                'opacity': 1,
                                        });
                                },
                                mouseout: function () {
                                        $(this).css({
                                                'opacity': 0.4
                                        });
                                },
                                click: function () {
                                        var imageURL = $(this).attr('src');
                                        $('#mainImg').fadeOut(500, function () {
                                                $(this).attr('src', imageURL);
                                        }).fadeIn(500);
                                }
                        });
                });
        </script>
</body>
</html>
How this Image Gallery is Working?

Notice the HTML. We have an id “mainImg” where the actual image will be shown. And inside the <ul> element we have 4 <li> elements in which the thumbnails are present. Then notice the jQuery. We have bound 3 events to each image in the <ul> i.e. mouseover, mouseout, and click.

When the event is ‘mouseover’ we are increasing the opacity. When the event is ‘mouseout’ we are decreasing the opacity again (This can be using hover in CSS easily but here we are using just jQuery). When the event is ‘click’ you can see that we are doing 3 steps

  1. Retrieving the “src” attribute value on which thumbnail image is clicked
  2. In the <img> element of id “mainImg”, fading out the present image and setting the src attribute value
  3. Again, fading in the clicked image

Thus, our image gallery is ready

Output:

Now run the above code and you will get the following output.

How jQuery Image Gallery is Working?

Now mouse hovers over any thumbnail images and you will see that the opacity is increasing as shown in the below image.

How jQuery Image Gallery is Working

When we mouse out from the thumbnail, the opacity is decreasing as shown in the below image.

jQuery Image Gallery with Examples

Now when we click on any of the thumbnail images, that will be shown in the main image gallery as shown in the below image.

jQuery Image Gallery

In the next article, I am going to discuss how to Optimize jQuery Image Gallery with Examples. Here, in this article, I try to explain jQuery Image Gallery with Examples and I hope you enjoy this jQuery Image Gallery article.

Leave a Reply

Your email address will not be published. Required fields are marked *