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

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts