Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

jQuery image gallery

Suggested Videos
Part 40 - jQuery how to check if event is already bound
Part 41 - jQuery preventdefault
Part 42 - jQuery scroll event



In this video we will discuss how to create an image gallery with thumbnails using jQuery. We discussed how to do exactly the same thing using raw JavaScript in Part 41 of JavaScript tutorial.



The 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 the page.
jquery image gallery with thumbnails

For the purpose of this demo we will be using the images that can be found on any windows machine at the following path.
C:\Users\Public\Pictures\Sample Pictures

Step 1 : Open Visual Studio and create a new empty asp.net web application project. Name it Demo.

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

Step 3 : Copy images from C:\Users\Public\Pictures\Sample Pictures to Images folder in your project.

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

Step 5 : Add a reference to the download jQuery file. I am using jquery-1.11.2.js version for this demo. At this point your solution explorer should look as shown below.

jquery image gallery

Step 6 : Copy and paste the following HTML and jQuery code in HTMLPage1.htm page.

<html>
<head>
    <style type="text/css">
        .imgStyle {
            width: 100px;
            height: 100px;
            border: 3px solid grey;
        }
    </style>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#divId img').on({
                mouseover: function () {
                    $(this).css({
                        'cursor': 'hand',
                        'border-Color': 'red'
                    });
                },
                mouseout: function () {
                    $(this).css({
                        'cursor': 'default',
                        'border-Color': 'grey'
                    });
                },
                click: function () {
                    var imageURL = $(this).attr('src');
                    $('#mainImage').fadeOut(1000, function () {
                        $(this).attr('src', imageURL);
                    }).fadeIn(1000);
                }
            });
        });
    </script>
</head>
<body>
    <img id="mainImage" style="border:3px solid grey"
         src="/Images/Hydrangeas.jpg" height="500" width="540" />
    <br />
    <div id="divId">
        <img class="imgStyle" src="/Images/Hydrangeas.jpg" />
        <img class="imgStyle" src="/Images/Jellyfish.jpg" />
        <img class="imgStyle" src="/Images/Koala.jpg" />
        <img class="imgStyle" src="/Images/Penguins.jpg" />
        <img class="imgStyle" src="/Images/Tulips.jpg" />
    </div>
</body>
</html>

In our next video, we will discuss how to make this image gallery a bit more efficient using the concept of event bubbling.

jQuery tutorial for beginners

3 comments:

  1. hats off ..so clean and nice explanation..

    ReplyDelete
  2. 'cursor': 'hand'... is not working because the consortium is renamed it to pointer. So change hand to pointer.

    ReplyDelete
  3. The files that VS includes for me with a new web project are:
    ai.0.15.0-build58334.min.js
    ai.0.15.0-build58334.js
    Your sample refers to a different jquery file:jquery-1.11.2.js
    Do I need to change the code somehow to make the gallery work?
    The images display but there is no motion available.
    Thanks a million.
    Jay
    jay_hand@hotmail.com

    ReplyDelete

It would be great if you can help share these free resources