Create Simple HTML Photo Gallery with JavaScript

Posted on November 18, 2009 in HTML/CSS Category

In this tutorial you will learn how to create a simple and effective html photo gallery using a little JavaScript that you might need for your portfolio or a personal project.

As this will be just a simple html photo gallery, when you hover the thumbnails, we will change the source of images just by using a single line of JavaScript, so the difficulty should be easy.

Simple HTML Photo Gallery using Javascript

Download a Good Editor

First download Notepad++ or Sublime Text, which will help you a lot if you are a beginner, and create a new text document and save it as index.html.

Video Tutorial

Update (20 January 2015): Because a lot of users asked in the comments where they can find a gallery with navigation and slideshow, you can check my newest tutorial with a complete html photo gallery here, which includes navigation arrows, bullets, slideshow and thumbnails. Check it out, or if you don't need this advanced image gallery, you can just continue reading the simple html photo gallery under the video.

Basic HTML Photo Gallery Structure

We need to declare the document type for our html photo gallery and we can start to create the basic code. Check the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
		<title>Simple Photo Gallery with HTML and JavaScript</title>



In order to create our html photo gallery we need 3 divs:

  • one for the main html photo gallery
  • one for the thumbnails
  • one for the preview

Write the HTML Photo Gallery

Under the <body> tag write a <div> to align the html photo gallery in the middle of your screen and <h3> for a title:

<div class="gallery" align="center">
<h3>Simple HTML Photo Gallery with JavaScript</h3>

Now we must create another <div> for thumbnails, with your images and the Javascript code to load the full image on rollover. You can add any image links you want.

The attribute used below for our html photo gallery is named onmouseover. This attribute only works on links, images and button. Whenever your mouse enters in that image container, the code inside the attribute will run. In our case every image hovered will send his source link to the big thumbnail image. Check the code below:

<div class="thumbnails">
	<img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt="" />
	<img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt="" />
	<img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt="" />
	<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt="" />
	<img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt="" />

Add a Big Preview Image under Thumbnails

Now that our html photo gallery has the thumbnails ready, you need to create one more <div> with the preview image. Don't forget to set the name attribute as in example below:

<div class="preview" align="center">
	<img name="preview" src="images/img1.jpg" alt=""/>

</div> <!-- Close the gallery div -->

Styling HTML Photo Gallery with CSS

Our html photo gallery is ready and working very good, but we need to apply some CSS (Cascading Style Sheets). You can find more about CSS and styles here. Under the ending of <title> tag write the css styles below:

