jQuery image gallery

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/05/jquery-image-gallery.html

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

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.

When you click on the image thumnail, the respective image should be displayed in the main section of the page.

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.

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

Replace ﹤ with LESSTHAN symbol and ﹥ with GREATERTHAN symbol

﹤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(500, function () {
$(this).attr('src', imageURL);
}).fadeIn(500);
}
});
});
﹤/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.