How to add a thumbnail image/photo gallery in Blogger

For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image gallery displays the available thumbnails either vertically or horizontally on top of the chosen picture, thus making it easier for you to pick different images on mouse click.

With the help of CSS, we can make the <img> element to display on same position with the rest of the thumbs and style the thumbnails as small blocks with a defined height and width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>.

Note: The display: none; for the first ID (#image-gallery) is to prevent images appear with their actual size before they go inside the gallery container.

In #jquery-gallery we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to calculate the width of the thumbnail (80px) plus the margins between them.

The left declaration of #jquery-gallery li img is to move the larger thumbnail that shows on mouse click so that it doesn't overlap with the smaller thumbnails.

Step 5. Paste the code of the chosen style just above the </head> tag.

Basically, what this script does is to check if there is any ID named "image-gallery" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do once they are clicked. So, each time we click on a thumbnail, the "active" class will be assigned and the thumbnail should be visible in the larger container.

And here's the HTML code providing a normal list with the image-gallery ID, enclosed within a DIV with a relative position in order to avoid side effects of other pre-existing positions.

Step 8. Paste the below HTML to where you want to display the gallery by going either to "Layout" and adding a new gadget (click on the "Add a gadget" link and choose "HTML/JavaScript" option), or inside a post/page in the HTML section.

31 comments:

first thank you very much for this tutorial. It is great!I just wold like to know if it is possible on "Style 1" to have two (or more) rows of the above thumbnails? I tried but the second row is overlaying the main display box thingy. It would be also nice to know, if it is possible to align thumbnails and main box so that they both have the same width.

For instance, the mini thumbnails have a height of 80px and a bottom margin of 10px, so in order to make more space for a second row, we need to add a value of 200px (80px + 80px + 10px + 10px and the rest is to leave space between the main box and the mini thumbnails).

As for the second question, I'm not sure to which width are you referring to. In case you want to make the container for the mini thumbnails of the same width with the main box, change the 500px value from this line:#jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}

Bro Whenever you find time, Create a picture gallery for recent posts, so that you don't have to change the addresses each time you post something new. It Would help a lot, and save a lot of time ( : Save a little time for us as well bro ( :

Hello there,it´s me again. I would like to get two or more galleries on one page, like here. I tried to copy the code from step 4 and paste it again, with another id name like "image-gallery-2", but it didn´t work ... Could you please tell me how to do that?All the best from Tobias

The problem is that JavaScript doesn't allow more than one ID per page, however it would work when visiting individual posts - rather than reading them from homepage or archive pages. I would recommend you to either shrink the lenght of your posts by adding the Read More function, or use this CSS Image Gallery. Sorry for the late reply!

Really nice galery... just one question, im not that good with scripts, so is there a way to ad more pictures? i trued with more than 5 the stock up ok but the get over the displaying picture, i tryed changing the margins but failed badly. Thanks :)

Thanks for the tutorial, its pretty much done exactly what I wanted it to do! But I'm having problems getting the images to display when I've inserted the URL into the gadget - Im a complete HTML beginner so even basic mistakes are impossible for me to spot! Ive looked at the link you've put on here but I still cant get it to work - any ideas what I'm doing wrong? Maybe and example of the HTML with the URL added would be helpful for me??

Please make sure that you don't remove the quotes after the src= or href= attributes and after the URL. Also, when adding the code, please check that you added it inside the HTML section of the post editor by clicking on the HTML button. Do you see the code instead of the actual widget or the images are broken?

Hi, I've had a bit of script but never an image. I've deleted everything, followed the instructions word for word and re-edited it all hoping that I's missed a tiny bit of script or something but no luck. I've removed all the extra script now and am about ready to give up - it's so frustrating!! Ideally I just want the small thumbnail images rather than thumbnails and a bigger image so I've still got a way to go even if I get over this first hurdle - any advice?!

Ah! I've done it!! Deleted everything again, copy and pasted everything again and followed everything step by step - think I'd been taking the wrong URL from the image - such a silly mistake! Have even managed to find out the bit of code that relates to the larger image and add a few extra frames - thanks sooooo much for the tutorial!!

This may happen when the image size is smaller than the one which has to be shown inside the gallery, since the script will try to enlarge each thumbnail to a width of maximum 500px. Please make sure that you copy the address pointing to the original picture and not the image thumbnail.