Create Simple HTML Photo Gallery with JavaScript

Posted on November 18, 2009 by Dan Doicaru 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.

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

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (58 votes, average: 4.47 out of 5)
Related Articles
  1. Gravatar Icon Alexandre:

    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.

  2. Gravatar Icon Ross Cooper:

    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.

  3. Gravatar Icon Kate Robinson:

    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.

  4. Gravatar Icon Austin:

    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?


  5. Gravatar Icon Jayanth:

    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.

  6. Gravatar Icon Karla Evans:

    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.

  7. Gravatar Icon Rebekka:

    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?

  8. Gravatar Icon Ziga:


    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.

      • Gravatar Icon Ziga:

        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.

      • Gravatar Icon Brandy:

        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.

  9. Gravatar Icon Anecito Santillan:

    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.

  10. Gravatar Icon Renuka:

    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.

  11. Gravatar Icon Seth:

    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.

    • Gravatar Icon Seth:

      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).

      • Gravatar Icon Seth:

        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.

  12. Gravatar Icon Shon:

    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.

  13. Gravatar Icon Iulian:

    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.

  14. Gravatar Icon Edwin:

    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:

      • Gravatar Icon Edwin:

        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.

          • Gravatar Icon Edwin:

            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.

  15. Gravatar Icon Danny:

    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.

      • Gravatar Icon Danny:

        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.

      • Gravatar Icon Patrick:

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

  16. Gravatar Icon Mohammad Reza:

    Thanks a lot!

  17. Gravatar Icon Kajal:

    Tried to add it on my blog. Thank you!

  18. Gravatar Icon Nicodorr:

    Thank you man!!! Keep working.

  19. Gravatar Icon India:

    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?

      • Gravatar Icon India:

        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.

          • Gravatar Icon India:

            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.

  20. Gravatar Icon Arif:

    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 :)

  21. Gravatar Icon Patrick:

    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…

  22. Gravatar Icon Shahan:

    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.

  23. Gravatar Icon Niall:

    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.

  24. Gravatar Icon Grant:

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

    Thanks, Grant

  25. Gravatar Icon George:

    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!

  26. Gravatar Icon Marlene:

    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.

  27. Gravatar Icon Spencer:

    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.

      • Gravatar Icon Spencer:

        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.

          • Gravatar Icon Spencer:

            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.

  28. Gravatar Icon erika:

    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%;
  29. Gravatar Icon Timo:

    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.

  30. 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.

  31. Gravatar Icon Owen:

    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.

      • Gravatar Icon Matt:

        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

  32. Gravatar Icon D9:

    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.

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

    Thank you

  34. Gravatar Icon Slightly Noob:

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

  35. Gravatar Icon shane:

    still doesn’t work !

  36. Gravatar Icon alan:

    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?!

  37. Gravatar Icon jashim uddin:

    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

  38. Gravatar Icon Sandy:

    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

  39. Gravatar Icon tristan:

    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.

  40. Gravatar Icon Alex:

    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.

  41. Gravatar Icon Kate:

    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?

  42. Gravatar Icon Amit:

    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.

      • Gravatar Icon Amit:

        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…

      • Gravatar Icon Amit:

        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.

  43. Gravatar Icon jashim uddin:

    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.

  44. Gravatar Icon Sophie:

    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.

      • Gravatar Icon Sophie:

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

  45. Gravatar Icon regina silvestre:

    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:


      • Gravatar Icon regina silvestre:

        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.

          • Gravatar Icon regina silvestre:

            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.

          • Gravatar Icon regina silvestre:

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

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

          • Gravatar Icon August:

            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 ?

          • Gravatar Icon Emma K:

            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?

  46. 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??

  47. Gravatar Icon kevin:

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

  48. It works good for me thank you very much.

  49. Gravatar Icon Brett:

    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!

  50. Gravatar Icon Rus:

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

  51. 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.

  52. Gravatar Icon nadz:

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

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

  54. 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!

  55. Gravatar Icon Shaheen:

    Thats good it works!!!!

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

  57. Gravatar Icon vikas:

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

  58. Gravatar Icon luis:

    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!

  59. Gravatar Icon alexnyr:

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


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

  61. Gravatar Icon Anu:

    This is not working in safari. pls help

  62. Gravatar Icon Vibhuti:

    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…

  63. Gravatar Icon MaraG:

    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.

  64. Gravatar Icon MaraG:

    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.

  65. Gravatar Icon carley:

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

  66. 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

  67. Gravatar Icon Ricardo:

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

  68. Gravatar Icon Johnson:

    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.

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

    anybody knows what went wrong?


  70. Gravatar Icon Adrian:

    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!

  71. Gravatar Icon Adrian:

    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

  72. Gravatar Icon Izle:

    Thanks. I will try that. Very nice looking.

  73. Gravatar Icon zero:

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

  74. Gravatar Icon Emma Gale:

    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.

8 + = 10

Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (, built under WordPress platform.