Orbit - Jquery Picture Slider Plugin For Blogger
Tuesday, February 11, 2020
Edit
This tutorial volition demo yous how to add together unopen to other beautiful prototype slider for Blogger / BlogSpot made amongst jQuery and, of course, amongst HTML in addition to CSS. This slider, called Orbit, is a lightweight jQuery plugin that volition display multiple images inward a express infinite using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, nosotros convey unopen to modest bullet icons indicating the electrical flow prototype that nosotros are viewing and, on the upper correct side, is the respite alternative in addition to a timer letting us know when the side yesteryear side prototype volition last displayed.
If yous desire to run across this cool prototype slider inward action, delight see this demo blog:
Related:
Photo Gallery amongst Thumbnails using Javascript in addition to CSS
Spacegallery: Influenza A virus subtype H5N1 jQuery Time Machine-like Slideshow/Image Gallery
Image Slider that Displays Pictures on Mouse Hover using alone CSS
The HTML markup is pretty clean, merely an chemical ingredient that wraps multiple images where the captions are generated from the bridge tags of these images.
Step 2. Just higher upwardly </head> add together the next scripts:
Note: You tin sack alter the transitions speed betwixt each prototype yesteryear modifying the 5000 value from the job inward bluish - a higher set out volition brand the pictures remain longer betwixt each transition.
Important! If yous convey already a version of jQuery inward your template, delight withdraw the job inward red, otherwise the slideshow mightiness non work.
Step 3. Now it is fourth dimension to add together the CSS. Find (CTRL + F) this tag:
Finally, nosotros volition exercise the HTML code that displays the images. We convey the alternative to add together the slider either within 1 of our posts/pages, or display it equally a gadget on the blog' sidebar or below the header.
If yous conduct to add together it within 1 of your posts, switch to the HTML tab in addition to glue the code below within HTML box of your post.
If yous desire to add together it inward the weblog sidebar/below the header, larn to "Layout", click on the "Add a gadget link" > conduct "HTML/JavaScript" from the pop-up window in addition to glue this html within the box:
If yous desire to add together to a greater extent than pictures, add together this HTML earlier the </div> tag:
After yous added your images, click the "Save" or "Publish" push clitoris in addition to that's it! Now yous tin sack bask this cool Orbit Image Slider for Blogger.
If yous desire to run across this cool prototype slider inward action, delight see this demo blog:
Related:
Photo Gallery amongst Thumbnails using Javascript in addition to CSS
Spacegallery: Influenza A virus subtype H5N1 jQuery Time Machine-like Slideshow/Image Gallery
Image Slider that Displays Pictures on Mouse Hover using alone CSS
The HTML markup is pretty clean, merely an chemical ingredient that wraps multiple images where the captions are generated from the bridge tags of these images.
How to Add the Orbit Image Slider to Blogger
Step 1. From your Blogger Dashboard, larn to Template > Edit HTML > click anywhere within the code expanse in addition to press the CTRL + F keys to opened upwardly the blogger search box. Paste or type the below tag within the search box in addition to hitting Enter to honour it.</head>
Step 2. Just higher upwardly </head> add together the next scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to exercise nether the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(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&&
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},
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=
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;
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},
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);
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);
//]]>
</script>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to exercise nether the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(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&&
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},
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=
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;
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},
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);
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);
//]]>
</script>
Note: You tin sack alter the transitions speed betwixt each prototype yesteryear modifying the 5000 value from the job inward bluish - a higher set out volition brand the pictures remain longer betwixt each transition.
Important! If yous convey already a version of jQuery inward your template, delight withdraw the job inward red, otherwise the slideshow mightiness non work.
Step 3. Now it is fourth dimension to add together the CSS. Find (CTRL + F) this tag:
]]></b:skin>Step 4. Just higher upwardly ]]></b:skin> add together this code:
#featured {height: 1px; width: 1px; overflow: hidden;}Step 5. Click on the "Save template" push clitoris to salve the changes.
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG02Twz4lfcobKiDGvkxzPfBDP9PqP6o-Uehjv2UEliPqrb8i5wLufV_LtVnyCEzmLgtkX79-2pwM37RIryoWFr9noBRyogTkPkgRcb3a0hFs-cpQZTr3SZeGxqYPXmj4U5CIWcakW8SXR/s1600/timer-icon.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv21M1V8Y4PJxIt475dSKjwvAQUoWyil3Fv_hm6KAhuFdeQz13tzYmYciMesrQOi3U5Ao5cCWKlJHjSD3VGbykSsaDjgBROct4PiQMo4B_JFjmKjj6Z2hZuMv5iC_9DkfLpzqfaUBtT_pl/s1600/timer-right.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QY4kTF7LsIJWi-jQ5zBYgZFB2Kp-3fw3NmuqFdwQmbqL6BAJOlrUxQOA4cxLnTcOBTBeuMCxIJWqpsdBvGfMJt-A92u6tCo1n6XRGDmJn9j3O46fvP1s1yHPqeH_0jetIJ3idgqD0TRr/s1600/pause-icon.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption bridge {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav bridge {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZi-mOfpJVJcub2D_3GJDi2p5k7KeS65tD4ALyojqxH_WvT5aY_Gso56hJp3HrwZTYAejy2GL8Px-rlmR6aFZc3AL98EfZb1WLYaezrfVRKcS9n2SuWa2NtC9a8FTjOZXUGW3ieqtnngOj/s1600/arrow-right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgovPUqHMzHxfhYDxMaa8y83s6oy0F3NTuawOTp-1gC74OL2rIaocXWbOstslNH0byuzIzP1Ds9aGs_aQyxNfxHzz7p3DbefSyBLpf-Mz90Y5_c3nUsf6oqUaZJt8nAaXfhyiI9Ih1IZZYP/s1600/arrow-left.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0PZWUltofQjrQyaaiA_e93iQe5qsPwrauA6tidJyJVGBkreIVfQ1ph9g1znAmgiFpQoRAQ2ru744XoW1fzoOGalmrMrzIfwKccrv2PlUHkqKJz1QIkbpYGUCJzZm37VUyk8cbB94oFFl/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }
Finally, nosotros volition exercise the HTML code that displays the images. We convey the alternative to add together the slider either within 1 of our posts/pages, or display it equally a gadget on the blog' sidebar or below the header.
If yous conduct to add together it within 1 of your posts, switch to the HTML tab in addition to glue the code below within HTML box of your post.
If yous desire to add together it inward the weblog sidebar/below the header, larn to "Layout", click on the "Add a gadget link" > conduct "HTML/JavaScript" from the pop-up window in addition to glue this html within the box:
<div id='featured'>This code contains the images, links in addition to descriptions for each image. In blue, are the URLs of the links in addition to images that yous demand to supplant amongst your own. Inside the HTML code of each image, yous convey the size of each painting demo that tin sack last changed yesteryear modifying the width (590) in addition to peak (348) values. To add together the description for your pictures, supplant the text inward red.
<a href='Link URL'><img rel='photo1' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo1'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span>
<a href="Link URL"><img rel='photo2' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo2'>This is an instance of description amongst links: <a href='Description Link URL' style='color: #09A7EA;'></a></span>
<a href="Link URL"><img rel='photo3' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo3' style='text-align:center;'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span>
<a href='Link URL'><img rel='photo4' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo4'>This is an instance of description amongst links: <a href='Description Link URL' style='color: #09A7EA;'></a></span>
</div>
If yous desire to add together to a greater extent than pictures, add together this HTML earlier the </div> tag:
<a href='Link URL'><img rel='photo5' src="image URL" style='height: 348px; width: 590px;'/></a>Notice that each prototype in addition to description has an unique identifier (id) in addition to shouldn't last repeated. For instance, inward the description text of the showtime image, nosotros convey the id="photo1" in addition to within the prototype code is the "rel" attribute amongst the mention of the id, that is rel="photo1".
<span class='orbit-caption' id='photo5'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span>
After yous added your images, click the "Save" or "Publish" push clitoris in addition to that's it! Now yous tin sack bask this cool Orbit Image Slider for Blogger.