How to add a jquery image slider to your blogger powered blog

In this tutorial you will learn how to add a simple jquery image slider to your blogger powered blog note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure whether yours is disabled or not check the demo you should see a working image slider also all the images must be the exact same size as each other.

I recommend you download a backup copy of your template or use a test blog I'm going to use a 3 column template from my previous tutorial but it should work with any template now we need to download two scripts named jquery.js and s3Slider.js you can read more and download the scripts from this link or just grab the embedded source code from the demo.


Once you have the two scripts you can either upload them to your server or embed the scripts directly in the page i will show you both ways the first assuming that you have uploaded them to your server

go to layout > edit html and paste the following code just before the closing </head> tag making sure you replace the red comment with the direct link to the scripts if you have them on your own server

<script src='http://./jquery.js' type='text/javascript'/>
<script src='http://./s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>


otherwise if you do not have the scripts on your own server paste the following code just before the closing </head> tag

<script type='text/javascript'>
//<![CDATA[
/* paste contents of your scripts here */
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>


replacing the red comment with the full contents of the scripts you downloaded by opening them with a simple text editor the code in green is to set the duration of how long will one picture be shown on the page in milliseconds.

Once you have the scripts installed add the following CSS code adjusting the parts highlighted in red to the exact width and height of your images


#slider1 {
width:525px; /* To be same as image width */
height:237px; /* To be same as image height */
position: relative;
overflow: hidden;
border:1px solid #eee;
margin:0 auto;
}

#slider1Content {
width:525px; /* To be same as image width or wider */
position: absolute;
top: 0;
list-style:none;
margin:0;
padding:0;
}
.slider1Image {
float: left;
position: relative;
display: none;
}
.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width:550px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
bottom:0;
}
.clear {
clear: both;
}
.slider1Image span strong {
font-size:14px;
}


Now save your template then go to the page element tab and add a html/javascript widget just above the post and leave the title field empty with the following xhtml code in

<div id="slider1">
<ul id="slider1Content">

<li class="slider1Image">
<a href='http://myblogpost.html'>
<img alt="my image" src="http://tinypic.com/5xpc1.jpg"/>
</a>
<span>
<strong>Some title</strong>
<br/>
some description text here
</span>
</li>

<li class="slider1Image">
<a href='http://someblogpost.html'>
<img alt="some image" src="http://tinypic.com/5fde1.jpg"/>
</a>
<span>
<strong>Some title</strong>
<br/>
some description text here
</span>
</li>

<div class="clear slider1Image"></div>
</ul>
</div>


In the code above i have added two images if you would like more it's just a matter of copying one of the blocks of code in between the <li></li> tags so the first part highlighted in green is the link to your blog post while the code highlighted in red is the direct link to the image and the blue text is the title and description of your image so now you should have a working image slider you can also have the caption coming in from the top, left or right side of the images i recommend you read more about it on the authors site.

Thanks for reading comments are welcome see my result

43 Responses to “How to add a jquery image slider to your blogger powered blog”

Anonymous

July 08, 2009

Thanks lawny I'm gonna try this on my blog

wow..good article, your article very help..thanks

Good tips. I saw many bloggers did this.

Thank u very much lawny, i'm trying to make it work in your fabulous Corporate style 2 column blogger template in the place of the header.
it works fine in firefox, but in IE8 doesnt display some of the pictures. dont know whats the problem.

@julio
i have tested the demo on my vista machine using IE8 and it works fine maybe you have made a mistake somewhere in the code what is the url of the site ?

Wow...lawny...you are genius!! this is beautifull jquery slider!

Good stuff. Is there anyway to have this auto populate with an image from new posts?

@heartlessgamer
I'm not aware of anyway it can be auto populated on blogger however it can easy be done on WordPress

I'm testing this at http://test.heartlessgamer.com/ and am unable to get the images to display. Not sure what I am doing wrong.

@heartlessgamer
i noticed you are using one of my templates with my credit links removed which i do not allow so i recommend you return them if you plan on using my template as for the images not loading try hosting the images on photobucket or tinypic because i dont think blogger allows hotlinking to the full size image

Its a copied over template from my main site to test (hence the test subdomain). If you notice, www.heartlessgamer.com has always had the credit links in place.

I've tried hosting the pictures via blogger directly and tried using pictures on Flickr without success.

