Simple Stylish jQuery Image Slideshow For Blogger




| 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(){
$(&#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.

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 '&#39;showMarkers&#39; : true,' change to false to remove the number buttons.Change &#39;showControls&#39; : 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.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


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

83 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
    Replies
    1. Yes, I would really like to know this too! I tried using but then the slider did not work anymore.

      Delete
  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. 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
  11. this like script. I add my library anymore.

    ReplyDelete
  12. 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
  13. Thanks for sharing this wonderful article. It helped me gain a lot of info.

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

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

    ReplyDelete
  16. It's an awesome script, but it's a bit to big? How can I scale it down?

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

      Delete
  17. 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
  18. Pls, how can we put blogger post inside or static page.

    pls need step by step method because i am not newbie

    ReplyDelete
  19. 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
  20. 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
  21. thanks for this great widget. btw, is there any way to get rid or arrange the 'next' and 'previous' text?

    ReplyDelete
  22. It works! But I want to remove the Next - Prev bar. What should I do?

    ReplyDelete
  23. 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
  24. How do make the images or captions in the slider into a link, so that I can link the pictures to blog posts?

    ReplyDelete
  25. awesome!!!I love everything about this stuff!

    ReplyDelete
  26. 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
    1. 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
  27. Hi..great gadget...is it possible to centre it on a blog page?

    ReplyDelete
  28. How can I put links into the caption?

    ReplyDelete
  29. 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
    1. 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
  30. Is there a way to change the speed of the slideshow?

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

    ReplyDelete
    Replies
    1. 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
    2. 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
    3. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. Thanks for Helping Pimp my blog out ahahahaha. SImple, Straightforward, and Awesome tutorial!

    ReplyDelete
  37. 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
  38. 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
  39. 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
  40. ...it was soooo helpfull ! THANK YOU VERY VERY MUCH !...may god bless you with health, so you can keep on posting helpfull stuff :)...

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

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

    ReplyDelete
  43. It's a cool hack, Thanks.
    How can I remove the black captions on the slideshow?

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

    ReplyDelete
  45. 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
  46. 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
  47. It is a nice slider, but it shows up on every single page.
    Tell me how to keep it only on homepage.

    ReplyDelete
  48. 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
  49. 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
  50. 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
  51. can i have multiple sliders on multiple pages! please help!!!

    ReplyDelete
  52. 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
  53. 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
  54. 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
    1. 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
  55. It is a nice slider, but it shows up on every single page.
    Tell me how to keep it only on homepage.

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

    ReplyDelete
  57. Nice slider article...
    http://www.alphahomeocare.com/

    ReplyDelete
  58. how to speed up for this slideshow?

    ReplyDelete
  59. how to speed up in slideshow?

    ReplyDelete
  60. Hi. It's not working. I followed every single step. including watching the video

    ReplyDelete
  61. 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



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us