HomeОбразованиеRelated VideosMore From: kudvenkat

Image gallery with thumbnails in JavaScript

314 ratings | 61900 views
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.
Html code for embedding videos on your blog
Text Comments (57)
WooPoo (4 months ago)
thank you, it's perfect
vijaya lakshmi (6 months ago)
target element == "IMG" doesn't work. when i inspected , target element is "targetElement = img.imageStyle {alt: "", src: "file:///D:/javaScript-aspx/Panda/2.jpg", srcset: "", sizes: "", crossOrigin: null, …} "
Johnny Shao (8 months ago)
Is there someway to have a caption under the image and whenever we click the new image the caption changes corresponding to the image?
RangaRajan J (10 months ago)
all of your edu videos are perfect, easy to understand. Thanks a lot sir.
farah naz (1 year ago)
It's really time saving and a helpfull tutorial Thanks for your great effort for the viewer.
Jimmy Bakker (1 year ago)
I don't think it gets any easier than this.
Mughees Masud (1 year ago)
hi, are you there? i follow your video but it is not responding as i am using SUBLIME text editor. can you help me?
hemanth kumar (3 months ago)
Text editor doesn't matter, we can use any editor. Browser version matters.
dalila dali (1 year ago)
thanks a lot
Fizza AbdulRazzaq (1 year ago)
I need this functionality using asp.net .Please
Tyler Hatch (1 year ago)
Super helpful!
erinoyer (1 year ago)
fantastic thank you. is there an option to change the colour of the thumbnail border to .. say green.. for whichever image is the one being displayed? i.e. "while selected" or something?
Sony Kids (1 year ago)
super cool !!! I've also managed to achieve effect of chaging borders and cursor with CSS property 'hover' (instead of js mouseover-mouseout)
darkFo3 (1 year ago)
why not use css hover instead of JavaScript to change the cursor and border color?
Md Masud (1 year ago)
Easy to learn.
bicko akoko (1 year ago)
Please please make a tutorial on how to make an upload button that makes it easier to upload pictures to the gallery like what instagram does. Please.
invalidacess (1 year ago)
thank you for this tutorial, it helped me with a problem I was having on my own website. Because of your tutorial i was able to find a better solution to my problem :) thank you!
Sandhya Sharma (2 years ago)
why dont u make tutorial on css.???plz make it if possible coz ur way of explaining is really awsm
ArianitOn- (2 years ago)
cuz css is design, not programing... but you can learn bootstrap if you want, he made a video series about bootstrap
Shadow Aitherios (2 years ago)
Thank you sir
explicitG (2 years ago)
thanks, you are great in explaining things on simple way which means you are great instructor :)
let me know !!!!!!!!!! (2 years ago)
Thanks for this video. keep making
Michał Jankowski (2 years ago)
Perfect JavaScript gallery solution.
Joseph lucky (2 years ago)
Sir if I want to make a video gallery, can I use the same code but change the name of the src "img" to "vid" ?
chetan patil (2 years ago)
Nice JOB and Explaining ability.......i see your tutorial every where in Buses,Trams,Trains.......it is helping a lot..!!
Seb M (2 years ago)
Thanks but what if I want to use another image as a thumbnail, instead of the same smaller image
stephen cabreros (2 years ago)
for those whos using img with in <a> tags add ...you can add event.preventDefault();
Sikander Nawaz (2 years ago)
ITS Perfect
Sikander Nawaz (2 years ago)
+kudvenkat ah wasn't expecting reply from my teacher so quickly.. Thanku sir for all your efforts God bless you ☺
kudvenkat (2 years ago)
+Sikander Nawaz Sure, I will record and upload as soon as I can. Thank you very much for your patience.
Sikander Nawaz (2 years ago)
+kudvenkat Hi , Sir any chances that you will do oop videos from ground up to advanced level ? and php ?
kudvenkat (2 years ago)
+Sikander Nawaz Thank you for taking time to give us your feedback. This means a lot. I am very glad you found the videos useful. Free Dot Net & SQL Server video tutorials to help you become a web developer https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd DVDs with all the videos and slides for offline viewing http://www.pragimtech.com/Order.aspx Slides and Text Version of the videos can be found on my blog http://csharp-video-tutorials.blogspot.com Tips to effectively use my youtube channel. https://www.youtube.com/watch?v=y780MwhY70s If you want to receive email alerts, when new videos are uploaded, please subscribe to my youtube channel. http://www.youtube.com/subscription_center?add_user=kudvenkat If you like these videos, please click on the THUMBS UP button below the video. May I ask you for a favor. I want these tutorials to be helpful for as many people as possible. Please share the link with your friends and family who you think would also benefit from them. Best Regards Venkat
Alan Smithee (3 years ago)
You fucking save my life ! thanks a lot !
Bear (3 years ago)
thank you my friend <3
Gary Denison (1 year ago)
Siti Khadijah Siti Khadijah
L Tulip (3 years ago)
Thank you for your video,very helpful!
Vimana.studio (3 years ago)
Thanks !!! This is very helpfull.
SkytheQ (3 years ago)
You saved me so much! Thank you for this simple and fast tutorial!
village food secrets (1 year ago)
you are so godd sweet
leocarpo manuel (3 years ago)
Simple and pratical, very nice
Bastiram Brar (1 year ago)
Sam Cheon (3 years ago)
not woking. If I use with wordpress. how to creative script? Where can I write down the page?
Muhammad Zarshid (3 years ago)
thumps up for this excellent piece of work (Y)
SuperAdel121 (3 years ago)
This code does not work on my pc.
UrbanMBC (3 years ago)
Not this? .imgStyle:hover{ border: 3px solid red; } Nice video though man.
bishnu karki (3 years ago)
putting javascript inside head doesnot work for mouseover and out? can someone explain why is that and how can we do that??? 
playboycity (3 years ago)
+bishnu karki because the HTML needs to load before the for loop can act on it, which is why the script is after the HTML in the body
Calvin Hisoka (3 years ago)
thnx a bunch. been looking for this
khawar Mehmood (3 years ago)
sorry to say but this code didn't work on my computer 
Boxing in the Hallway (3 years ago)
It was not...
Boxing in the Hallway (3 years ago)
It was the coding that was wrong, it was me who did not get it, nice job.....I am so happy, hahahhahaah, thank you.....
Boxing in the Hallway (3 years ago)
I was all hyped up about this code, and the shit does not work, fuck....
Kris Coulson (3 years ago)
Great tutorial only issue I have is all the extra Javascript for the styling when you could have added it directly to the css with the hover property. Keep up the good work!
Mehdi Nijay (3 years ago)
Anyone have any idea about Venkat's face ?
ajay prajapati (3 years ago)
+tanya saira :)
Mehdi Nijay (3 years ago)
"Attractive voice" ;)
tanya saira (3 years ago)
I've noticed that his 'photo' is searched more than his 'playlist' in Google. No idea how he looks like.. But going by his intelligence & attractive voice he can't be bad looking.. I have a nice image in my mind.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.