How To Add A Thumbnail Photo Gallery In Blogger

How To Add A Thumbnail Photo Gallery In Blogger

Many users want to show their photos in thumbnails, its just for to show their blog more attractive. So i realize that i should post about that how we can add a thumbnail photo gallery in Blogger. With the help of CSS we can make the <img> element to display on same position with the rest of with thumbs and style the thumbnails as small blocks with a defined height/width. The script will add a click-event for each <li> object that changes its child's <img> visibility and will assign an "Active" class name to the <li> .



There are some steps you have to follow ...

Step 1 : Login to Blogger and Go to Dashboard > Template > Edit HTML

Step 2 : Press CTRL + F key after clicking anywhere in the code, now type the following code in search bar and press enter button.

</head>

Step 3 : Copy the following code and paste it above </head> tag.

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute; right: 50px;color: #000;background: #FFFFFF;font-weight: bold; font-size: 16px; top: 0px;}
</style> - See more at: http://funisonline.blogspot.com/2014/09/how-to-add-thumbnail-photos-gallery-in.html#sthash.ktpY43cJ.dpuf

Step 4 : Now above the same tag </head> paste the following code.

 <script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
document.getElementById('gallery-caption').innerHTML = this.title;
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Step 5 : Now simply Save Template

Step 6 : Now go to the Layout section and Add A Gadget, Select HTML/Javascript

Step 7 : Now copy the below code and paste in into HTML/Javascript

<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div> 

Save your widget and save your settings and see the changes...