Create An Image SlideShow - Part 1

The next three articles on BloggerStop.Net will help you to add amazing Image Slide-Shows to your blogs. These slide shows will help you to show off your best content anywhere in your blog or any other web page. Along with the images, in these slide shows you will see an overlaying text strips.
Look at the demo with three different types of slide-shows : s3Slider Demo

Now depending on your requirement you may use any of those three variants. Remember that while using any of the three widgets, the dimensions (width & height) are completely customizable.

SLIDE-SHOW 1

STEP 1:
Download these files:
jquery.js
s3Slider.js

Download them as a zipped file

STEP 2:
Upload both the files to either MyDataNest.com or SigMirror.com (you need to register first), and get the DIRECT LINKS to the files.

STEP 3:
The coding part:

Log in to Blogger, go to Layout -> Edit HTML
Now find this in the template code:
</head>
And immediately ABOVE/BEFORE it, add these lines:
<!--SLIDE-SHOW-STARTS-->
<!-- JavaScripts-->
<script type="text/javascript" src="http://mydatanest.com/........./jquery.js"></script>
<script type="text/javascript" src="http://mydatanest.com/........./s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}
</style>
<!--SLIDE-SHOW-STOPS-4-HELP-http://bloggerstop.net-->

Replace the links in red, with the DIRECT LINKS you got from the second step, and save the template.

STEP 4:
Then go to Layout -> Page Elements
And click on "Add a Gadget", select it as "HTML/JavaScript" type.

And this content to the widget:
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href=""><img src="images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/3.jpg" alt="3" />
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/4.jpg" alt="4" />
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/5.jpg" alt="5" />
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
Now replace the links in red with the Direct Links to your own images.
Change the Class="top/bottom" to display the text at either top or bottom of the widget.
and also change the titles and content (in blue).

Finally save the widget. And drag the widget to wherever you like. You may also directly embed the widget in a blog post. If you want to use the other two widgets, then wait for the next posts.

Credits: Serie3.info

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

23 comments

Write comments
April 29, 2009 11:43 PM delete

Wow,... i like to say thank you very much... it's work and make my blog dynamic... thank you very much for this tutorial...:-)

Reply
avatar
July 07, 2009 1:14 AM delete

amazing:))
http://karaikudionline.blogspot.com

Reply
avatar
September 06, 2009 7:39 PM delete

Hi Sai,

It's there a way to make my drop down menu to show above this slideshow intead of below?

Reply
avatar
September 07, 2009 8:01 AM delete

Well simply drag the slideshow widget below the widget containing drop down menu.

Reply
avatar
September 07, 2009 1:16 PM delete

thanks sai,

I fixed it with the Z-index.

Reply
avatar
October 06, 2009 4:35 PM delete This comment has been removed by a blog administrator.
avatar
February 15, 2010 11:14 AM delete

I guess one needs to be comfortable writing code to do this.

Reply
avatar
February 26, 2010 5:10 AM delete

Your 125 X 125 Adzone article is awesome.

Can you please publish user counter code for blog.

Reply
avatar
February 26, 2010 5:56 AM delete

I'm glad you liked the tutorial Abhidnya,
I have a tutorial on "how to track your visitors and optimize your blog for them".
Where I suggested everyone to go with statcounter and google analytics, so while using the code from Statcounter, you can select a visible counter to be shown on your blog.

Reply
avatar
jk
April 01, 2010 2:54 AM delete

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif

Reply
avatar
Anonymous
April 29, 2010 4:21 PM delete

I tried to place this on my site and it said that object doesn't support this? I assume that Intuite (site I am using to build my site) doesn't support this. Can anyone tell me if that is the case? jgonza132@yahoo.com

Reply
avatar
June 20, 2010 7:38 PM delete

I'm having problems with mine. it just shows a big black space.

Reply
avatar
August 21, 2010 8:35 AM delete

I'm having problems with mine. it just shows a big black space
pls help me

Reply
avatar
December 23, 2010 12:02 PM delete This comment has been removed by the author.
avatar
Anonymous
December 23, 2010 12:04 PM delete

I did exactly what you said; however, it can't be viewed on other browsers. Worse is, it didn't appear again the browser I used to do the coding.

Reply
avatar
December 23, 2010 12:26 PM delete

Go to your account at MyDataNest and edit the properties of the folder (where you have uploaded the files) and set the permissions as "Hidden" instead of "Private". That's it

Reply
avatar
January 04, 2011 3:04 AM delete

Hello Sai,

The slideshow only shows randomly, I sometimes have to hit F5 two or three times before it shows...
What did I do wrong?

Thanks in advance.

here's the blog: http://chateau-du-courtioux.blogspot.com/

Reply
avatar
January 04, 2011 3:11 AM delete

Forgot to add:
It only "semi-works" on Chrome.
With Firefow or IE, even with multiple refreshs it doesn't show at all...

(I also set the permissions from Private to Hidden in my datanest folder but it still doesn't work)

Reply
avatar
September 16, 2011 6:11 AM delete

hi can anyone help me i have install this slide it very nice and amazing but after i install my back to top button and the facebook slider did not work.i am sing the jquery in this two code!!pls any one help

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon