Orbit - jQuery Image Slider Plugin For Blogger

This tutorial will show you how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider, called Orbit, is a lightweight jQuery plugin that will display multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, we have some small bullet icons indicating the current image that we are viewing and, on the upper right side, is the pause option and a timer letting us know when the next image will be displayed.<br /><br />If you want to see this cool image slider in action, please visit this demo blog:<br /><br /><div style="text-align: center;"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/07/orbit-jquery-image-slider-for-blogger.html" rel="nofollow" target="_blank">Demo Blog</a></div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="image slider, slideshow, jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmLUkV53UtnP3R3myY4D8z6ipBA5LfKmcne3FuI3O3qqEG4JLJb_XZgtGcOM7UUnYLRIqaEdgxH3KDkhv64zLuYSkwOfIeo59-iMF-GR2cI8jecxoYEH3fYrXEmiP-MRWOwUUnC0IBg9-/s1600/orbit-jquery-slider-plugin-for-blogger-image-gallery.png" title="Orbit Image Slider for Blogger with jQuery" /></div><br />Related:<br /><a href="http://helplogger.blogspot.com/2014/01/how-to-add-thumbnail-imagephoto-gallery.html" rel="nofollow" target="_blank">Photo Gallery with Thumbnails using Javascript and CSS</a><br /><a href="http://helplogger.blogspot.com/2013/10/jquery-image-gallery.html" rel="nofollow" target="_blank">Spacegallery: A jQuery Time Machine-like Slideshow/Image Gallery </a><br /><a href="http://helplogger.blogspot.com/2014/01/create-css-image-slider-with-thumbnails.html" rel="nofollow" target="_blank">Image Slider that Displays Pictures on Mouse Hover using only CSS</a><br /><br />The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the span tags of these images.<br /><br /><h2>How to Add the Orbit Image Slider to Blogger</h2>Step 1. From your Blogger Dashboard, go to Template > Edit HTML > click anywhere inside the code area and press the CTRL + F keys to open the blogger search box. Paste or type the below tag inside the search box and hit Enter to find it.<br /><blockquote class="tr_bq"></head></blockquote><div class="separator" style="clear: both; text-align: center;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucBK6jsoFGvgq1f7-O8Bdg8vpE4x8JhIN44axFxgDjql6raTN_rLBIuzZG3Fk3KbDKgVyei_EhJgyx409mdCVpQ334ADoAxLNxFbMXkcRVUOp8DOmQsg-GWuiIHvhxtt9zPGFDVeGN-Uw/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640" /></div><br />Step 2. Just above <span style="background-color: yellow;"></head></span> add the following scripts:<br /><br /><div class="code1"><span style="color: #cc0000;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></span><br /><br /><!--[if IE]><br /><style type="text/css"><br />.timer { display: none !important; }<br />div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }<br /></style><br /><![endif]--><br /><br /><script type='text/javascript'><br />$(window).load(function() {<br />$(&#39;#featured&#39;).orbit({<br /><span style="color: blue;"><b>advanceSpeed: 5000,</b></span><br />&#39;bullets&#39;: true,<br />&#39;timer&#39; : true,<br />&#39;animation&#39; : &#39;horizontal-slide&#39;<br />});<br />});<br /></script><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />/*<br />* jQuery Orbit Plugin 1.1<br />* www.ZURB.com/playground<br />* Copyright 2010, ZURB<br />* Free to use under the MIT license.<br />* http://www.opensource.org/licenses/mit-license.php<br />*/<br /><br />(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&<br />x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},<br />a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=<br />a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;<br />d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},<br />a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);<br />j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);<br />//]]><br /></script></div><br />Note: You can change the transitions speed between each image by modifying the <span style="color: blue;"><b>5000</b></span> value from the line in blue - a higher number will make the pictures stay longer between each transition.<br /><br />Important! If you have already a version of jQuery in your template, please remove the line in red, otherwise the slideshow might not work.<br /><br />Step 3. Now it is time to add the CSS. Find (CTRL + F) this tag:<br /><blockquote class="tr_bq">]]></b:skin></blockquote>Step 4. Just above <span style="background-color: yellow;">]]></b:skin></span> add this code:<br /><blockquote class="tr_bq">#featured {height: 1px; width: 1px; overflow: hidden;}<br />div.orbit {<br />width: 1px;<br />height: 1px;<br />position: relative;<br />overflow: hidden;<br />}<br /><br />div.orbit img {<br />position: absolute;<br />top: 0;<br />left: 0;<br />}<br />div.orbit a img {border: none;}<br /><br />div.timer {<br />width: 40px;<br />height: 40px;<br />overflow: hidden;<br />position: absolute;<br />top: 10px;<br />right:10px;<br />opacity: .6;<br />cursor: pointer;<br />z-index: 1001;<br />}<br /><br />span.rotator {<br />display: block;<br />width: 40px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />left: -20px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilx8qejXGejMeXiBKCtrMsIHJ4jf7wDvUVFs-20j1-Iy82vKwvFXHY54waCLQVrm94qAW226MLN_48ceBoYKRbdlcZQADa2g7_HBV9H_QPQoBc6XNMMi1Dr6e-CG6Tan-jCGvF4jh6lKLY/s1600/timer-icon.png);<br />background-repeat: no-repeat;<br />z-index: 3;<br />}<br /><br />span.mask {<br />display: block;<br />width: 20px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />right: 0;<br />z-index: 2;<br />overflow: hidden;<br />}<br /><br />span.rotator.move {left: 0;}<br />span.mask.move {<br />width: 40px;<br />left: 0;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIkrF6-tOL4db5jLBTHCNXHmCDhpGWyQbCacvObZ1SX6SCf7ocpgTSBuvwIfQ7hSzePEoe0Buz134h8d01h7Acf3Xmea6ZEnkpWGVHjOT6zGXqoYpng-lWZQIbdwCk7novetWsFpX8iKI4/s1600/timer-right.png);<br />background-repeat: repeat;<br />background-position: 0px 0px;<br />}<br /><br />span.pause {<br />display: block;<br />width: 40px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />left: 0px;<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGSU05XftS5iMupG5siuZWXRQkChUgZ2kulUFRXzk7G2y_ODXhc9bZl-2KcCUWxquvbAdYqZBk2prnZm4S2xxh8X7ImsvL1vHgnvH1w6BscqRZIPRP42udBxwq1rnNEsiHsm5DzhPcIvpJ/s1600/pause-icon.png);<br />background-repeat: no-repeat;<br />z-index: 4;<br />opacity: 0;<br />}<br /><br />div.timer:hover span.pause,<br />span.pause.active,<br />div.timer:hover span.pause.active { opacity: 1; }<br /><br />div.caption {<br />background: #000;<br />background: rgba(0,0,0,.6);<br />width: 100%;<br />z-index: 1000;<br />position: absolute;<br />bottom:-100px;<br />color: #fff;<br />padding: 8px 0;<br />text-align: center;<br />}<br /><br />div.caption span {<br />padding: 0 10px;<br />font-size: 14px;<br />text-shadow: 0px 1px 0px rgba(0,0,0,.8);<br />margin: 0;<br />}<br />.orbit-caption { display: none; }<br /><br />div.orbit:hover div.slider-nav { display: block; }<br />div.slider-nav { display: none; }<br />div.slider-nav span {<br />width: 33px;<br />height: 33px;<br />text-indent: -9999px;<br />position: absolute;<br />z-index: 1000;<br />top: 43%;<br />cursor: pointer;<br />}<br /><br />div.slider-nav span.right {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBfZgJWCQ8fEgAcnUBHlCIi0v2j4wxf9Uuad47HWgTvBMp8TBo6NBh5CpsCwIFAqxK-coRkWZL4SbcKxqBQogTvX5oNh64dxiRfrOdIgZBj94IELYeyEbOGe8fGGTSQrwZjmI8m7r54FW2/s1600/arrow-right.png);<br />right: 10px;<br />}<br />div.slider-nav span.left {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFy5xVDlMSv-Wz23VPXn2FImHvh9AzKhvZBb6d_Wd-pZI5XCSbshJY2y3on63_EQJzDpeKkIaa-mT7hB9wIEdw7RJ2UOTsjtKGaYDYeOJsx4_fTauKrmQQ_OFRRuV61scxlvNUEQS8IUR/s1600/arrow-left.png);<br />left: 10px;<br />}<br /><br />.orbit-bullets {<br />position: absolute;<br />z-index: 1000;<br />list-style: none;<br />top: 10px;<br />left: 7px;<br />margin: 0;<br />padding: 0;<br />}<br /><br />.orbit-bullets li {<br />float: left;<br />margin-left: 5px;<br />cursor: pointer;<br />color: #999;<br />text-indent: -9999px;<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_fRlBPTiVbc3T2i6aAVO7vk3rNUSLTNq6eZn-alS0kFiFBe3NBK2vTUCxpvoU0-6VZwDXs6dGwhZS4-lhyphenhyphenhLyYcONfVJ28_QriL9b-3IYF5xjrPpqTewdZRMbKPX2FekmLFaKoWzmgs/s1600/bullets.png);<br />background-repeat: no-repeat;<br />background-position: 0 0;<br />width: 7px;<br />height: 7px;<br />overflow: hidden;<br />}<br />.orbit-bullets li.active { color: #222; background-position: -7px 0; }</blockquote>Step 5. Click on the "Save template" button to save the changes.<br /><br />Finally, we will use the HTML code that displays the images. We have the option to add the slider either inside one of our posts/pages, or display it as a gadget on the blog' sidebar or below the header.<br /><br />If you choose to add it inside one of your posts, switch to the HTML tab and paste the code below inside HTML box of your post.<br /><br />If you want to add it in the blog sidebar/below the header, go to "Layout", click on the "Add a gadget link" > choose "HTML/JavaScript" from the pop-up window and paste this html inside the box:<br /><blockquote class="tr_bq"><div id='featured'><br /><br /><a href='<span style="color: blue;">Link URL</span>'><img rel='<span style="color: #38761d;"><b>photo1</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo1</b></span>'><span style="color: #cc0000;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span></span><br /><br /><a href="<span style="color: blue;">Link URL</span>"><img rel='<span style="color: #38761d;"><b>photo2</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo2</b></span>'><span style="color: #cc0000;">This is an example of description with links: </span><a href='<span style="color: blue;">Description Link URL</span>' style='color: #09A7EA;'><span style="color: #cc0000;">Helplogger</span></a></span><br /><br /><a href="<span style="color: blue;">Link URL</span>"><img rel='<span style="color: #38761d;"><b>photo3</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo3</b></span>' style='text-align:center;'><span style="color: #cc0000;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span></span><br /><br /><a href='<span style="color: blue;">Link URL</span>'><img rel='<span style="color: #38761d;"><b>photo4</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo4</b></span>'><span style="color: #cc0000;">This is an example of description with links: </span><a href='<span style="color: blue;">Description Link URL</span>' style='color: #09A7EA;'><span style="color: #cc0000;">Helplogger</span></a></span><br /><br /><span style="background-color: yellow;"></div></span></blockquote>This code contains the images, links and descriptions for each image. In blue, are the URLs of the links and images that you need to replace with your own. Inside the HTML code of each image, you have the size of each picture that can be changed by modifying the width (590) and height (348) values. To add the description for your pictures, replace the text in red. <br /><br />If you want to add more pictures, add this HTML before the <span style="background-color: yellow;"></div></span> tag:<br /><blockquote class="tr_bq"><a href='<span style="color: blue;">Link URL</span>'><img rel='<span style="color: #38761d;"><b>photo5</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo5</b></span>'><span style="color: #cc0000;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span></span></blockquote>Notice that each image and description has an unique identifier (id) and shouldn't be repeated. For instance, in the description text of the first image, we have the id="<span style="color: #38761d;">photo1</span>" and within the image code is the "rel" attribute with the name of the id, that is rel="<span style="color: #38761d;">photo1</span>".<br /><br />After you added your images, click the "Save" or "Publish" button and that's it! Now you can enjoy this cool Orbit Image Slider for Blogger.

