Header Ads

  • Breaking News

    Orbit - jQuery Image Slider Plugin for Blogger


    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 for displaying multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, we have some bullet icons indicating the current image that we are viewing and on the upper right side is the pause option and a timer letting the user know when the next image will be displayed.

    The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the title tags of these images.




    How to add the Orbit Image Slider to Blogger

    Step 1. From your Blogger Dashboard, go to Template > Edit HTML > click anywhere and press the CTRL + F keys to open the blogger search box. Paste or type the </head> tag inside the search box and hit Enter to find it.

    Step 2. Just above the </head> tag, add the following scripts:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>



    Note: You can change the transitions speed between each image by modifying the 5000 value from the line in blue - a higher number will make the pictures stay longer between each transition.

    Important! If you have already a version of jQuery in your template, remove the line in red, otherwise the slideshow might not work.

    Step 3. Now it is time to add the CSS... find this tag:


      ]]></b:skin>

    Just above ]]></b:skin> add this code:



    Step 5. Click on the Save template button to save the changes.

    Finally, we will use the 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.
    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. If you want to add it in the blog sidebar/below the header, go to Layout, click on theAdd a gadget link > choose HTML/JavaScript from the pop-up window and paste the code inside the empty box:

    <div id='featured'>
    <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 example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Blogger</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 example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Helplogger</a></span>
    </div>


    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 which can be changed by modifying the width (590) and height (348) values. To add the description for your pictures, replace the text in red. 

    To add more pictures, add this HTML before the </div> tag:

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

    Notice that each image and description has an identifier (id) - this identifier should be unique. For instance, in the description text of the first image, we have the id="photo1" and within the image code is the rel attribute with the name of the id, that is rel="photo1".


    No comments

    Post Top Ad

    Post Bottom Ad