@heartlessgamer
your images are still linked to blogger as i have viewed the source code so they will not work like i said you cannot hotlink to them to see what i mean try creating an html document on your desktop and linking to those images because they do not load for me as you can see the demo works fine for me the images are hosted on tinypic

Thanks for the help so far. I have swapped it back to Flickr pictures, but still don't see them.

I hotlinked to both pictures in the test post to confirm they are working.

I removed the header and searchbar from the template. Would that affect this?

Also, the credits link is restored on the test page.

@heartlessgamer
i have just tested your images on one of my blogs and they work fine however the script in your template doesn't work like it should try copying the full script from the demo by right clicking the page and viewing the source code

wow..your article its cool..thanks

MAN WHAT A TALENT YOU HAVE GOT I APPERICEATED IT YOU ARE DOING A GREAT JOB.....

Nice slider but I can't get it to work, my site is www.paulmeara.com you can see it on the top of my blog posts...

@Paul
you have the jquery script included twice remove the following line from the bottom of your template and save that should fix it
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

Hey man thank you so much, looks great, really appreciate it!

As hard as i try, i can't put this on my blog (www.imchef.org). It shows a blank square and nothing more. Do you know how to fix it?

@Im Chef
you are missing the scripts in your template

@Lawny

I know, because i take them off for an instant, but now i've installed it, all the scripts. And i just got a blank square. Can you help me now?

@Im Chef
the scripts you have hosted on google sites are not loading correctly because if you embed the scripts in the template the slider runs as i have tested it on your site, you need to host them else where or embed them in the template that should solve your problem

Hi Lawny, tnx for this brilliant slideshow and tutorial. Could you please explain me what do i need to fix to be able to show my slideshow as new post or new page. I tried resizing but im not doing something right here http://charmingbeadz.blogspot.com/2010/05/some-title-some-description-text-here.html
Thank you

man its working.Thanx for that big help.But even if i change my page elements position manually,its not a single.Why that for a bug?

Hey, not sure if you're still checking this, but I would like to say this is exactly what I'm looking... only one problem: my CSS.

I'm unfortunately CSS illiterate, and online tutorials for what I need seem to be non-existent. My blog has custom bullets built in for the sidebar right into the CSS. I don't want to remove those because then I'd have to put the code back in for each of the lists (which isn't *that* bad but I'd like to avoid it if possible). I'm wondering is there a way to ignore the sidebar option, maintain what I have, so I can get the bullet off my scroller?

Any assistance you can offer would be greatly appreciated! Thanks.

I cant make it work,,,, where I suppose to paste the CSS code??

It a great share here but i cant get it work.

www.fyruzilla.blogspot.com

I wonder if you could take a look. its on the top of the page

where can i put the code of css

@Al Madawy
The css code goes at the top of the template inbetween the <head></head> tags

Hey, I use this slider image, but the title for the Image are floating to the right. When the title appear completely...

Would you help me:
http://lifecycle-journal.blogspot.com/

Thanks!

Problem Solved, hhe.
I've found my mistake! Thanks!

@Muhammad
Glad you was able to solve the problem yourself.

Hi, I am trying to use your slider on a weebly hosted and build platform. The webpage is www.sensecheck5.com. I am absolutely new to any kind of programming. Could you help me how to integrate this? Weebly allows me to add html code to my page and I can access the general CSS data as well. How do I best proced? Thank you very much!

@Anonymous
Sorry i don't use weebly so i wouldn't know where you need to add the codes.

How to modify the script to show my slider photos in 900px by 280px? I've uploaded few photos to my picasa web folder but the slider fetch them in super tiny size. Secondly, why the slider image span appear in the middle instead of bottom position? Please advise. Thkx!

hi Lawny..

Great post... wonder if this can work in google sites..??

best.!!

Thanks for the code have never use jQuery but starting to get the hang of it.

Hi,

There is a white border appearing around the slide. I thought it may have been something with my blog settings but I checked into and its not that. How do I make the border disappear? Thanks

Anonymous

July 22, 2011

How do I remove the title and description? I just want the image.

I have two questions :)

Is it possible to show pictures in random order?

Is it possible to have a little bit different fade transition,(I don't like that picture fades away and then another one fades in). Is it possible to make that just next picture fade in over the previous one?

btw Great great gadget, very simple but effective!

/* paste contents of your scripts here */

which script u r talking abt??? plz reply asap...

@Anonymous
Did you read the post? As it clearly states where you can get the scripts from.

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2019 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger