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

Create An Image SlideShow - Part 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

Leave a Reply

21 Comments on "Create An Image SlideShow – Part 1"

Notify of
avatar
Sort by:   newest | oldest | most voted
Nanang
Guest

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

View Comment
Divya Sai
Guest

Welcome Narang !

View Comment
Sriram
Guest
Africa
Guest

Hi Sai,

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

View Comment
Divya Sai
Guest

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

View Comment
Africa
Guest

thanks sai,

I fixed it with the Z-index.

View Comment
Clarity
Guest

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

View Comment
Abhidnya Talekar
Guest

Your 125 X 125 Adzone article is awesome.

Can you please publish user counter code for blog.

View Comment
Sai @ Blogger Widgets
Guest

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.

View Comment
dlf
Guest
Anonymous
Guest

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

View Comment
Tony
Guest

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

View Comment
webmaster.vishtech2
Guest

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

View Comment
(¯`*•.(¯`*•.NEODEV .•*´¯).•*´¯)
Guest

same black screen for me too

View Comment
Sai - Blogger Help
Guest

Need your blog address to check.

View Comment
Anonymous
Guest

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.

View Comment
Sai - Blogger Widgets
Guest

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

View Comment
Vermine
Guest

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/

View Comment
Vermine
Guest

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)

View Comment
wpDiscuz