Orbit - Jquery Icon Slider Plugin For Blogger

This tutorial volition demo you lot how to add together to a greater extent than or less 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 inwards a express infinite using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, nosotros bring to a greater extent than or less minor bullet icons indicating the electrical current prototype that nosotros are viewing and, on the upper correct side, is the intermission pick in addition to a timer letting us know when the adjacent prototype volition move displayed.

If you lot desire to meet this cool prototype slider inwards action, delight see this demo blog:

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 solely CSS

The HTML markup is pretty 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 surface area in addition to press the CTRL + F keys to opened upward the blogger search box. Paste or type the below tag within the search box in addition to hitting Enter to detect it.

Step 2. Just higher upward add together the next scripts:

Note: You tin alter the transitions speed betwixt each prototype past times modifying the 5000 value from the trouble inwards bluish - a higher set out volition brand the pictures remain longer betwixt each transition.

Important! If you lot bring already a version of jQuery inwards your template, delight take away the trouble inwards red, otherwise the slideshow powerfulness non work.

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

]]>

Step 4. Just higher upward ]]> 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 clit to relieve the changes.

Finally, nosotros volition utilisation the HTML code that displays the images. We bring the pick 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 you lot select 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 you lot desire to add together it inwards the spider web log 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:

image URL" style='height: 348px; width: 590px;'/>
Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.

Link URL">image URL" style='height: 348px; width: 590px;'/>
This is an instance of description amongst links:

Link URL">image URL" style='height: 348px; width: 590px;'/>
Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.

image URL" style='height: 348px; width: 590px;'/>
This is an instance of description amongst links:

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 you lot demand to supplant amongst your own. Inside the HTML code of each image, you lot bring the size of each pic that tin move changed past times modifying the width (590) in addition to tiptop (348) values. To add together the description for your pictures, supplant the text inwards red.

If you lot desire to add together to a greater extent than pictures, add together this HTML earlier the

tag:

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 move repeated. For instance, inwards the description text of the start image, nosotros bring 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 you lot added your images, click the "Save" or "Publish" push clit in addition to that's it! Now you lot tin savour this cool Orbit Image Slider for Blogger.