2009/05/02

Create image Slideshow

Hi , today your blog will be more beautiful and looks great when you are done this tip.It is called Image SlideShow.The last time I published this tip, it was crashed.However it was fixed now and it will easier very much for you to make.

1.First add this CSS code before the ]]></b:skin> tag:

/* s3slider
----------------------------------------------- */
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 439px;
height: 200px;
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 439px; /* very improtant */
position: absolute; /* important */
top:-14px; /* important */
padding: 0px;
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 439px;
background-color: #000;
filter: alpha(opacity=80); /* here you can set the opacity of box with text */
-moz-opacity: 0.8; /* here you can set the opacity of box with text */
-khtml-opacity: 0.8; /* here you can set the opacity of box with text */
opacity: 0.8; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}


If you want to change the slide size, look at the width and height in #s3slider part, just change it!


2.What you have to do is downloading the file and you will see what you need:js file, ok now you have to upload it to your own host, I am using 110mb.com to host that file.

Next , add this code before the </head> tag :

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="s3slider URl" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>


Notice the red code:
that's the place you need to paste the js file URl here.

3.Now Save it,create a HTML/Javascript and paste this code in it:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="image url 1"/>
<span>Description 1</span>
</li>
<li class="s3sliderImage">
<img src="image url 2"/>
<span>Description 2</span>
</li>
<li class="s3sliderImage">
<img src="image url 3"/>
<span>Description 3</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>


Let's look at the pink code, that's the image URL and a short description.

At this step you can move this widget to any where on your blog , join with it. I hope you like this, if you like please introduce (not copy) to your friends and follow me on Twitter to receive these greatest tips.
Thank you very much.
Zen


Requirements: Jquery
Developer : JonDesign
Website: http://smoothslideshow.jondesign.net/timed.html
Convert to blogger : Zenplate

15 comments:

music-collides-all said...

thanks for your tutorials..i am still a newbie here..i will try it soon.. :-D

Danalamano said...

Thank you for this tutorial! I will be using this on my blog soon! I do not use blogspot.com but it looks like it will work on any website as long as you input the script correctly! Thanks again!

vuluganck said...

No , all the Jquery code can be used for any websites even blogger or wordpress ,too.And most the blogger code can be used to website, not only for blogger.

Los Angeles web design said...

This tutorial is very effective and I will this out for myself. Thanks for sharing and more power!

-richard

MiaZoe said...

I bow down to your genius ! You have saved me from days of trying to figure out JQuery code upon code upon code ! I feel so lucky to have found your site & I am spreading your link like a virus @ this point ! Thank You Thank You Thank You Thank YOU !!!

vuluganck said...

Dear MiaZoe , you are the oldest blogger that I have ever contacted, nice to meet you and no problem for these stuffs on my site.I hope you to join and invite your friends to join my site and my Twitter too.

Thanks very much and wish u are always happy.
Zen

MiaZoe said...

Thank you so much Zen [ Ironic : I have studied Zen most of my life , I never imagined I would be encountering him in the flesh & online ! :) Your site has helped me immensely - you are @ the TOP of my list & my source of reference for all the help I will ever need :) / & [ I'm not that old ..just half a century LOL ]
Hugs 2 U my dear Zen xoxoxo
 .

vuluganck said...

Dear MiaZoe!
Thank so much for sweet comment , as I said in my bio in "About me" tab, I am still in the final important exam in my life and i will be the full time blogger after I go to the college.I will change the blogger world and will helps the people like you.

Who need me,i will help.Thanks and have a gooday my friend.
Zen

subagya said...

awesome.. this is im looking for.. thanks bro

Tony said...

Awesome... utterly awesome.

I've used the code on my own website (not blogger or anything like that) and had VERY few issues with getting it to work. Easily altered and adjusted, beautiful results.

Thanks a million, man!

mémoire BY Jose said...

Hi Zen, I followed the step but doesn't seem to work. Can you kindly assist me further http://memoirebyjoseculturaleventsplanner.blogspot.com/

zendersto said...

@mémoire BY Jose
I have tested this slide and I found a error for the function code.I will fix later.Dont worry.Thanks to make me figure out the error.You will make it available on your blog soon.

RnbBlues said...

its not workin' zen kindly fixed this Jquery..thnx

vuluganck said...

@RnbBlues
Yes yes i see, but seems too busy for me this time.Take it easy.I have to face with the very important exam.I will fix it soon

Desh said...

Hi Zen,

Thanks a bunch for your tips.
I employed this marvelous trick on my blog at http://iya2009sl.blogspot.com, Please leave me a comment on how it is functional.

ALL THE BEST FOR THE EXAMS !
DO THEM WELL, Give priority to exams and you can make it easy, believe in your talents..

Thanks again

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.