Pin It

Simple Stylish jQuery Image Slideshow For Blogger


| | 23 comments

Blogger jQuery
Today i want to bring you another neat Image slideshow for Blogger users.The slide show is simple to add to your blog, looks great and has some neat options.The width can be changed to the size of the area you want it placed on your blog, captions can also be added to the images.Once on your blog it will auto scroll through your images and also has controls for the user to manual scroll.This will look great on Photography Blogs, Business Blogs or for anyone looking to display some cool pics.

The original version comes from Basic jQuery Slider, i have made some changes to make it work better with blogger.Check out the demo below, i have the demo slider spanning the full width of the blog but as i said it can be changed.

View Demo Button

Add The Easy Image Slider To Your Blog


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

/* Start Slider Code From http://www.spiceupyourblog.com/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/* End Slider Code From http://www.spiceupyourblog.com/ */

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->

Important - The line of code in yellow is the jQuery script, if you previously added jQuery to your template leave it out.

The two lines in red and the width and height.The width is currently 940px and the height is 340px change them as needed.Remember your images will need to be the same size as the width and height you choose here.

Step 6. Save your template.

That's the Css and Scripts added now you need to add the html.To have the slider span across your full blog as in the demo you need a gadget area called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.


Adding HTML For The Slides


The HTML for the slides goes in a Html/Javascript gadget in the cross column section as shown above.

Below is the html for the slider in the demo.There is no really easy way to explain it so you will need to take a minute to figure out the code.I have the the image URLs is in green and the caption (Optional) is in yellow.Each slide works in the same way, you can just copy and paste this code and replace the Image URL and captions.To add extra slides you can repeat one of the sections and once again add your URL, Image and Caption.

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="This is a caption." src="http://1.bp.blogspot.com/-6VtyHuKWXec/T00nRHDBfKI/AAAAAAAAFwQ/FwyFSdzpq5I/s1600/slider-image1.jpg"/></li>

<li><img title="This is a another caption." src="http://1.bp.blogspot.com/-PpkbSLY_9TQ/T00nR_BmGGI/AAAAAAAAFwY/B-WYpsKXJTM/s1600/slider-image2.jpg"/></li>

<li><img title="This is a another longer caption." src="http://2.bp.blogspot.com/-iywK-OLiBio/T00nPynnhOI/AAAAAAAAFwI/Sic5_siiUb0/s1600/slider-image-3.jpg"/></li>

<li><img title="This is a another much longer caption." src="http://1.bp.blogspot.com/-07WMvWuPh28/T00nUTHpPZI/AAAAAAAAFwg/zQp89S1-5fY/s1600/slider-image4.jpg"/></li>

<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="http://2.bp.blogspot.com/-c5hZdFVFe1E/T00nVcWvScI/AAAAAAAAFwo/t7hX91c07Xc/s1600/slider-image5.jpg"/></li>
</ul>
</div>

That's it, a bit of work needed hopefully you could follow it and have a great looking jQuery Image Slideshow.You can find more Featured Sliders In Our jQuery Posts.

Drop Your Comments And Questions Below.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

23 comments:

  1. Looks good but I don't like having to click to see each photograph. Now if we could get one that slowly fades into the next photograph the way some of those wordpress blog headers work with little dots instead of numbers then I would be very happy.

    ReplyDelete
  2. How to make the automatic ones? I means we're not place the slider dscription one by one just put the labels at widget and the slider show up automatically

    ReplyDelete
  3. do u know how to make a slideshow similar to mashable? please tell me if its possible

    ReplyDelete
  4. is it possible to put it on a single static page ?

    ReplyDelete
    Replies
    1. Yep, add the Css code and scripts as in the tutorial then put the html for the slider in the page..

      Delete
  5. very nice!

    I already have a navibar in my cross column directly under my header so I can't add the slide show there. Is it possible to put it in my right sidebar and relatively position it in the header from there?

    ReplyDelete
  6. I was able to add another cross column under my header and delete my header thus moving my slideshow up into my header, which is where I want it. I am trying to work out a few kinks with the navibar below it.....I lost the border above it. It may actually be floating above the slideshow but I am not sure if that border belongs to the navibar or not.
    Am I able to add some code that will customize how many times the slideshow will rotate through?
    Thanks!

    ReplyDelete
  7. So the only question I have at this point is where do I go to change the speed of the slideshow? Thank you! I just love this tutorial!

    ReplyDelete
  8. HI ...Thanks alot for the tutorial...
    Could you tell me if there is a way to link the captions or pictures with the posts they relate to?

    Tanya

    ReplyDelete
  9. Thanks a lot, that really spiced up my blog;P
    I have one question though: is there any way I can reduce the size of the space between the image slideshow and my next page element?

    Anette

    ReplyDelete
  10. wow awesome ........thanks for sharing

    ReplyDelete
  11. great thanks, sometime sit doesnt show up?
    it just leaves it out, while other times its there? especially when i click on my pages?
    please help, thanks

    ReplyDelete
  12. this like script. I add my library anymore.

    ReplyDelete
  13. I love this slider! I have it on my blog, but it's showing double numbers under the slider and 'Next & Prev'... how do I fix it?

    ReplyDelete
  14. Thanks for sharing this wonderful article. It helped me gain a lot of info.

    ReplyDelete
  15. Thx, very nice... really cool.. is there a way to slow it down maybe? thx

    ReplyDelete
  16. Is there a way to fix the double numbers?

    ReplyDelete

Asking a question ? Make sure to click the subscribe by email link below the comment form to get notified of replies !
We do not allow links in comments, while most cause no harm it does attract spammers so no matter how valid your comment if you add a link it will not be published.