<style type="text/css">
	body {
		background: #222;
		margin: 0;
	.thumbnails img {
		height: 80px;
		border: 4px solid #555;
		padding: 1px;
		margin: 0 10px 10px 0;

	.thumbnails img:hover {
		border: 4px solid #00ccff;

	.preview img {
		border: 4px solid #444;
		padding: 1px;
		width: 800px;

Update (12 May 2016)

As the other users reported that the name attribute is obsolete and not used anymore, here is a simple alternative using the getElementById function to target elements using their id. Here is an example for the thumbnails:

<img onmouseover="getElementById('preview').src=getElementById('img1').src" id="img1" src="images/img1.jpg" alt="" />

And the preview image should be:

<img id="preview" src="images/img1.jpg" alt="" />

Basically you must replace the name attribute with id, and when targeting an element using the name attribute you should replace it with the getElementById function.

Update (7 February 2017)

To get the image source faster, without targeting every element using his id, you can refer exactly to the element where the onclick/onmouseover event is happening. More precisely, I am talking about the Javascript this keyword.

The code for the thumbnails should look like below, using the this keyword to get the value of the src attribute from the element in action.

<img onmouseover="getElementById('preview').src=this.src" src="images/img1.jpg" alt="">

Final Results

You can style the html photo gallery as you want, but make sure to not add very big images. When a user is loading the page for the first time, he might wait a lot of time if all your pictures are large.

Live Preview

Download Files

Related Articles
  1. Aziz says:

    Thank you so much

  2. Johan says:

    Hi Dan,
    I’m new and working on a personal jukebox project. I would like to have 200 thumbnails splitted in 10 sections (exactly as on my real jukebox).
    On my page I have 10 buttons and when I press Button 1 it should show me first 20 thumbnails, button 2 should show next 20 etc…

    How to do this ? (showing 20 thumbnails is working thanks to your good explanation)
    but how to make connection to load set 1, set 2, 3 …. when click on button.

    next question is when I hover the thumbnail, I would like to see the border colored in red and should stay like this until another one is pressed. I saw some js code here, but I can’t get that working properly. Also text below the big picture is not working.

    You probaly must think now it there is anything that works … yes when I click image, it’s shown in big picture window. At least that’s already something :)

    here’s a link to my code

  3. Don Clarke says:

    Thank you for the code. Worked fine on the hard drive. When I transferred to the website 1/2 the images loaded and 1/2 did not.

    • Hello Don,

      That’s because your images does not exists in the location added. I saw that some of your images uses .jpg and .JPG capitalized extension.

      Change your images path with the correct one and the html gallery should work.

      • Don Clarke says:

        I caught it Dan. The ones coming off the camera in upper case. The ones thru the Photo Editor in lower case. Great Script. Thank you. I saw below a message about video from YouTube. It can be done as I did it years ago using string concatenation. YouTube path + file number = full path. Not written script in 15 years… Again thank you for the script. :)

  4. Mark Dorman says:

    Is it possible to embed more than one of these galleries on a page? I have been trying but every time I do it seems to link them and the 2nd gallery doesn’t automatically come up until a thumbnail is selected.

    • Hello Mark,

      Sorry for the late answer. Actually you can ember more than one gallery. The reason the second one is not working is because they are using the same id and names.

      For example, if you have 10 images in both galleries and you target image number 3, the script won’t know which one to target, because it’s an easy inline script. Just use “img3_g1” and “img3_g2” or whatever names you want. Same you will need to do with the preview container. It has an id too.

      • Matthew Oakey says:

        This was great !!!

        I did mine with the onclick… works fine, but I can’t seem to get any Youtube video (or any local) to play in the “space” where the pics show… just a big empty space of nothing until I click on another picture…

        Any ideas?

  5. Mike says:


    Amazing tutorial! Have been reading it with a pleasure.

    Question! Is there a way that I can put a text under big image when clicking the thumbnail? I already used onclick instead of onmouseover. Different text for different image, is it possible?

    Thanks anyway!

    • Hello Mike,

      Yes, it is possible. Under the big preview image you should create a div with an id (for example “slideDescription”), so you can target it from the thumbnails.

      Next, you need to update the alt attribute of every thumbnail and their onmouseover or onclick inline code like this:

      <img onmouseover="getElementById('preview').src=this.src;getElementById('slideDescription').innerHTML=this.getAttribute('alt')" src="images/img1.jpg" alt="This is a sample description.">
      <img onmouseover="getElementById('preview').src=this.src;getElementById('slideDescription').innerHTML=this.getAttribute('alt')" src="images/img2.jpg" alt="Another description.">
      <img onmouseover="getElementById('preview').src=this.src;getElementById('slideDescription').innerHTML=this.getAttribute('alt')" src="images/img3.jpg" alt="Some image description.">

      Hope it helps. This was the easiest method I could get, using Javascript.

  6. Melinda Clare says:

    Is there a way to have an image default into the preview box without clicking on a picture?

    • Hello Melinda,

      Yes it is possible. The images are loaded when you hover a thumbnail. The “.preview” div remains static when loaded and is changed when you hover the small pictures.

  7. Anser says:


    This is a very simple program to copy, and use. I love it.

    Thanks for your wisdom.

  8. Alexandre says:

    Thank you for this simple code use to create simple HTML album.
    It’s not so easy to find this on the web. Free and without inscription.

  9. Ross Cooper says:

    Thank you for the tutorial, just what I needed for a project for school. Only problem that I have, is that instead of using a mouse over I would like for the user to click the thumbnail for the image. Was there a specific reason for you using the mouse over technique. If not then I can use the on click command instead of the mouse over. Thanks in advance for your assistance.

  10. Kate Robinson says:

    Great tutorial. Thank you! Saved me a great deal of time on a client’s redesign. Only problem is when I add more than 5 thumbs, the code no longer works. What am I doing wrong?

    • Hello Kate,

      Probably you forgot to change the id number of the other images? Make sure to follow the same pattern as the other images. Just copy, paste and change the numbers.

  11. Austin says:

    Hi. Thanks for this great tutorial! When I first load the page, the preview image doesn’t seem to load until I hover over a thumbnail. How do I set a default image for the preview?


  12. Jayanth says:

    Is there a way to add images automatically as they enter the folder? I intend to make a photo gallery. I don’t want to write

    every time I add a photo to the folder.

    • Hello Jayanth,

      You need to add some PHP code for that. Try to name the images with “image1”, “image2” etc. After that you can use the PHP for function to create a loop with how many images you have.

  13. Karla Evans says:

    Thank you for this great tutorial! I am trying to use this gallery for a university project, but my professor says I cannot use the ‘name’ attribute (used for thumbnail preview) – as it is now obsolete. Is there an alternative way to make this work? I tried using ‘id’ attribute instead but could not get it to work properly.

    For example:

    <img onmouseover="preview.src=img3.src" id="img3" src="images/img3.jpg" alt=""/>

    Instead of:

    <img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>


    • Hello Karla,

      I updated the tutorial with an alternative solution to your name attribute, as some other users reported the same thing as you. Instead of name attribute you can use the JavaScript function getElementById to target elements and also you must replace the name attribute with an id to all elements. Read the update and you will see some example there.

  14. Rebekka says:

    Thank you for the wonderful and easy tutorial!
    I tried to research it on my own, but wasn’t successful, therefore: Is there an “easy” possibility to implement a subtext under the picture preview?

  15. Ziga says:


    The gallery looks nice, but I have a problem with Javascript to load pictures. Can I get some help with that? At the moment I just have HTML and CSS done. Thanks.

    • Hello Ziga,

      What exactly is not working there? Can you provide me a code sample using CodePen or jsFiddle? It would be easier for me to read the code.

      • Ziga says:

        I am learning now HTML and CSS and I am making my page from scratch and I just added the codes into hmtl and css files and it seems ok. I just don’t know how to make it work so the images would show as they do in an example you have provided. Only the first image is there. And as I read, I must put JavaScript in order for this to work. So I am stuck at this point now.

        For now I have this: (just changed photos, everything is just like i have it)


        • Hello Ziga,

          Sorry for the late reply. Your HTML code is not ok on the thumbnails images. You added the link twice, including in the image name. If you can read the tutorial again (the thumbnails part) you will see that I gave a simple name to every image (to use it with JavaScript):

          <div class="thumbnails">
          	<img onmouseover="preview.src=img1.src" name="img1" src="http://imagelink" alt="" />
          	<img onmouseover="preview.src=img2.src" name="img2" src="http://anotherimagelink" alt="" />
          	<img onmouseover="preview.src=img3.src" name="img3" src="http://someotherimagelink" alt="" />

          Here is the same jsFiddle, but updated by me with the correct code. Compare it with yours.

      • Brandy says:

        I am not sure what I am doing wrong either. I inserted my pictures in where you had yours. I cannot find the JavaScript code you are speaking of.

        • Hello Brandy,

          Check the comment above yours. The JavaScript code is very simple and is located in every image. It should run on mouse over, exactly as it says.

  16. Anecito Santillan says:

    Your code works great, but I want to add some feature in it. When I hover the mouse to the larger picture, I want it to zoom. Here is my code, but when the picture changes, the zoom will still be the same.

    • Hello Anecito,

      Can you please post your working code on CodePen or jsFiddle and not here inside comments? Maybe I can help you and it would be easier for me to understand.

  17. Renuka says:

    Hi Dan,
    I tried your code, it worked fine. But I wanted next and previous buttons as I have many images to be posted on that gallery page.

    • Hello Renuka,

      You should find another gallery tutorial on my website with navigation arrows, so you can add more images. Try it and let me know.

  18. Seth says:

    Thanks for these tutorials and explanation. They are really helpful.

    Here’s my question:
    I have one example of 24 images to show so using your

    I would like to create a matrix of rows and columns (say 6×4 or 5×5 etc) for the thumbnails as 24 images would scroll down a long way. Is this easily possible.

    Thanks in anticipation.

    • Seth says:

      I think I’ve done it using an html table.

      • Hello Seth,

        Even if you solved the problem I will try to respond to your question.

        If you want to have the thumbnails with 6 images per row with equal width, you can divide 6 by 100 and use the result as percent in the image width.

        Note that you must have same size on your images if you want equal height (or you can use use overflow hidden with fixed containers).

      • Seth says:

        Thanks Dan, I didn’t achieve what I wanted with html tables, all I got was a complete mess.

        Thanks also for the added info although I don’t quite understand that. I’ll do some more learning.

  19. Shon says:

    Is there a way to specify a folder instead of individual files?

    • Hello Shon,

      Yes there is, but you will need some PHP code there with one variable to specify the folder name and one for filenames, then you can check the total files and bring the code together.

      Anyway if you need it this way, your photo gallery code should be a lot more different, so is a bit complicated.

  20. Iulian says:

    Hi! Although asked before, I could not use properly the answers. So, I have a simple question. I created the gallery exactly as in this tutorial and works like a charm!

    What I still need to do is to put a title (caption) under each picture in the preview, but still preserve the appearance (the horizontal alignment of the preview pics). I assume it involves also some CSS to align the text under each preview image.

    Can you help me with this?
    Thanks in advance!

    • Hello Iulian,

      You can’t add captions on this gallery as it has only images and it must contain divs to act as a container with image and text inside.

      I suggest you to search and use my other tutorial that changes the images when you click the thumbnails. There you can add another div with text.

  21. Edwin says:

    How can I put the thumbnails vertically on the right side of the preview image?

    • Hello Edwin,

      You can simply wrap the two containers (thumbnails and preview) into a div centered on the page, and inside you can float right the thumbnails. You also need to adjust the CSS a little.

      I made you an example here:

      • Edwin says:

        Thanks that works! Is it possible I can use the same html and css code but do a video gallery in similar style?

        • It is possible, but for that you need to change the html and also use some Javascript.

          Try to search my other tutorials about photo galleries. There is one that uses divs with images, actioned by Javascript. You can change the image with your video.

          • Edwin says:

            So I looked at your other tutorial and I got the video to show up when I click on the thumbnail but how do I stop/reset the current video that’s playing when I click on a different thumbnail?

            Here is the code I have

          • For that you will need to stop all videos using JavaScript or jQuery (whatever do you prefer) every time a thumbnail is clicked. You can search on Google for the play/stop JavaScript events.

  22. Danny says:

    Thank you for the tutorial and its simplicity. I am new to coding and this helped me understand more about the process. I have been trying to set up something similar with 6 mouseover buttons where you have the thumbnail images. The buttons would be different colors with a title and when you mouseover them, a different image for each one will show in the view box below. I have tried changing the divs and/or adding to them with no success.

    • Hello Danny,

      Your code is not working because you use links or buttons, instead of images. The code is actually referring to each images using this.src, and your link does not have any src attribute. Here is how you can do it:

      <a href="javascript: void();" onmouseover="preview.src=''">

      Or you can add onclick instead of onmouseover.

      • Danny says:

        Thank you very much! I look forward to using your tip after I get off work tonight. I knew it was something simple, but I just have to learn the language. Thanks again.

      • Patrick says:

        Where is all the JS code? The basics to get this running with functions events etc?!

  23. Mohammad Reza says:

    Thanks a lot!

  24. Kajal says:

    Tried to add it on my blog. Thank you!

  25. Nicodorr says:

    Thank you man!!! Keep working.

  26. India says:

    Hi! I LOVE This tutorial but when I scroll over the little pictures it seems to only keep one picture up, I was wondering if you could help me by telling me how to make this happen as soon as possible? (I am doing a project due in two weeks!) Thank you! :D

    • Hello India,

      When you scroll over the thumbnails, the big image is not changing? Not sure exactly what you’re saying. Also, what browser do you use to test your html photo gallery?

      • India says:

        Yea! When you scroll over the small images the previewed one is supposed to change! I use an application called text wrangler if that helps! Sorry to bug you! :D

        • I think there is something wrong with your code. Do you have a link where can I take a look? Or paste here some screenshots.

          • India says:

            Here it is!!


            .thumbnails img {
            height: 80px;
            border: 4px solid #555;
            padding: 1px;
            margin: 0 10px 10px 0;
            .thumbnails img:hover {
            border: 4px solid #00ccff;
            .preview img {
            border: 4px solid #444;
            padding: 1px;
            height: 500px;

            I already have the opening tags!

            Thanks! :D

          • There is a problem. You didn’t pasted the code correctly and I can’t see the html. Can you put your code on CodePen or jsFiddle, save it and write the link here.

  27. Arif says:

    Hi Dan,
    I am working on a website and I found that your code is simple and able to work. However, I am facing a problem. I can’t seemed to get the thumbnails out. I have edited your codes to set to my images but only 1 thumbnail appeared and the preview image overlapped the thumbnail. Please help, as I need it for my assignment that is due quite soon. Thanks :)

  28. Patrick says:

    Thanks so much for the tutorial it has helped me so much. I just wanted to find out how can I include an unordered list to appear in the preview with the image. I have a site that lists a few details with the image? I have tried using divs but haven’t been successful. I’m trying to get the the thumbnails gallery only show the images while the preview shows image and list. Any assistance will be greatly appreciated. Thanks again…

  29. Shahan says:

    Hi, great tutorial
    However, when I hover over, the image does not change, is this have to do with the preview and also can you add up to 20 pics.

  30. Niall says:

    I’m a beginner and I cant get it to work..Could someone explain the js part to me? Do I need to download something to support the “onmouseover” part??

    • Hello Niall,

      You don’t need anything special to run this html photo gallery. About the event onmouseover=”preview.src=img1.src”, this code will replace the big preview image source link with the picture you hover with your mouse. On you can use onclick if you don’t prefer hover.

  31. Grant says:

    How would you add a text caption to the preview images.
    Something like this perhaps:

    Thanks, Grant

  32. George says:

    What a lifesaver… thanks for this awesome tutorial! It saved me a bunch of time. I only changed the coding from “onmouseover” to “onclick” to serve my purposes. Worked great!

  33. Marlene says:

    Hey, I was searching for a gallery and found this and I’m very happy with it! Great job!
    I have a little issue on mobile phones it doesn’t seem to work because onmouseover is not possible on a touch screen. But also when I change onmouseover into onclick it does not seem to work is there any possibility to make it work on phones?
    Would be great to hear from you

    • Hello Marlene,

      Using onmouseover on mobile devices works 100%. You must hold the finger on the picture to activate the hover event. The same works with any link or object.

      You can give it a try to this tutorial instead, with onclick event.

  34. Spencer says:

    I am having problems using multiple galleries in one page, I read above that you said to change the id’s of them and that still didnt work. Thanks for the help!

    • Hello Spencer,

      Do you have a link where I can look to your live code? Can’t figure out the code you’ve sent here in comments.

      • Spencer says:

        Sorry for the late response, I havent been home. Here are the screenshots and the video of what is happening and my code. Thankyou. P.S: this is my first real Java Script project and this is for my design website.


        • Hello Spencer,

          The problem is that your elements have the same “name” attribute.

          For example, how your script should know in which element to display the preview image if you have the same name=”preview” on all 3 galleries?

          You need to change the name to be different in every category. For example all images from gallery 2 should point to name=”preview2″. If doesn’t work with numbers try with letters.

          • Spencer says:

            Sorry to disturb you again, that problem is fixed but another problem came up. here is my code with all of the id’s changed and a video of what is going on.

          • Hi again,

            You forgot to change the preview name inside the Javascript event onmouseover in your images.

            For images inside gallery 2 should point to preview2 not preview.

            This should solve the problem with your html photo gallery.

  35. erika says:

    hi. i would like to put the thumbnails at the left and the preview will be at the right side. can you help me please? thankss

    • Hello Erika,

      In order to do that, you will need to do some changes to CSS. The “.gallery” container must be centered and have a fixed width. Inside it, the “.thumbnails” container must have “float: left;” and the “.preview” container can have “float: right;” both with fixed width. So, if you are using my classes used in this tutorial you will have something like the CSS below. Hope it helps you.

      .gallery {
      	width: 700px;
      	margin: 0 auto;
      .thumbnails {
      	float: left;
      	width: 140px;
      .thumbnails img {
      	width: 100px;
      	margin: 0 10px 10px 0;
      .preview {
      	float: right;
      	width: 550px;
      .preview img {
      	width: 100%;
  36. Timo says:

    Hi Dan,

    Thanks for the great tutorial! IS there also a way to include more than 5 pictures and that you go to the right when you click one of the 5 images on the right side? Thanks in advance!


    • Hey Timo,

      As this is a simple photo gallery, you can just add more divs and images and style them from CSS if you want your thumbnails to appear in the right.

  37. Richa says:

    Nice tutorial… But can you please tell me that on mouseover how can the image open in another small window on the same page itself rather than opening as you have shown?

    • Hello Richa,

      If you want to open a new window every time when your mouse is over an image, most browsers will consider that as a spam and they will block it. I suggest you to not do that. Anyway, you can do it using jQuery.

  38. Owen says:

    Hey, great tutorial. I have been playing around with it and have my own photos in the gallery which was my first goal. What I am trying to do is have a gallery of thumbnails (columns and rows) and when one is selected (mouse over or clicked) the full size image pops up over the gallery, which can then be closed. Is there any way your code could be modified to enable this? Thanks heaps for all the great tutorials!

    • Hello Owen,
      Not sure about what you are saying, but the gallery already does that. When clicking on a thumbnail, the big image is changing.

      • Matt says:

        Hi Dan, I think what Owen is referring to is that while the main window shows a medium image (From the thumbnails) that if you click this main window, a full size version of that image is displayed over the entire webpage which you can then close and resume browsing the smaller thumbnails

  39. D9 says:

    Doesn’t work in Chrome. But still, good tutorial. Thanks!

    • Hello D9,
      It was tested in latest version of Chrome right now and it works. Check your code, maybe you have something wrong. You can compare it with the demo files.

  40. wiyono says:

    thank you for nice tutorial, can you tell me how to make onClick and not onHover?

    Thank you

  41. Slightly Noob says:

    how can i change the images in the gallery with my own pictures?\

  42. shane says:

    still doesn’t work !

  43. alan says:

    Hi, your script does not seem to work in chrome.. when i copy paste your script it comes up with everything but when hovering over the images it does not change, however, it does seem to work in your example. why is this?!

  44. jashim uddin says:

    1)how can i use a photo gallery or image slide show with play/pause/stop/prev/next buttons.
    please give example or tutorial.
    2)please explain how can different parts of one image can be use as different buttons… can you give a tutorial for that

  45. Sandy says:

    thanks for the codes
    I just have a question in regards of the background:
    can I add an image instead of the color?
    maybe you can help with that

    many thanks

  46. tristan says:

    hello, thanks for the tutorial :)
    but is there any way i can add comments to each photo in the gallery

    • Hello tristan,
      Yes it is possible, you can just add a div or a paragraph under the big thumb image.

      Thank you for your comment, we saw that we have some problems with the code. We will fix that right away.

  47. Alex says:

    How do i make the images on this slideshow into hyperlinks so that when people click on the images they will bring them to a separate page on my site?

    • Hello Alex,
      You need to put the big image inside hyperlink and when they click on all big images will go to the page you set. If you want have a different link you need to know a little Javascript.

  48. Kate says:

    how can you add CSS so that you only have one line of photos that scroll (like an overflow) for a lot of pictures instead of them just continuing to take up the page?

  49. Amit says:

    That’s a great tutorial. A small query….
    Now, I have large no. of images. How to put “Next” or pagination in thumbnail??

    • Hello Amit,
      You just need to place 2 links below the gallery, and create new pages with the same gallery, but with other images. That’s all.

      • Amit says:

        Instead of creating new pages, can we not make it a scroll-able image gallery. If I have 100 images, I may have to make 20 pages…

      • Amit says:

        My earlier post got missing!!
        I needed one clarification….adding links to pages having different pages will clutter the page….user doesn’t know where the photograph is.
        Can’t this gallery be made to scroll the images in the thumbnails?
        Pl. elaborate.

  50. jashim uddin says:

    thanks to confirm this and also for quick reply…. if you don’t mind i have another question ……. this code doesn’t work in chrome but work in another browser … as like this, some code doesn’t work in chrome ….why this happen in case of chrome …??

    • Hello Jashim,
      We’ve just tested the demo page with the latest version of Chrome and is working. Can you test it too and confirm the results? Also try to clear your browser cache.

  51. Sophie says:

    Hey, amazing tutorial, really helped!
    Was just wondering if it would be possible to put more than one of these photo galleries onto a webpage?
    Adding just one worked perfectly, but as soon as i tried to add another, both stopped working so i suppose I’m doing something wrong
    If you could get back to me ASAP i would appreciate it! :D
    Thanks, Sophie x

    • Hello Sophie,

      Your second gallery is not working because you use the same ID’s inside JavaScript and he doesn’t know which ID to choose from your code. Let us know if this helped you.

      • Sophie says:

        Hey, thank you for the quick feedback.
        I changed the ID’s and it works perfectly now.
        Thank you so much!

  52. regina silvestre says:

    hello .. i don’t understand this one: “” especially this: “src=”””, can you explain this .. How can i change the the images with my own images ?

    • Hello,

      That is just a short link to the image source. You can use your own link instead of:


      You can use this:


      • regina silvestre says:

        it’s working now .. but i added one picture and when I hover over the thumbnail that i recently added, the picture doesn’€™t show?

        • Instead of “id” replace with “name” in those related rows:

          <img id="preview" src="" alt="" />


          <img onmouseover="preview.src=img1.src" id="img1" src="" alt="" />

          I also changed this in the tutorial. Sorry.

          • regina silvestre says:

            can i add many pictures ? it will not conflict to it’s design ?

          • It will be a conflict to the actual design. You are free to try and see the results.

          • regina silvestre says:

            nice gallery .. great help for me .. thanks a lot .. :)

          • If this tutorial helped you, rate it and share to your social network. Thank you!

          • August says:

            It still doesn`t work for me. The thumbnail works, but when i go to it the picture doesn`t show up in a big format. I have done the same thing as you but it still doesn`t work.. Please help me, its a school project, and im pretty stressed out.

            Greets from Norway :)

          • Hello! Can you please upload the page somewhere with everything you did, so we can analyze it ?

          • Emma K says:

            Hello, I am wondering the same thing. I can get it to work with 5 images, but when I add in one other, the preview stops working, and the 6th image doesn’t show. I tried using id and name, but I still cant get more than 5 images to work. What is the reason for this?

  53. I have tried to get this working but when I hover over the thumbnail, the picture doesn’t show?

    Also I dont seem to have any javascript??

  54. kevin says:

    quite a nice gallery in most browsers. oddly, doesn’t seem to work in chrome.

  55. Teodor says:

    It works good for me thank you very much.

  56. Brett says:

    After searching for a simple, lightweight javascript solution for an image gallery, I found your wonderful tutorial.

    Before finding this tutorial, I waded through many more complicated solutions involving jQuery or hundreds of lines of javascript. In fact, when I finally found this tutorial, I had to double check that it really was as simple as it seemed.

    Anyway, thanks so much for making such a wonderful, easy to use tutorial that actually works! Awesome!

  57. Rus says:

    Thanks for this post. It really helped me a lot. My project looks great now. :D

  58. Krystyna says:

    My Gallery thumbnails stack on top of each other instead of laying across the top, wondering if you might now why that’s happening. I copied the code for the most part exactly, minus style codes as I needed it embedded in my current template. How do I get the thumbnails to all line up horizontally verses the current vertical stacking that is happening? Thanks for the help, great code and it works just trying to get the aesthetics down.

  59. nadz says:

    Thank you so much for this tutorial. It helped me a lot :D

  60. Dennis says:

    Does Not Work With Google Chrome!!! Can SomeBody Help Me Pleas???

  61. donald says:

    hi i have tried your tutorial and it’s great. one thing though, in google chrome, if i hover to another image, the preview doesn’t work. just want to let you know. thanks!

  62. Shaheen says:

    Thats good it works!!!!

  63. vikas says:

    hey it’s working and best for learner.thanx….

  64. vikas says:

    hey it’s working & And it’s an best tutorial to learn.thanx…..

  65. luis says:

    Hi there EDS!

    I tried your nice trick of creating this gallery and it seems to not open it in google chrome. It works fine in the other browsers. It gives me this error

    Uncaught TypeError: Cannot read property ‘src’ of undefined
    (anonymous function)photos.html:66

    Can you please help me! Thank you very much!

  66. alexnyr says:

    Is there any way i can make it work on safari? like change the onmouse or something?


  67. FixeR says:

    That’s amazing! Thanks from a beginner! :)

  68. Anu says:

    This is not working in safari. pls help

  69. Vibhuti says:

    It’s not working grrr… as it’s seen in final result and what I got, both are having sky and earth differences. Help me grr…

  70. MaraG says:

    I believe I have figured out the Chrome and Safari issue! I changed all instances of id to name and that seems to have taken care of it. It now works in all browsers I have tried! Yay!!!

    • Hello Marag,

      Sorry for late response. Thank you for fixing those issues. If you have interesting tutorials you can create an account and post it here with your full details.

  71. MaraG says:

    Thanks for the great gallery set up! It was easy to follow and very easy to adapt to what I needed for my site. It works well in Firefox, Internet Explorer and Opera. However it does not work in Safari or Chrome. Do you know how to fix this?

    Please help.

    Mara G.

  72. carley says:

    It’s a very simple gallery, and easy to create.
    However I have found it won’t work in google chrome, any ideas why?

  73. Thanks says:

    Thank you so much. It was simple and easy to follow specially for a beginner like me. I would like to know a bit more about the code if some one could point me to the right direction would be highly appreciated

  74. Ricardo says:

    Did you ever find out why this doesn’t work on Safari?

  75. Johnson says:

    I was looking for this sort of photo gallery for quite a while. Thanks for a very simple and very effective tutorial.
    It is fantastic.

  76. Jeffrey says:

    hello, the portfolio dont work on my joomla page, the popup (javascript) function will not work.

    anybody knows what went wrong?


  77. Maxi says:

    very good

  78. Adrian says:

    Seems this is a whole lot harder (for me at least!) than I would have at first thought. Using a Safari code inspector, I get an error with the javascript used:

    TypeError: Result of expression ‘img6’ [undefined] is not an object.

    Hardly being a javascript guru, I haven’t found any workable solution yet. But I haven’t given up!

  79. Adrian says:

    Thanks, I like the simplicity of this for users. So often adding arrows starts scrolling the images straight away (instead of with an onClick command) which really annoys me

    One issue I have found though; it doesn’t work in Safari (PC version at least)

    I have tried all other browsers that I have installed (IE, Firefox, Chrome, Opera) and Safari is the only one I find it fails in. Put simply, hover of the image, the main image doesn’t change

    I’m going to try and find a solution to this (which probably means a css tweak) so will drop by when I have found a solution

  80. Izle says:

    Thanks. I will try that. Very nice looking.

  81. zero says:

    Man can you help me with the next and previous buttons? I really need them, please.

  82. Emma Gale says:

    Very useful, and I understand it all, which is good because I am a complete beginner. However, how to add next and previous buttons and make the thumbnails scroll across so i can fit more photos on?

    • Thank you for your comment. To scroll the thumbnails is a total different gallery. You will need some javascript. Maybe I will include this type of gallery in my to-do-list.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

+ 6 = fourteen

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.