Welcome
Login / Register

Image gallery with thumbnails in JavaScript

Featured video
You need to have the Flash Player installed and a browser with JavaScript support.

Thanks! Share it with your friends!

URL

You disliked this video. Thanks for the feedback!

URL


Published by Admin in Java Script
737 Views

Description

Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

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

In this video we will discuss creating image gallery with thumbnails in JavaScript.

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 : Copy and paste the following HTML and JavaScript code in HTMLPage1.htm page.

[html]
[head]
[style type="text/css"]
.imgStyle
{
width:100px;
height:100px;
border:3px solid grey;
}
[/style]
[/head]
[body]
[img id="mainImage" height="500px" width="540x"
src="/Images/Hydrangeas.jpg" style="border:3px solid grey"/]
[br /]
[div id="divId" onclick="changeImageOnClick(event)"]
[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]
[script type="text/javascript"]

var images = document.getElementById("divId").getElementsByTagName("img");

for (var i = 0; i [ images.length; i++) {
images[i].onmouseover = function () {
this.style.cursor = 'hand';
this.style.borderColor = 'red';
}
images[i].onmouseout = function () {
this.style.cursor = 'pointer';
this.style.borderColor = 'grey';
}
}

function changeImageOnClick(event)
{
event = event || window.event;
var targetElement = event.target || event.srcElement;

if(targetElement.tagName == "IMG")
{
mainImage.src = targetElement.getAttribute("src");
}
}
[/script]
[/body]
[/html]

Finally run the application and test it.

Show more

Post your comment

Comments

Be the first to comment