Orbit - jQuery Image Slider Plugin For Blogger

This tutorial will show you how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and ...

Read more »

Scriptaculous image slider/carousel for Blogger

Image galleries, sliders and slideshows have become increasingly popular within web pages and more and more developers have been creating these amazing powerful, versatile and sleek galleries. In this tutorial, you will see how to display the relevant content in an attractive and usable manner, by adding this beautiful carousel slideshow to display a gallery of images with a cool sliding effect.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="image slider for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2prZ82XBeHWP2OJgZR-9_gEFHO0N8X5C8uKz-3ArtF0_jklMsjsgXNkuOdsJDmauvage4bMMWCQrP1zUndt5Fj4sRwQ5A3grV1LtC51VD3kGguBIeCh3OW-eUheQCdCqX5wXqEEUvbNLd/s1600/image-carousel-for-blogger.png" title="image slider for blogger" /></div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger widgets, blogger slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDbz_F_QYm4Xohx1OcaRkLqPJf1XdLy-96FUWYX0Eo2__A0mS7K0CP1AZ8OSUxG1eRqMrEGolw-vY90tS7a9_CkjQ_4b8I9dvneSpfM7dAeeuFEpbp1xIXD8roZ9jY2rFo5aWUiC8USJzk/s1600/image-carousel-for-blogger-2.png" title="scriptaculous image carousel or slider for blogger" /></div><br /><div style="text-align:center;"><a class="demo-link" href="http://demo-blog343.blogspot.ro/" rel="nofollow" target="_blank">DEMO</a></div><br /><br /><h3>How to Add the Scriptaculous Image Slider on Blogger</h3>Step 1. Log into your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger Dashboard</a> and select your blog, then go to "Template" and click the "Edit HTML" button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />Step 2. Click anywhere on the code area and press the CTRL + F keys. This will open a search box - type the tag below and press ENTER to find it:<br /><blockquote class="tr_bq"></head></blockquote><div class="separator" style="clear: both; text-align: center;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKK7PMW2TtwOu71PZlNOjNeeFQvMOYN4S_sHVn5m7yTkqgk8tA56IgZp0tBOVd_9-SvuCGc0zZ62yiczEehL7JTv-USjwCDxIhB0JNIgvWgyEOYSQQmLg184eell4_HzdPPMOXGbplw6sD/s400/screenshot.png" width="400" /></div><br />Step 3. Just above the <span style="background-color: yellow;"></head></span> tag, add these scripts:<br /><blockquote class="tr_bq"><span style="color: #cc0000;"><script src='http://www.google.com/jsapi'></script><br /><script><br />google.load("prototype","1.7.0.0");<br />google.load("scriptaculous", "1.9.0");<br /></script></span><br /><script type='text/javascript'><br />//<![CDATA[<br />//Builds a carousel model<br />//License: This file is entirely BSD licensed.<br />//Author: Brian R Miedlar (c) 2004-2009 miedlar.com<br />//Dependencies: prototype.js<br />var OS=Class.create();OS.PageLoading=true;OS.PageLoadComplete=function(){OS.PageLoading=false;$A(OS.BehaviourQueue).each(function(selectors){OS.ApplyBehaviour(selectors);});OS.BehaviourQueue=[];};Event.observe(document,'dom:loaded',function(){OS.PageLoadComplete();});OS.BehaviourQueue=[];OS.RegisterBehaviour=function(selectors){if(!OS.PageLoading){OS.ApplyBehaviour(selectors);return;}<br />OS.BehaviourQueue.push(selectors);}<br />OS.ApplyBehaviour=function(selectors){$H(selectors).each(function(item){var sKey=item.key;var iDelay=0;var iToken=sKey.indexOf("!D");if(iToken>0){iDelay=parseFloat(sKey.substring(iToken+2))||0;sKey=sKey.substring(0,iToken);iDelay=parseInt(iDelay);}<br />$$(sKey).each(function(element){if(!iDelay){item.value(element);return;}<br />item.value.delay(iDelay,element);});});};Element.display=function(element,show){Element[(show)?'show':'hide'](element);}<br />var CarouselItem=Class.create();CarouselItem.prototype={initialize:function(){this.key=null;this.value=null;this.element=null;}};var Carousel=Class.create();Carousel.prototype={initialize:function(key,carouselElement,itemWidth,itemHeight,observer,options){this.loaded=false;this.key=key;this.observer=observer;this.carouselElement=$(carouselElement);if(!this.carouselElement){alert('Warning: Invalid carousel element: '+carouselElement);return;}<br />this.itemsElement=this.carouselElement.down('.items');if(!this.itemsElement){alert('Warning: Class \'items\' does not exist as a child element in carousel: '+carouselElement);return;}<br />this.items=[];this.activeItem=null;this.activeIndex=0;this.navScrollIndex=0;this.itemHeight=itemHeight;this.itemWidth=itemWidth;if(!options)options={};this.options=Object.extend({duration:1.0,direction:'horizontal',moveOpacity:.6,setSize:4,allowAutoLoopOnSet:false,allowAutoLoopOnIndividual:true},options);this.backElement=this.carouselElement.down('.navButton.previous');this.forwardElement=this.carouselElement.down('.navButton.next');if(this.backElement)Event.observe(this.backElement,'click',this.scrollBack.bind(this));if(this.forwardElement)Event.observe(this.forwardElement,'click',this.scrollForward.bind(this));},load:function(){var eList=this.itemsElement;this.items.clear();eList.select('.item').each(function(item){item.carouselKey=null;var sKey='';try{sKey=item.down('.key').innerHTML;}catch(e){alert('Warning: Carousel Items require a child with classname [key]');return;}<br />var oCarouselItem=new CarouselItem();if(this.options.itemParser)oCarouselItem.value=this.options.itemParser(item);oCarouselItem.index=this.items.length;oCarouselItem.key=sKey;oCarouselItem.element=item;this.items.push(oCarouselItem);if(item.hasClassName('selected')){this.activeItem=oCarouselItem;this.activeIndex=this.items.size()-1;}<br />if(this.options.setItemEvents)this.options.setItemEvents(this,item,oCarouselItem,this.observer);}.bind(this));this.loaded=true;this.afterLoad();},destroy:function(){this.loaded=false;var eList=this.itemsElement;this.items.clear();if(this.options.unsetItemEvents){eList.select('.item').each(function(item,ix){this.options.unsetItemEvents(this,item,this.items[ix],this.observer);}.bind(this));}},afterLoad:function(){if(this.items.length==0){alert('Warning: No Carousel Items Exist');return;}<br />this.moveToIndex(this.activeIndex);if(this.activeItem)this.activate(this.activeItem);if(this.observer.fireActiveCarouselLoaded)this.observer.fireActiveCarouselLoaded(this);},scrollForward:function(){var iIndex=0;if(this.navScrollIndex>this.items.length-(this.options.setSize+1)){if(!this.options.allowAutoLoopOnSet)return;}else{iIndex=this.navScrollIndex+(this.options.setSize-1);}<br />this.scrollToIndex(iIndex);},scrollBack:function(){var iIndex=this.navScrollIndex-(this.options.setSize-1);if(iIndex<0){if(!this.options.allowAutoLoopOnSet){iIndex=0;}else{iIndex=this.items.length-this.options.setSize;if(this.navScrollIndex>0||iIndex<0)iIndex=0;}}<br />this.scrollToIndex(iIndex);},getLeft:function(index){return index*(-this.itemWidth);},getTop:function(index){return index*(-this.itemHeight);},activate:function(carouselItem){if(this.activeItem)this.observer.fireDeactiveCarouselItem(this,this.activeItem.element,this.activeItem);if(carouselItem==null)return;this.activeItem=carouselItem;if(this.observer.fireActiveCarouselItem)this.observer.fireActiveCarouselItem(this,carouselItem.element,carouselItem);},reactivate:function(){if(!this.activeItem)return;this.activate(this.activeItem);},next:function(){if(this.activeItem==null){this.activate(this.items[0]);return;}<br />var iIndex=this.activeItem.index+1;if(iIndex>=this.items.length){iIndex=0;if(!this.options.allowAutoLoopOnIndividual)iIndex=this.items.length-1;}<br />this.activate(this.items[iIndex]);this.activeIndex=iIndex;if(iIndex==0){this.scrollToIndex(0);return;}<br />if(iIndex-this.options.setSize>=this.navScrollIndex-1)this.scrollForward();},previous:function(){if(this.activeItem==null){this.activate(this.items[0]);return;}<br />var iIndex=this.activeItem.index-1;if(iIndex<0){if(this.options.allowAutoLoopOnIndividual){iIndex=this.items.length-1;}else{iIndex=0;}}<br />this.activate(this.items[iIndex]);this.activeIndex=iIndex;if(iIndex==0){this.scrollToIndex(0);return;}<br />if(iIndex==this.items.length-1){var iNavIndex=this.items.length-this.options.setSize;if(iNavIndex<0)iNavIndex=0;this.scrollToIndex(iNavIndex);return;}<br />if(iIndex<this.navScrollIndex+1)this.scrollBack();},scrollToIndex:function(index,duration){if(index<0)index=this.activeIndex;duration=duration||this.options.duration;if(this.options.direction=='vertical'){var iPreviousTop=this.getTop(this.navScrollIndex);var iTop=this.getTop(index);var iCurrentTop=parseInt(Element.getStyle(this.itemsElement,'top'))||0;var offset=iPreviousTop-iCurrentTop;var move=iTop-iPreviousTop;if(move>0){move=move+offset;}else{move=move-offset;}<br />Element.setOpacity(this.itemsElement,this.options.moveOpacity);var ef=new Effect.Move(this.itemsElement,{'duration':duration,'y':move,'afterFinish':function(){Element.setStyle(this.itemsElement,{'top':iTop+'px'});Element.setOpacity(this.itemsElement,1.0);}.bind(this)});ef=null;}else{var iPreviousLeft=this.getLeft(this.navScrollIndex);var iLeft=this.getLeft(index);var iCurrentLeft=parseInt(Element.getStyle(this.itemsElement,'left'))||0;var offset=iPreviousLeft-iCurrentLeft;var move=iLeft-iCurrentLeft;if(move>0){move=move+offset;}else{move=move-offset;}<br />Element.setOpacity(this.itemsElement,this.options.moveOpacity);var ef=new Effect.Move(this.itemsElement,{'duration':duration,'x':move,'afterFinish':function(){Element.setStyle(this.itemsElement,{'left':iLeft+'px'});Element.setOpacity(this.itemsElement,1.0);}.bind(this)});ef=null;}<br />this.navScrollIndex=index;Element.display(this.forwardElement,this.navScrollIndex<=this.items.length-(this.options.setSize+1)||this.options.allowAutoLoopOnSet);Element.display(this.backElement,(parseInt(this.navScrollIndex)||0)!=0||this.options.allowAutoLoopOnSet);if(this.observer.fireCarouselAtIndex)this.observer.fireCarouselAtIndex(this,index);},moveToIndex:function(index){if(this.options.direction=='vertical'){var iTop=this.getTop(index);Element.setStyle(this.itemsElement,{'top':iTop+'px'});Element.setOpacity(this.itemsElement,1.0);}else{var iLeft=this.getLeft(index);Element.setStyle(this.itemsElement,{'left':iLeft+'px'});Element.setOpacity(this.itemsElement,1.0);}<br />this.navScrollIndex=index;Element.display(this.forwardElement,this.navScrollIndex<=this.items.length-(this.options.setSize+1)||this.options.allowAutoLoopOnSet);Element.display(this.backElement,(parseInt(this.navScrollIndex)||0)!=0||this.options.allowAutoLoopOnSet);}};var AppBehavior=Class.create();AppBehavior.Load=function(){OS.RegisterBehaviour(AppBehavior.CarouselRules);}<br />AppBehavior.CarouselRules={'#Carousel2':function(element){AppBehavior.PictureCarousel=new Carousel('PictureCarousel',element,70,70,AppBehavior,{setSize:5,duration:.5,direction:'horizontal',itemParser:function(item){var sKey=item.down('.key').innerHTML;var sCaption=item.down('.caption').innerHTML;var sPictureHtml=item.down('.picture').innerHTML;return{name:sCaption,pictureHtml:sPictureHtml};},setItemEvents:function(carousel,itemElement,carouselItem,observer){Event.observe(itemElement,'click',function(){carousel.activate(carouselItem);});},allowAutoLoopOnSet:true,allowAutoLoopOnIndividual:false});AppBehavior.PictureCarousel.load();},'#Cmd_NextItem':function(element){Event.observe(element,'click',function(){AppBehavior.ProfileCarousel.next();});},'#Cmd_PreviousItem':function(element){Event.observe(element,'click',function(){AppBehavior.ProfileCarousel.previous();});}}<br />AppBehavior.fireActiveCarouselLoaded=function(carousel){}<br />AppBehavior.fireActiveCarouselItem=function(carousel,element,item){element.addClassName('selected');switch(carousel.key){case'ProfileCarousel':$('ViewerCaption').update(item.value.name);$('ViewerData').update(item.value.email);Element.show('Viewer');break;case'PictureCarousel':$('ViewerCaption').update(item.value.name);$('ViewerData').update(item.value.pictureHtml);Element.show('Viewer');break;case'GroupCarousel':$('ViewerCaption').update(item.value.name);$('ViewerData').update(item.value.email);Element.show('Viewer');break;}}<br />AppBehavior.fireDeactiveCarouselItem=function(carousel,element,item){element.removeClassName('selected');switch(carousel.key){case'ProfileCarousel':Element.hide('Viewer');break;case'PictureCarousel':Element.hide('Viewer');break;case'GroupCarousel':Element.hide('Viewer');break;}}<br />AppBehavior.Load();<br />//]]><br /></script></blockquote>Note: If you already have Scriptaculous and Prototype, it's not necessary adding the code in red but please note that this may not work with some versions of jQuery.<br /><br />Step 4. Next, search for the following tag (for more info, see the screenshot below):<br /><blockquote class="tr_bq">]]></b:skin></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img alt="image carousel, blogger image slider, blogger widgets" border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8hxmxlDSKKt2JH7_Xdpk0K8cghHRkgU3M8RzL-3UIcLZP4mRIBdfujzWFr1Tih14SeNN4WCaYOa1-SfopPZtQaBCVJZrH5xkTifVfsey1yYnTTZ3yKVvBo_SfHSpN3q-Zm2P9cF9jtvS/s1600/blogger-template-b-skin.png" title="image carousel or slider for blogger" width="510" /></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table>Step 5. Just above that tag, add this CSS code:<br /><blockquote class="tr_bq">.carousel {<br />position:relative;<br />clear:both;<br />margin:10px -20px 20px;<br />border:2px solid #000; <span style="color: #6aa84f;">/* Carousel border */</span><br />background-color:#333333; <span style="color: #6aa84f;">/* Background color */</span><br />}<br />.carousel .navButton { cursor:pointer; display:block;<br />text-indent:-9999px;<br />background-repeat:none;<br />z-index:10;<br />}<br />.carousel .container {<br />position:absolute;<br />overflow:hidden;<br />}<br />.carousel .items {<br />position:absolute;  }<br />#Carousel2 {<br />height:88px; <span style="color: #6aa84f;">/* container height */</span><br />width:100%; <span style="color: #6aa84f;">/* container width */</span><br />}<br />#Carousel2 .container {<br />top:12px;<br />width:100%; <span style="color: #6aa84f;">/* container width for the visible images */</span><br />height:100px; <span style="color: #6aa84f;">/* container height for the visible images */</span><br />}<br />#Carousel2 .items { top:0; left:2px;<br />width:1700px; <span style="color: #6aa84f;">/* overall width for all the thumbnails */</span><br />}<br />#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }<br />#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}<br />#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }<br />#Carousel2 .navButton.previous { left:0px; background-image:url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMkEbrXm0sYU1xtoUxWdblV84WC3WqlNdGHb2GZSZEvNHSXoUeDVWsCcBRGHZx9o3VYyVOSGjZL6LXlARPATv7mxgA_7VJId3G8ft02Vf-e_UZU2_OWwclMK9EUZ809dRKZOpDj0Cmwrw/s1600/button-left.png</span>); }<br />#Carousel2 .navButton.next { right:2px; background-image:url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PjjUpd7Ja4R1iJARNfxM3d0snMc_4eWef69rVnFxUUhY_OqYeqa3jNyWyZb6n4CJq6N95nSGYpgi0hm_TGWxNExx3-mctkN0xJuq02S6KDlf_Mkr1YRg5RsjVD9VGd6r4iuUSZgMPtQ/s1600/button-right.png</span>); }<br />#Carousel2 .item .key { display:none;}<br />#Carousel2 .item .picture { display:none;}</blockquote><br />Note:<br /><br />Check the comments in green to see which parts you can customize, such as the border and background color of the carousel. Please note that the arrows are images, so if you want to change them, you need to replace the two URLs in blue with those of your images.<br /><br />If you want to change the size of the container, change the <span style="color: #6aa84f;">/* container width */</span> (width of the carousel), the <span style="color: #6aa84f;">/* container width for the visible images */</span> (area where the thumbnails are visible) and the <span style="color: #6aa84f;">/* overall width of the thumbnails container */</span> value (1700px) which is the container for all the picutres that you added.<br /><br />Step 6. To save the changes, click the "Save Template" button.<br /><br />Step 7. Finally, go to "Layout" and click the "Add a Gadget" link. After the pop-up window opens, choose "HTML/Javascript" and paste the HTML structure of the carousel inside the empty box:<br /><blockquote class="tr_bq"><div id="Carousel2" class="carousel"><br /><div class="button navButton previous" style="display:none;">Back</div><br /><div class="button navButton next" style="display:none;">Forward</div><br /><div class="container"><br /><div class="items"><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div><br /><br /><span style="color: #cc0000;"></div></span><br /><span style="color: #cc0000;"></div></span><br /><span style="color: #cc0000;"></div></span></blockquote>Note: Replace the text in blue with your links and image URLs. The <span style="color: blue;">link URL</span> is optional, so you can add it only if you want to link the images to some posts.<br /><br />Step 8. Once you added your pics to the carousel, click the "Save" button to save the widget and make it visible on your blog.<br /><br />If you wish to add more images or remove some, change the width of the thumbnails as well, otherwise some pictures will appear behind the others.<br /><br />To add more pictures, paste the following code just before the <span style="color: #cc0000;"></div></span> tags in red:<br /><blockquote class="tr_bq"><div class="item"><br /><div class="key caption">Thumb</div><br /><div class="icon"><br /><a href="<span style="color: blue;">link URL</span>"><img width="65" height="65" src="<span style="color: blue;">image URL</span>" /></a></div><br /><div class="picture"></div><br /></div> </blockquote>

