jQuery

jquery Image Gallery

In this article we will discuss how to create jQuery image gallery with thumbnails.

The jQuery image gallery should be as shown in the image below. When you click on the image thumnail, the respective image should be displayed in the main section of your page.

jquery-image-gallery

jquery-image-gallery

jquery Image Gallery

Step 1 : Open Visual Studio and create a empty asp.net web application project and write the name of pproject jqueryImageGallery.

Step 2 : Right click on Name of your project in Solution Explorer in Visual Studio and create a new folder with name = Images.

Step 3 : Copy images from system and paste to Images folder in your project.

jquery-image-gallery

Step 4 : Right click on the Project Name in Solution Explorer in Visual Studio and add a new HTML Page.

jquery-image-gallery

Step 5 : Add a jQuery library link in html page.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Add this Css at html page for jQuery Image Gallery

<style>
        .rg-image-wrapper {
            position: relative;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 39px;
            min-height: 20px;
            width: 108px;
            height: 104px;
        }
    </style>

Html Code

<body>
    <img id="mainImage" style="border:3px solid grey; border-radius: 39px;
"
         src="/Images/download.jpg" height="500" width="540" />
    <br />
    <div id="div1">
        <img class="rg-image-wrapper" src="/Images/download.jpg" />
        <img class="rg-image-wrapper" src="/Images/download (1).jpg" />
        <img class="rg-image-wrapper" src="/Images/download (2).jpg" />
        <img class="rg-image-wrapper" src="/Images/download (3).jpg" />
        <img class="rg-image-wrapper" src="/Images/download (4).jpg" />
    </div>
</body>

jQuery Code

<script>
        $(document).ready(function () {
            $('#div1 img').on({
                mouseover: function () {
                    $(this).css({
                        'cursor': 'hand',
                        'border-Color': 'blue'
                    });
                },
                mouseout: function () {
                    $(this).css({
                        'cursor': 'default',
                        'border-Color': 'powderblue'
                    });
                },
                click: function () {
                    var imageURL = $(this).attr('src');
                    $('#mainImage').fadeOut(2000, function () {
                        $(this).attr('src', imageURL);
                    }).fadeIn(2000);
                }
            });
        });
    </script>

Finally Copy and paste the following HTML and jQuery code in own HTML page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#div1 img').on({
                mouseover: function () {
                    $(this).css({
                        'cursor': 'hand',
                        'border-Color': 'blue'
                    });
                },
                mouseout: function () {
                    $(this).css({
                        'cursor': 'default',
                        'border-Color': 'powderblue'
                    });
                },
                click: function () {
                    var imageURL = $(this).attr('src');
                    $('#mainImage').fadeOut(2000, function () {
                        $(this).attr('src', imageURL);
                    }).fadeIn(2000);
                }
            });
        });
    </script>
    <style>
        .rg-image-wrapper {
            position: relative;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 39px;
            min-height: 20px;
            width: 108px;
            height: 104px;
        }
    </style>
</head>
<body>
    <img id="mainImage" style="border:3px solid grey; border-radius: 39px;"
         src="/Images/download.jpg" height="500" width="540" />
    <br />
    <div id="div1">
        <img class="rg-image-wrapper" src="/Images/download.jpg" />
        <img class="rg-image-wrapper" src="/Images/download (1).jpg" />
        <img class="rg-image-wrapper" src="/Images/download (2).jpg" />
        <img class="rg-image-wrapper" src="/Images/download (3).jpg" />
        <img class="rg-image-wrapper" src="/Images/download (4).jpg" />
    </div>
</body>
</html>

Leave a Reply

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