Orbit - jQuery Image Slider Plugin For Blogger

This tutorial will show you how to add another beautiful image slider made with jQuery and HTML and CSS. This slider, called Orbit, is a lightweight jQuery plugin that displays multiple images in a given location using navigation buttons (previous-next buttons). At the top left of the Orbit slideshow we have some little dot icons that indicate the frame we're currently viewing, and at the top right there's a pause option and a timer that tells us when the next frame will be.

If you want to see this awesome image slider in action, visit this demo blog:

Demo blog

Related to:
Photo gallery with nails using JavaScript and CSS
Spacegallery. jQuery's Time Machine-like slider/gallery
An image slider that renders images on mouseover using only CSS

The HTML markup is pretty clean, it just includes a few images and the part where the captions are created from the span tags of those images.

How to Add Orbital Image Slider to Blog

Step 1 From your Blogger dashboard, go to Templates > Edit HTML Code > Click anywhere in the code area and press CTRL + F keys to open the Blogger search box. Paste or type the tag below in the search field and press Enter to find it.

Step 2: Right above Add the following scripts

Note: You can change the transition speed between each frame by changing the blue bar value to 5000 . a higher number will make the frames last longer between each pass.

Important. If you have a jQuery version in your template, remove the red line, otherwise the approach may not work.

Step 3: Time to add the CSS. Find this account (CTRL+F).

]]>:

Step 4: Right above ]]>: Add this code

# header (height: 1px; width: 1px; hidden overflow; }
div.orbit {
width: 1px;
height: 1px;
Location: relative;
hidden surplus;
}

div.orbit img {
Location: Absolute;
Maximum: 0;
Left: 0;
}
div.orbit to img {margin: none;}

different timer {
width: 40 pixels;
height: 40px;
hidden surplus;
Location: Absolute;
top: 10px;
Right: 10px;
Simplicity: .6;
Pointer: Pointer;
z-index: 1001;
}

Rotator Gap {
View Block:
width: 40 pixels;
height: 40px;
Location: Absolute;
Maximum: 0;
left -20px;
Background: URL (http://2.bp.blogspot.com/-RIbuOzbC8os/UwDPg1IgFaI/AAAAAAAAAGN0/DrmP4kh7G08/s1600/timer-icon.png);
background-repeat without repeating;
z-index: 3;
}

group mask {
View Block:
width: 20 pixels;
height: 40px;
Location: Absolute;
Maximum: 0;
Right: 0;
z-index: 2;
hidden surplus;
}

span.rotator.move { left: 0; }
span.mask.move {
width: 40px;
Left: 0;
Background: URL (http://1.bp.blogspot.com/-9FdwFtBqvS4/UwDPqzE3ABI/AAAAAAAAAGN8/r4xhlPpOHY4/s1600/timer-right.png);
background repetition. to repeat
background-position: 0px 0px;
}

span. pause {
View Block:
width: 40px;
height: 40px;
Location: Absolute;
Maximum: 0;
left 0px;
background image: URL (http://2.bp.blogspot.com/-8G-L7Onwt-Y/UwDPy372vYI/AAAAAAAAAGOE/4qUdsKJaK98/s1600/pause-icon.png);
background-repeat without repeating;
z-index: 4;
transparency: 0;
}

div.timer. move span.pause;
span.pause. active
div.timer: hover span.pause.active { opacity: 1; }

div.legend {
Background: #000;
background : rgba ( 0,0,0,.6 );
Width: 100%;
z-index: 1000;
Location: Absolute;
bottom: -100px;
Color: #fff;
charge 8px 0;
Align text: center;
}

Miscellaneous Brief Description {
padding: 0 10px;
font size: 14 pixels;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin. 0;
}
.orbit-description (display: none; }

Different orbits. hover div. slide-nav ( display : blocking ; }
different slider-nav ( show : none ; }
slider-nav domain {
Width: 33 pixels;
height: 33 pixels;
text-indent: -9999px;
Location: Absolute;
z-index: 1000;
Higher: 43%;
Pointer: Pointer;
}

Various sliding ship group. correct {
Background Image: URL (http://1.bp.blogspot.com/-oW1NQkjT3Ws/UwDP7b7T2-I/AAAAAAAGOM/JaeJxm9qZ60/s1600/arrow-right.png);
Right: 10px;
}
Various sliding ship group. left {
Background Image: URL (http://3.bp.blogspot.com/-T9eMQBFvVro/UwDQBxCnpWI/AAAAAAAAAGOU/L8KS7EAOqOU/s1600/arrow-left.png);
Left: 10 pixels;
}

bullet-track {
Location: Absolute;
z-index: 1000;
list style: none;
top: 10px;
Left: 7 pixels;
margin. 0;
tile: 0;
}

.bullet-orbit li {
Drive: left;
left margin: 5px;
Pointer: Pointer;
Color: #999;
text-indent: -9999px;
Background Image: URL (http://1.bp.blogspot.com/-lKQgWI4_xhQ/UwDQI0WIQmI/AAAAAAAAAGOC/1e6zuurwFSg/s1600/bullets.png);
background-repeat without repeating;
background-position: 0 0;
Width: 7 pixels;
height: 7px;
hidden surplus;
}
.orbit-shots li.active { color: #222; background position. -7px 0; }

Step 5 Click the Save Template button to save your changes.

Finally, we use the HTML code that displays the images. We have the option to add the slider to one of our posts/pages or display it as a widget in the blog sidebar or under the header.

If you decide to add this to one of your posts, go to the HTML tab and paste the code below into the HTML area of ​​your post.

If you want to add it under the sidebar/blog header, go to Layout, click the Add Widget link > select HTML/JavaScript in the dropdown and paste this HTML code into 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 ;'/>
Here is an example description with links. Helplogger:

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 ;'/>
Here is an example description with links. Helplogger:

This code contains images, links and descriptions for each image. In blue, these are the URLs of the links and images you want to replace with your own. In the HTML for each image, you have the size of each image, which can be changed by changing the width (590) and height (348) values. Replace text with red to add captions to your images.

If you want to add more images, add this HTML code before the file