Scriptaculous image slider/carousel for Blogger

Image galleries, sliders and slideshows have become increasingly popular within web pages and more and more developers have been creating t...

Read more »

Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with Time Machine and those who don't, I'm sure will enjoy this type of effect for viewing images.<br /><br /><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXF5kTRSiSxVvm2V8KJpRwAI5bDuYOdKlTmjPsLRnBe6MrP01J2uu61HvMuU7SukfBrSRc7L3E0UZub4X8HnVwas2_lstPB10TJdP9sYWM08Jcw2FjGYAFNcYzkkUmTSUUa8SnHQ8Eqlag/s1600/create-image-gallery-slideshow-using-jquery-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image gallery with jQuery for blogger" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXF5kTRSiSxVvm2V8KJpRwAI5bDuYOdKlTmjPsLRnBe6MrP01J2uu61HvMuU7SukfBrSRc7L3E0UZub4X8HnVwas2_lstPB10TJdP9sYWM08Jcw2FjGYAFNcYzkkUmTSUUa8SnHQ8Eqlag/s200/create-image-gallery-slideshow-using-jquery-blogger.png" title="create image gallery or slideshow in blogger with jQuery" width="200" /></a></div>SpaceGallery is a JQuery based slideshow / image gallery that performs overlaying in a visually appealing manner and provides a smooth fade out effect to images. This 3D image gallery lets you float through your pictures easily by enlarging them with an Apple-like animation.<br /><br />To see the SpaceGallery slideshow in action, please visit this demo blog and click on the first image:<br /><br /><div style="text-align: center;"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/07/blog-post_23.html" rel="nofollow" target="_blank">Demo Blog </a></div><br /><h3>How to Add Spacegallery Image Slideshow to Blogger</h3>To implement this gallery is very easy. Just follow the steps below:<br /><br /><b><span style="color: #3d85c6;">Step 1</span></b>. Log in to your <a href="http://www.blogger.com/" rel="nofollow">Blogger</a> account and select your blog. Next, go to <b>Template</b> and click the <b>Edit HTML</b> button:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></a></div><br /><span style="color: #3d85c6;"><b>Step 2</b></span>. Click anywhere on the code area and search by using the CTRL + F keys for this tag<br /><blockquote class="tr_bq"></head></blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucBK6jsoFGvgq1f7-O8Bdg8vpE4x8JhIN44axFxgDjql6raTN_rLBIuzZG3Fk3KbDKgVyei_EhJgyx409mdCVpQ334ADoAxLNxFbMXkcRVUOp8DOmQsg-GWuiIHvhxtt9zPGFDVeGN-Uw/s1600/open-blogger-search-box-ctrl%252Bf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucBK6jsoFGvgq1f7-O8Bdg8vpE4x8JhIN44axFxgDjql6raTN_rLBIuzZG3Fk3KbDKgVyei_EhJgyx409mdCVpQ334ADoAxLNxFbMXkcRVUOp8DOmQsg-GWuiIHvhxtt9zPGFDVeGN-Uw/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640" /></a></div><br /><b><span style="color: #3d85c6;">Step 3</span></b>. Just before/above the <span style="background-color: yellow;"></head></span> tag, paste the following scripts:<br /><blockquote class="tr_bq"><span style="color: #cc0000;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></span><br /><script type='text/javascript'><br />//<![CDATA[<br />/**<br /> *<br /> * Spacegallery<br /> * Author: Stefan Petre www.eyecon.ro<br /> * <br /> */<br />!function(n){var i=window.EYE=function(){var i={init:[]};return{init:function(){n.each(i.init,function(n,i){i.call()})},extend:function(n){for(var i in n)void 0!=n[i]&&(this[i]=n[i])},register:function(n,t){i[t]||(i[t]=[]),i[t].push(n)}}}();n(i.init)}(jQuery);<br />!function(e){EYE.extend({getPosition:function(e,t){var n=0,r=0,o=e.style,i=!1;if(t&&"none"==jQuery.curCSS(e,"display")){var d=o.visibility,c=o.position;i=!0,o.visibility="hidden",o.display="block",o.position="absolute"}var u=e;if(u.getBoundingClientRect){var l=u.getBoundingClientRect();n=l.left+Math.max(document.documentElement.scrollLeft,document.body.scrollLeft)-2,r=l.top+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-2}else{if(n=u.offsetLeft,r=u.offsetTop,u=u.offsetParent,e!=u)for(;u;)n+=u.offsetLeft,r+=u.offsetTop,u=u.offsetParent;for(jQuery.browser.safari&&"absolute"==jQuery.curCSS(e,"position")&&(n-=document.body.offsetLeft,r-=document.body.offsetTop),u=e.parentNode;u&&"BODY"!=u.tagName.toUpperCase()&&"HTML"!=u.tagName.toUpperCase();)"inline"!=jQuery.curCSS(u,"display")&&(n-=u.scrollLeft,r-=u.scrollTop),u=u.parentNode}return 1==i&&(o.display="none",o.position=c,o.visibility=d),{x:n,y:r}},getSize:function(e){var t=parseInt(jQuery.curCSS(e,"width"),10),n=parseInt(jQuery.curCSS(e,"height"),10),r=0,o=0;if("none"!=jQuery.curCSS(e,"display"))r=e.offsetWidth,o=e.offsetHeight;else{var i=e.style,d=i.visibility,c=i.position;i.visibility="hidden",i.display="block",i.position="absolute",r=e.offsetWidth,o=e.offsetHeight,i.display="none",i.position=c,i.visibility=d}return{w:t,h:n,wb:r,hb:o}},getClient:function(e){var t,n;if(e)n=e.clientWidth,t=e.clientHeight;else{var r=document.documentElement;n=window.innerWidth||self.innerWidth||r&&r.clientWidth||document.body.clientWidth,t=window.innerHeight||self.innerHeight||r&&r.clientHeight||document.body.clientHeight}return{w:n,h:t}},getScroll:function(e){var t=0,n=0,r=0,o=0,i=0,d=0;return e&&"body"!=e.nodeName.toLowerCase()?(t=e.scrollTop,n=e.scrollLeft,r=e.scrollWidth,o=e.scrollHeight):(document.documentElement?(t=document.documentElement.scrollTop,n=document.documentElement.scrollLeft,r=document.documentElement.scrollWidth,o=document.documentElement.scrollHeight):document.body&&(t=document.body.scrollTop,n=document.body.scrollLeft,r=document.body.scrollWidth,o=document.body.scrollHeight),"undefined"!=typeof pageYOffset&&(t=pageYOffset,n=pageXOffset),i=self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0,d=self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0),{t:t,l:n,w:r,h:o,iw:i,ih:d}},getMargins:function(e,t){var n=jQuery.curCSS(e,"marginTop")||"",r=jQuery.curCSS(e,"marginRight")||"",o=jQuery.curCSS(e,"marginBottom")||"",i=jQuery.curCSS(e,"marginLeft")||"";return t?{t:parseInt(n,10)||0,r:parseInt(r,10)||0,b:parseInt(o,10)||0,l:parseInt(i,10)}:{t:n,r:r,b:o,l:i}},getPadding:function(e,t){var n=jQuery.curCSS(e,"paddingTop")||"",r=jQuery.curCSS(e,"paddingRight")||"",o=jQuery.curCSS(e,"paddingBottom")||"",i=jQuery.curCSS(e,"paddingLeft")||"";return t?{t:parseInt(n,10)||0,r:parseInt(r,10)||0,b:parseInt(o,10)||0,l:parseInt(i,10)}:{t:n,r:r,b:o,l:i}},getBorder:function(e,t){var n=jQuery.curCSS(e,"borderTopWidth")||"",r=jQuery.curCSS(e,"borderRightWidth")||"",o=jQuery.curCSS(e,"borderBottomWidth")||"",i=jQuery.curCSS(e,"borderLeftWidth")||"";return t?{t:parseInt(n,10)||0,r:parseInt(r,10)||0,b:parseInt(o,10)||0,l:parseInt(i,10)||0}:{t:n,r:r,b:o,l:i}},traverseDOM:function(e,t){for(t(e),e=e.firstChild;e;)EYE.traverseDOM(e,t),e=e.nextSibling},getInnerWidth:function(e,t){var n=e.offsetWidth;return t?Math.max(e.scrollWidth,n)-n+e.clientWidth:e.clientWidth},getInnerHeight:function(e,t){var n=e.offsetHeight;return t?Math.max(e.scrollHeight,n)-n+e.clientHeight:e.clientHeight},getExtraWidth:function(t){return e.boxModel?(parseInt(e.curCSS(t,"paddingLeft"))||0)+(parseInt(e.curCSS(t,"paddingRight"))||0)+(parseInt(e.curCSS(t,"borderLeftWidth"))||0)+(parseInt(e.curCSS(t,"borderRightWidth"))||0):0},getExtraHeight:function(t){return e.boxModel?(parseInt(e.curCSS(t,"paddingTop"))||0)+(parseInt(e.curCSS(t,"paddingBottom"))||0)+(parseInt(e.curCSS(t,"borderTopWidth"))||0)+(parseInt(e.curCSS(t,"borderBottomWidth"))||0):0},isChildOf:function(t,n,r){if(t==n)return!0;if(!n||!n.nodeType||1!=n.nodeType)return!1;if(t.contains&&!e.browser.safari)return t.contains(n);if(t.compareDocumentPosition)return!!(16&t.compareDocumentPosition(n));for(var o=n.parentNode;o&&o!=r;){if(o==t)return!0;o=o.parentNode}return!1},centerEl:function(t,n){var r=EYE.getScroll(),o=EYE.getSize(t);n&&"vertically"!=n||e(t).css({top:r.t+(Math.min(r.h,r.ih)-o.hb)/2+"px"}),n&&"horizontally"!=n||e(t).css({left:r.l+(Math.min(r.w,r.iw)-o.wb)/2+"px"})}}),e.easing.easeout||(e.easing.easeout=function(e,t,n,r,o){return-r*((t=t/o-1)*t*t*t-1)+n})}(jQuery);<br />!function(e){EYE.extend({spacegallery:{defaults:{border:6,perspective:140,minScale:.2,duration:800,loadingClass:null,before:function(){return!1},after:function(){return!1}},animated:!1,positionImages:function(a){EYE.spacegallery.animated=!1,e(a).find("a").removeClass(a.spacegalleryCfg.loadingClass).end().find("img").removeAttr("height").each(function(s){var l=this.spacegallery.origWidth-(this.spacegallery.origWidth-this.spacegallery.origWidth*a.spacegalleryCfg.minScale)*a.spacegalleryCfg.asins[s];e(this).css({top:a.spacegalleryCfg.tops[s]+"px",marginLeft:-parseInt((l+a.spacegalleryCfg.border)/2,10)+"px",opacity:1-a.spacegalleryCfg.asins[s]}).attr("width",parseInt(l)),this.spacegallery.next=a.spacegalleryCfg.asins[s+1],this.spacegallery.nextTop=a.spacegalleryCfg.tops[s+1]-a.spacegalleryCfg.tops[s],this.spacegallery.origTop=a.spacegalleryCfg.tops[s],this.spacegallery.opacity=1-a.spacegalleryCfg.asins[s],this.spacegallery.increment=a.spacegalleryCfg.asins[s]-this.spacegallery.next,this.spacegallery.current=a.spacegalleryCfg.asins[s],this.spacegallery.width=l})},next:function(a){if(EYE.spacegallery.animated===!1){EYE.spacegallery.animated=!0;var s=this.parentNode;s.spacegalleryCfg.before.apply(s),e(s).css("spacegallery",0).animate({spacegallery:100},{easing:"easeOut",duration:s.spacegalleryCfg.duration,complete:function(){e(s).find("img:last").prependTo(s),EYE.spacegallery.positionImages(s),s.spacegalleryCfg.after.apply(s)},step:function(a){e("img",this).each(function(l){var g,r,i;l+1==s.spacegalleryCfg.images?(r=this.spacegallery.origTop+4*this.spacegallery.nextTop*a/100,g=this.spacegallery.width*r/this.spacegallery.origTop,e(this).css({top:r+"px",opacity:.7-a/100,marginLeft:-parseInt((g+s.spacegalleryCfg.border)/2,10)+"px"}).attr("width",g)):(i=this.spacegallery.current-this.spacegallery.increment*a/100,g=this.spacegallery.origWidth-(this.spacegallery.origWidth-this.spacegallery.origWidth*s.spacegalleryCfg.minScale)*i,e(this).css({top:this.spacegallery.origTop+this.spacegallery.nextTop*a/100+"px",opacity:1-i,marginLeft:-parseInt((g+s.spacegalleryCfg.border)/2,10)+"px"}).attr("width",g))})}})}return this.blur(),!1},init:function(a){return a=e.extend({},EYE.spacegallery.defaults,a||{}),this.each(function(){var s=this;if(e(s).is(".spacegallery")){e('<a href="#"></a>').appendTo(this).addClass(a.loadingClass).bind("click",EYE.spacegallery.next),s.spacegalleryCfg=a,s.spacegalleryCfg.images=s.getElementsByTagName("img").length,s.spacegalleryCfg.loaded=0,s.spacegalleryCfg.asin=Math.asin(1),s.spacegalleryCfg.asins={},s.spacegalleryCfg.tops={},s.spacegalleryCfg.increment=parseInt(s.spacegalleryCfg.perspective/s.spacegalleryCfg.images,10);var l=0;e("img",s).each(function(e){var a=new Image,g=this;s.spacegalleryCfg.asins[e]=1-Math.asin((e+1)/s.spacegalleryCfg.images)/s.spacegalleryCfg.asin,l+=s.spacegalleryCfg.increment-s.spacegalleryCfg.increment*s.spacegalleryCfg.asins[e],s.spacegalleryCfg.tops[e]=l,g.spacegallery={},a.src=this.src,a.complete?(s.spacegalleryCfg.loaded++,g.spacegallery.origWidth=a.width,g.spacegallery.origHeight=a.height):a.onload=function(){s.spacegalleryCfg.loaded++,g.spacegallery.origWidth=a.width,g.spacegallery.origHeight=a.height,s.spacegalleryCfg.loaded==s.spacegalleryCfg.images&&EYE.spacegallery.positionImages(s)}}),s.spacegalleryCfg.asins[s.spacegalleryCfg.images]=1.3*s.spacegalleryCfg.asins[s.spacegalleryCfg.images-1],s.spacegalleryCfg.tops[s.spacegalleryCfg.images]=1.3*s.spacegalleryCfg.tops[s.spacegalleryCfg.images-1],s.spacegalleryCfg.loaded==s.spacegalleryCfg.images&&EYE.spacegallery.positionImages(s)}})}}}),e.fn.extend({spacegallery:EYE.spacegallery.init}),e.extend(e.easing,{easeOut:function(e,a,s,l,g){return-l*(a/=g)*(a-2)+s}})}(jQuery);<br />//]]><br /></script><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />(function($){<br />var initLayout = function() {<br />var hash = window.location.hash.replace('#', '');<br />var currentTab = $('ul.navigationTabs a')<br />.bind('click', showTab)<br />.filter('a[rel=' + hash + ']');<br />if (currentTab.size() == 0) {<br />currentTab = $('ul.navigationTabs a:first');<br />}<br />showTab.apply(currentTab.get(0));<br />$('#myGallery').spacegallery({loadingClass: 'loading'});<br />};<br /><br />var showTab = function(e) {<br />var tabIndex = $('ul.navigationTabs a')<br />.removeClass('active')<br />.index(this);<br />$(this)<br />.addClass('active')<br />.blur();<br />$('div.tab')<br />.hide()<br />.eq(tabIndex)<br />.show();<br />};<br /><br />EYE.register(initLayout, 'init');<br />})(jQuery)<br />//]]><br /></script></blockquote><i>Note: if you have already jQuery in your template, please delete the line in red.</i><br /><br /><span style="color: #3d85c6;"><b>Step 4</b></span>. Next, search (CTRL + F) for this tag:<br /><blockquote class="tr_bq">]]></b:skin></blockquote><b><span style="color: #3d85c6;">Step 5.</span></b> Above the <span style="background-color: yellow;">]]></b:skin></span> tag, paste the following CSS style:<br /><blockquote class="tr_bq">#myGallery {<br />width: 100%;<br />height: 400px;<br />}<br />#myGallery img {<br />border: 2px solid #52697E; <br />}<br />a.loading {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkVjP-LXrO7pjYN0dixvXcQiRK4aKlxvIjCcB-ssR115mftH52mXvQKnHR1SEeA8vakvHkG25g3rUOLIoGvaKibuSuUZaAxnAIUaiGfxkHAVmkerV3QqrAkyR56HK2Yd1B8rOKlDYNIBx/s1600/ajax_small.gif) no-repeat center;<br />}<br />.spacegallery {<br />position: relative;<br />overflow: hidden;<br />}<br />.spacegallery img {<br />position: absolute;<br />left: 50%;<br />}<br />.spacegallery a {<br />position: absolute;<br />z-index: 1000;<br />display: block;<br />top: 0;<br />left: 0;<br />width: 100%;<br />height: 100%;<br />}</blockquote><span style="color: #3d85c6;"><b>Step 6</b></span>. Hit the <b>Save template</b> button to save the changes.<br /><br /><span style="color: #3d85c6;"><b>Step 7</b></span>. Finally, go to <b>Layout </b>> <b>Add a Gadget</b> > <b>HTML/Javascript</b> and copy-paste the code below:<br /><blockquote class="tr_bq"><div class="spacegallery" id="myGallery"><br /><img src="<span style="color: blue;">Image URL</span>"/><br /><img src="<span style="color: blue;">Image URL</span>"/><br /><img src="<span style="color: blue;">Image URL</span>"/><br /><img src="<span style="color: blue;">Image URL</span>"/><br /><img src="<span style="color: blue;">Image URL</span>"/><br /></div></blockquote>Replace the <span style="color: blue;">Image URL</span> text with the image addresses that you want to appear on the gallery, considering that the last image is the first to be displayed.<br /><br />If you want to add this slideshow inside a post, go to your dashboard and create a <b>New Post</b>, then paste the code in the <b>HTML</b> section.<br /><br />That's it! Now, you can enjoy this simple image gallery on your blog and although, it has no display options or settings, it is without a doubt a gallery that will draw the attention of your readers.<br /><br />Source: <a href="http://www.eyecon.ro/spacegallery/" rel="nofollow" target="_blank">eyecon.ro</a>

Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like...

Read more »