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