Simple Stylish jQuery Image Slideshow For Blogger

Posted : Thursday, March 01, 2012| Post Author : Paul Crowe | 83 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 (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

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(){
$('#my-slideshow').bjqs({

'width' : 940,

'height' : 340,

'showMarkers' : true,
'showControls' : true,
'centerMarkers' : 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.

Remove The Next/Prev And Number Controls – You have the option to remove the next/prev buttons, Number buttons or both.In the code above ”showMarkers’ : true,’ change to false to remove the number buttons.Change ‘showControls’ : true, to false to turn off the next/prev.On the next line you can see th option to center the numbers.

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.

83 comments:

  1. Nguthi Joseph kagechuMarch 1, 2012 at 2:24 PM

    Interesting!

    ReplyDelete

  2. Goooooooooooooooooooood,

    ReplyDelete

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

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

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

    ReplyDelete

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

    ReplyDelete

     

    Replies

     

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

    Delete

  8.  

  9. Simply Elegant,Thanks Paul!

    ReplyDelete

  10. Very very Supper

    ReplyDelete

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

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

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

  14. thx

    ReplyDelete

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

     

    Replies

     

  16. Yes, I would really like to know this too! I tried using but then the slider did not work anymore.

    Delete

  17.  

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

  19. Shine Dezign InfotechMarch 30, 2012 at 12:27 PM

    wow awesome ……..thanks for sharing

    ReplyDelete

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

  21. this like script. I add my library anymore.

    ReplyDelete

  22. Website Design DelhiApril 4, 2012 at 8:53 AM

    Thanks for sharing.

    ReplyDelete

  23. Tricia @ Bluff Area DailyApril 5, 2012 at 2:35 PM

    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

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

    ReplyDelete

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

    ReplyDelete

  26. Tricia @ Bluff Area DailyApril 10, 2012 at 2:16 PM

    Is there a way to fix the double numbers?

    ReplyDelete

  27. I love you…

    ReplyDelete

  28. It’s an awesome script, but it’s a bit to big? How can I scale it down?

    ReplyDelete

     

    Replies

     

  29. In step 5 I have th width and height highlighted simply change them to the size you want..

    Delete

  30.  

  31. thanks Paul
    it was an easy installation and looks stable which for me (work blog with sometimes ridiculous amounts of maintenance involved) is important.
    however, i’m not sure if it’s due to the resizing to fit a post where it needs to be for me, to 500px, but there is a semi frame (single lined) above and to the left of the image? any ideas?
    also, how can i add a timer to it (60 secs duration)?
    though i’m not particularly fussed the previous and next links are above each other, i’m not worried about the numbers being close to each other but
    i would like to get rid of the semi framing, and add timing.
    any ideas help appreciated.
    great blog by the way.

    ReplyDelete

  32. Pls, how can we put blogger post inside or static page.

    pls need step by step method because i am not newbie

    ReplyDelete

  33. I have done everything said on the tutorial and it worked just fine when I installed this on my home page, but when i install this on some other page, the buttons in the end dont load properly (http://thelostdigga.blogspot.in/p/blog-page_07.html). see the buttons in the end. am i doing something wrong? thanks anyways for the easy tutorial.

    ReplyDelete

  34. it works grate!
    one thing… i don’t want to put it in widget. i want the slider in a single post page.
    so when i copy and paste the sliders html it works but the controls don’t look good
    how can i change it!

    ReplyDelete

  35. thanks for this great widget. btw, is there any way to get rid or arrange the ‘next’ and ‘previous’ text?

    ReplyDelete

  36. It works! But I want to remove the Next – Prev bar. What should I do?

    ReplyDelete

  37. Hi thanks for this! I’ve been struggeling to fin a slider that actualy works and fits well. I have a couple of questions though:

    1. How do I change the amount of time each image in the slider stays in view?

    2. How do make the images or captions in the slider into a link, so that I can link the pictures to blog posts?

    Thanks!

    ReplyDelete

  38. How do make the images or captions in the slider into a link, so that I can link the pictures to blog posts?

    ReplyDelete

  39. awesome!!!I love everything about this stuff!

    ReplyDelete

  40. Thank you so much but i want to remove next or previous button and 12345. Can you tell me please what should i do now ?

    ReplyDelete

     

    Replies

     

  41. Shan, you have to change the following code in step 5.

    ‘showMarkers’ : true,
    ‘showControls’ : true,

    Change true to false on both lines.

    I think other would also like the option I will add it to the post.

    Delete

  42.  

  43. Capuchin FranciscansJune 22, 2012 at 5:16 PM

    Hi..great gadget…is it possible to centre it on a blog page?

    ReplyDelete

  44. How can I put links into the caption?

    ReplyDelete

  45. So I made the slider smaller but I want it in the center of the blog instead of the left side. How can I change that? Thanks

    ReplyDelete

     

    Replies

     

  46. Katie, when you add the html in step 6 you need to add center tags.

    So in front of the code add <center> and at the end add </center>

    Delete

  47.  

  48. Is there a way to change the speed of the slideshow?

    ReplyDelete

  49. Interesting

    ReplyDelete

  50. Hey thanks! It works. But, I’m trying to link the images from the slider. Can someone please tell me how?

    ReplyDelete

     

    Replies

     

  51. Maya – Were you have this code –

    <li><img title=”This is a caption.” src=”http://1.bp.blogspot.com/-6VtyHuKWXec/T00nRHDBfKI/AAAAAAAAFwQ/FwyFSdzpq5I/s1600/slider-image1.jpg”/></li>

    You add a link like this –

    <li><a href=”http://www.your-url”><img title=”This is a caption.” src=”http://1.bp.blogspot.com/-6VtyHuKWXec/T00nRHDBfKI/AAAAAAAAFwQ/FwyFSdzpq5I/s1600/slider-image1.jpg”/></a></li>

    Delete

  52. Hi Paul,

    This is working great for me so far. But I tried adding the link and it made my images go black on the slider. Hints?

    Thanks!

    Delete

  53. Actually, I got the images to show up again…but there is now a black border around the top and left sides of the photo.

    Delete

  54.  

  55. I’m building a my new blog (Blogger) and wanted to add a slider for my photography. I did the download from their site (I had found that site before I found your post…) and customized the slideshow the way I’d like it. This gave me 3 things a folder called data1, a folder called engine1 and an index file. I have no idea what to do with those or how to embed the slider in my blog. I also tried following your instructions, but it was a no-go. I’m wondering if the 3rd party template has anything to do with it. Suggestions?

    ReplyDelete

  56. I should also mention that I want the slider posted on a single page and not in the header of my blog… (Actually, I’d like a slider on several different pages…)

    ReplyDelete

  57. Thanks a Lot. It Works. And it works Great. The only issue i could ask for your help and advice is that I have a dropdown Navigation menu in header place by “suckerfish” and my drop down links are going behind the slideshow when i hover above them. Please help

    ReplyDelete

  58. The Local BloggerJuly 24, 2012 at 6:27 PM

    Hi, thanks so much for the code! Could you please tell me how to adjust the speed? And is there are way to add arrows instead of the words “next” and “previous” (like it would be on a Nivo slider)? Also, I’d like to remove the block cation as well. I only want to pictures to show.
    Thank you.

    thelocalblogger.blogspot.com

    ReplyDelete

  59. Thanks for Helping Pimp my blog out ahahahaha. SImple, Straightforward, and Awesome tutorial!

    ReplyDelete

  60. Hi
    Can you please help. I used the script and the direction that you offered. My images are not completely covering the space that is for the slideshow. How can correct it. This is my blog : http://priyanka-b.blogspot.in/

    You would know what I am saying

    ReplyDelete

  61. It doesn’t work in my blog 🙁 I have followed all steps, and it still doesn’t working. I’ve tried to put other JQuery sliders on my blog, and nothing works… I just want to know why?

    ReplyDelete

  62. Hi, how can I add links to the images in the slide so that when someone clicks it will direct them to another page

    Sandi-Accra

    ReplyDelete

     

    Replies

     

  63. same Question please answer us

    Delete

  64.  

  65. …it was soooo helpfull ! THANK YOU VERY VERY MUCH !…may god bless you with health, so you can keep on posting helpfull stuff :)…

    ReplyDelete

  66. Ikhwan Nul Yusuf MaulanaOctober 25, 2012 at 10:59 AM

    thanks, but i want image slideshow besides it. Do you have?? i need .

    ReplyDelete

  67. Can you please tell me how can i change the speed of the slideshow?

    ReplyDelete

  68. It’s a cool hack, Thanks.
    How can I remove the black captions on the slideshow?

    ReplyDelete

  69. I am looking for this tutorial and its very helpful but is there any way to put this slider in blogger posts.

    ReplyDelete

  70. Hey admin thanks for nice posts…. I’m facing problem while getting the src of image. I’m usnig picassa web album but the image source gotted from there does not work. Also the src of image gotted from that is not like to the src given by you in the post. Is there any other mehtod to get the src of an image? Help Please…

    ReplyDelete

  71. Muchas Gracias!

    ReplyDelete

  72. Also, when I add a link to a website using a href, the description goes away…it shows up when I hover..but it is not visible otherwise.

    ReplyDelete

  73. It is a nice slider, but it shows up on every single page.
    Tell me how to keep it only on homepage.

    ReplyDelete

  74. Hi Paul, nicely explained with easy steps, Thanks. I followed same steps, but only header of gadget is displayed not the images :(, i have multiple header (ad, header image and slide show) widgets in my blog. Is there any restrictions to use jquery slide in blogger

    ReplyDelete

  75. This is neat! Do you have any suggestions on how to alter the “numbers” into showing picture tumbnails? I would love a small gallary of tumbnails and the slider to go on just as this does. But i would like to have those buttons for next and prev, instead of the text, like some of your other jquery sliders 🙂

    You should make a post about this, as its a whole different slider i bet lots of people would benefit from.

    And btw, i assume this is the wrong place to ask for this, but this is the one blog i always return to to fix my blog to the better, do you have any ideas on how to get my blog to appear as a webside, like content loading only the main-wrapper, making header, sidebar and footer never load? Ive been searching for this for several days now, and the only thing i find is something wordpress call “the loop”, and other jquery and ajax codes for this (cant make it to work for blogger)

    ReplyDelete

  76. There appears to be an error in the documentation in regards to the CSS. Mine only worked properly if I wrapped style tags around the css, including the comments. Also there is an extra “}” just before the last comment.

    Apart from that, a really good feature.

    ReplyDelete

  77. How can I move?

    ReplyDelete

  78. can i have multiple sliders on multiple pages! please help!!!

    ReplyDelete

  79. Great Widget to spice up my blog. Thanks for that.
    I’m new with this and have a question:

    How do i change the images and where do i post them (advise source/url use)?
    I’ve got it working with your images but now want to customize them.

    ReplyDelete

  80. I have followed every step perfectly, but instead of the images sliding they just display one after another down my profile so they’re all visible at the same time. Is there a simple explanation as to why this is happening and how I can fix it? Thanks so much.

    ReplyDelete

  81. And perhaps it has something to do with the fact that every time I go back to my template coding after it doesnt work, I find that your bits of code have been removed; its like blogger is rejecting the code except I never get a failed message or anything? It acts like the changes have been saved so I make the layout changes but I get the problem with all the images displaying in sequence vertically down my profile, and when I go to check the template coding its gone again.

    ReplyDelete

     

    Replies

     

  82. I’ve had the same problem. It’s just because this is an outdated code. I think there is something wrong with the uploaded javascript file. I’ve been using this perfectly on my blog for over a year, then suddenly it stopped working and ended up as you describe.. I dont think you will receive any answers from the author on this, but please note me if you fix the issue! Catharina

    Delete

  83.  

  84. It is a nice slider, but it shows up on every single page.
    Tell me how to keep it only on homepage.

    ReplyDelete

  85. It is a nice slider, but it shows up on every single page.

    ReplyDelete

  86. Nice slider article…
    http://www.alphahomeocare.com/

    ReplyDelete

  87. So helpful!
    Thank you 🙂

    ReplyDelete

  88. how to speed up for this slideshow?

    ReplyDelete

  89. how to speed up in slideshow?

    ReplyDelete

  90. Hi. It’s not working. I followed every single step. including watching the video

    ReplyDelete

  91. Hi there. I have followed the steps and everything works perfectly. I have a question though. If I want to add a second slideshow at a different width and height, how would I go about doing that? Thanks for any help!

    ReplyDelete