Orbit – Jquery Icon Slider Plugin For Blogger – Helplogger

This tutorial volition present y’all how to add together around other beautiful prototype slider for Blogger / BlogSpot made amongst jQuery in addition to , of course of pedagogy , 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 accept around pocket-size bullet icons indicating the electrical current prototype that nosotros are viewing in addition to , on the upper correct side , is the suspension selection in addition to a timer letting us know when the adjacent prototype volition last displayed.

If y’all desire to come across this cool prototype slider inward activity , delight see this demo blog:

Related:
Photo Gallery amongst Thumbnails using Javascript in addition to CSS
Spacegallery: A jQuery Time Machine-like Slideshow/Image Gallery
Image Slider that Displays Pictures on Mouse Hover using exclusively CSS

The HTML markup is pretty build clean , simply 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 , become 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 uncovering it.

Step 2. Just inward a higher identify add together the next scripts:

Note: You tin modify the transitions speed betwixt each prototype yesteryear modifying the 5000 value from the business inward blueish – a higher release volition brand the pictures rest longer betwixt each transition.

Important! If y’all accept already a version of jQuery inward your template , delight withdraw the business inward cherry-red , otherwise the slideshow mightiness non work.

Step 3. Now it is fourth dimension to add together the CSS. Find (CTRL + F) this tag:

]]>

Step 4. Just inward a higher identify ]]> add together this code:

#featured {height: 1px; width: 1px; overflow: hidden;}
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(http://2.bp.blogspot.com/-RIbuOzbC8os/UwDPg1IgFaI/AAAAAAAAGN0/DrmP4kh7G08/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(http://1.bp.blogspot.com/-9FdwFtBqvS4/UwDPqzE3ABI/AAAAAAAAGN8/r4xhlPpOHY4/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(http://2.bp.blogspot.com/-8G-L7Onwt-Y/UwDPy372vYI/AAAAAAAAGOE/4qUdsKJaK98/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(http://1.bp.blogspot.com/-oW1NQkjT3Ws/UwDP7b7T2-I/AAAAAAAAGOM/JaeJxm9qZ60/s1600/arrow-right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(http://3.bp.blogspot.com/-T9eMQBFvVro/UwDQBxCnpWI/AAAAAAAAGOU/L8KS7EAOqOU/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(http://1.bp.blogspot.com/-lKQgWI4_xhQ/UwDQI0WIQmI/AAAAAAAAGOc/1e6zuurwFSg/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; }

Step 5. Click on the “Save template” push to relieve the changes.

Finally , nosotros volition usage the HTML code that displays the images. We accept the selection to add together the slider either within ane of our posts/pages , or display it equally a gadget on the blog’ sidebar or below the header.

If y’all select to add together it within ane of your posts , switch to the HTML tab in addition to glue the code below within HTML box of your post.

If y’all desire to add together it inward the weblog sidebar/below the header , become to “Layout” , click on the “Add a gadget link” > select “HTML/JavaScript” from the pop-up window in addition to glue this html within the box:

photo2‘ src=”image URL” style=’height: 348px; width: 590px;’/>
This is an illustration of description amongst links: Helplogger

Link URL“>Ut eleifend tortor aliquet , fringilla nunc non , consectetur magna.

photo5‘ src=”image URL” style=’height: 348px; width: 590px;’/>
Ut eleifend tortor aliquet , fringilla nunc non , consectetur magna.

Notice that each prototype in addition to description has an unique identifier (id) in addition to shouldn’t last repeated. For illustration , inward the description text of the outset prototype , nosotros accept the id=”photo1” in addition to within the prototype code is the “rel” attribute amongst the advert of the id , that is rel=”photo1“.

After y’all added your images , click the “Save” or “Publish” push in addition to that’s it! Now y’all tin relish this cool Orbit Image Slider for Blogger.