Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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

1 comment:

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.