Galleria Slider using jQuery, CSS, and HTML

SEE THE LIVE DEMO

Galleria is a JavaScript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. You can also add caption to the images so when users click the "i", the caption will appear for that image. 

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

<style type='text/css'> /* Demo styles */ .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;} h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;} p{margin:0 0 20px} a {color:#22BCB9;text-decoration:none;} /* This rule is read by Galleria to define the gallery height: */ #galleria{height:350px;} </style> <!-- load jQuery --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'/> <!-- load Galleria --> <script src='http://blogspotvision.com/javascript/galleria/galleria-1.2.3.min.js'/>

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

<div class='content'> <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary --> <div id='galleria'> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/1.jpg'> <img alt='http://www.prestigiousmodels.com/' src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/1.jpg' title='locomotives roundhouse'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/2.jpg'> <img alt='”http://www.prestigiousmodels.com/”' src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/2.jpg' title='icebergs in the high arctic'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/3.jpg'> <img alt='http://www.prestigiousmodels.com/' src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/3.jpg' title='araña'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/4.jpg'> <img src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/4.jpg' title='http://www.prestigiousmodels.com/'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/5.jpg'> <img src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/5.jpg' title='http://www.prestigiousmodels.com/'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/6.jpg'> <img alt='http://www.prestigiousmodels.com/' src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/6.jpg' title='http://www.prestigiousmodels.com/'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/7.jpg'> <img alt='http://www.prestigiousmodels.com/' src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/7.jpg' title='polish army kołobrzeg'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/8.jpg'> <img src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/8.jpg' title='http://www.prestigiousmodels.com/'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/9.jpg'> <img alt='http://www.prestigiousmodels.com/' src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/9.jpg' title='http://www.prestigiousmodels.com/'/> </a> <a href='http://blogspotvision.com/javascript/galleria/galleria_thumbs/10.jpg'> <img src='http://blogspotvision.com/javascript/galleria/galleria_thumbs/10.jpg'/> </a> </div> </div> <script> // Load the classic theme Galleria.loadTheme('http://blogspotvision.com/javascript/galleria/themes/classic/galleria.classic.js'); // Initialize Galleria $('#galleria').galleria(); </script>

Note: Change link, caption, and images. Each image will appear to the right of the the previous one.