Create An Image SlideShow - Part 3

Finally here comes the third and final tutorial for creating a image slide-show. In this widget, the text layers will appear from any of the four sides (left, right, top, bottom).
Demo: s3Slider Demo [Example 3]
Introductory post: Create An Image SlideShow - Part 1.

SLIDE-SHOW 3

Instructions to add this widget:

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-->
<!-- 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 */
}

#slider1 {
width: 720px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#sliderContent, #slider1Content {
width: 720px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage, .slider1Image {
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;
}

.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
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, .slider1Image span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
.left {
top: 0;
left: 0;
width: 110px !important;
height: 280px;
}
.right {
right: 0;
bottom: 0;
width: 90px !important;
height: 290px;
}
ul { list-style-type: none;}
</style>
<!-- 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
});
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
<!--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:
For smaller Widget (width=370px)
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>

For larger Widget (width=680px)
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="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<a href=""><img src="images/wide/1.jpg" alt="1" /></a>
<span class="left"><strong>Title text 1</strong><br />Content text...</span></li>
<li class="slider1Image">
<a href=""><img src="images/wide/2.jpg" alt="2" /></a>
<span class="right"><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="slider1Image">
<img src="images/wide/3.jpg" alt="3" />
<span class="right"><strong>Title text 2</strong><br />Content text...</span></li>
<li class="slider1Image">
<img src="images/wide/4.jpg" alt="4" />
<span class="left"><strong>Title text 2</strong><br />Content text...</span></li>
<li class="slider1Image">
<img src="images/wide/5.jpg" alt="5" />
<span class="right"><strong>Title text 2</strong><br />Content text...</span></li>
<div class="clear slider1Image"></div>
</ul>
</div>

Now replace the links in red with the Direct Links to your own images.
Change the Class="left/right" to display the text at either left or right 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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

7 comments

Write comments
April 20, 2009 1:27 AM delete

dude its not working in my blog c it

http://soft-tricks-by-arham.blogspot.com/

Reply
avatar
Sai
April 20, 2009 9:15 AM delete

I have checked this widget, actually I check all the widgets before publishing....so there's nothing to go wrong, just be careful to follow all the steps carefully !

Regards
Sai

Reply
avatar
Saq
April 27, 2010 8:39 AM delete

This is great pal...but it doesn't work.

Reply
avatar
Saq
April 27, 2010 1:08 PM delete

Ok, i was trying to do it for about three hours. At the end i created a new "test blog" and it works. The problem probably was at my blog. Thanks!

Reply
avatar
December 09, 2010 7:39 PM delete

Any ideas on how to randomize the slideshow ...or randomize the start slide?

Reply
avatar
February 16, 2011 9:10 PM delete

ံHello..
i want to ask you about that SLIDE-SHOW 1,2,3,4 and so on.
i want to add in my Blog which is www.mmsacm.blogspot.com.
i try to add slide-show in my blog but i can't so, can you show me how to add it.

Reply
avatar
April 17, 2012 8:32 PM delete

It Works Perfectly.... Thanks Alot

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon