Add Image Gallery With Thumbnails To Blogger

For those who would like to show pictures in an image gallery, here's a gallery made with JavaScript and CSS that includes some thumbnails with which you will be able to pick different images on mouse click.

by Michelle Anne

HTML

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="http://mix--er.blogspot.com/2014/02/how-to-add-image-gallery-with.html"><img src="http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg" /></a></li>
<li><a href="http://mix--er.blogspot.com/2014/02/how-to-add-image-gallery-with.html"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQSxDpiZstAsjNtVz5Y8jx3Iw8zZD2GdvHz5t_zjibSz7FbZso7" /></a></li>
<li><a href="http://mix--er.blogspot.com/2014/02/how-to-add-image-gallery-with.html"><img src="http://doznavame.mk/wp-content/uploads/2014/07/sexy-full-hd-wallpaper-1920.jpeg" /></a></li>
<li><a href="http://messy-mag.blogspot.com/2014/12/bella-twins-nikki-and-brie-bella-bella.html"><img src="http://3.bp.blogspot.com/-UAliWkE4trw/VIXF86H73hI/AAAAAAAApT4/A6enkepGWB4/s1600/NIKKI%2Band%2BBRIE%2BBELLA00008.jpg" /></a></li>
<li><a href="http://messy-mag.blogspot.com/2013/10/nina-agdal.html"><img src="http://3.bp.blogspot.com/-3acxWzf3GUg/UlRREmuFRsI/AAAAAAAAK7k/2fFvgy1Zd0k/s1600/Nina-Agdal-Wide-HD-Wallpaper.jpg" /></a></li>
</ul>
</div>

CSS

<style type='text/css'>
#image-gallery {display: none;}
#jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
#jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
#jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
</style><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';
});
}
},
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>