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.
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.
Step 6 : Copy and paste the following HTML and jQuery code in HTMLPage1.htm page.
In our next video, we will discuss how to make this image gallery a bit more efficient using the concept of event bubbling.
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.
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.
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.
hats off ..so clean and nice explanation..
ReplyDelete'cursor': 'hand'... is not working because the consortium is renamed it to pointer. So change hand to pointer.
ReplyDeleteThe files that VS includes for me with a new web project are:
ReplyDeleteai.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