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>.
Related: Image Slider with Mouse Hover Effect using CSS only
Demo blog
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>.
Related: Image Slider with Mouse Hover Effect using CSS only
Demo blogHow to Add Image Gallery with Thumbnails to Blogger
Step 1. Log in to your Style 1 Demo
Style 2 DemoHow to Upload Images and Get the URLIn case you need to make the pictures clickable, add this HTML structure instead:
<div style="position:relative;">Again, here you need to replace the page-URL text with the URL of your page/post.
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
</ul>
</div>
Update: To add captions, please include the lines in orange and then replace the "Caption" with the text that you want to appear on each picture:
<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img alt="For those who would like to show pictures in an image gallery How to add a thumbnail image/photo gallery in Blogger" src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img alt="For those who would like to show pictures in an image gallery How to add a thumbnail image/photo gallery in Blogger" src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img alt="For those who would like to show pictures in an image gallery How to add a thumbnail image/photo gallery in Blogger" src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img alt="For those who would like to show pictures in an image gallery How to add a thumbnail image/photo gallery in Blogger" src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img alt="For those who would like to show pictures in an image gallery How to add a thumbnail image/photo gallery in Blogger" src="IMAGE-URL5" /></a></li>
</ul>
<div id="gallery-caption"></div>
</div>
Save the widget or publish your page and you're done adding the thumbnail image / photo gallery in Blogger.
