Create An Image SlideShow – Part 2

This is the second tutorial, to help you add a slide show to your blog. You may see the introductory post here : Create An Image SlideShow – Part 1.
Also check the demo here: s3Slider Demo [Example 2]

SLIDE-SHOW 2

Create An Image SlideShow - Part 2

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”>
#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 */
}

#slider1Content {
width: 720px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.slider1Image {
float: left;
position: relative;
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;
}
.slider1Image span strong {
font-size: 14px;
}
.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() {
$(‘#slider1’).s3Slider({
timeOut: 4000
});
});
</script>
<!–SLIDE-SHOW-STOPS-4-HELP-https://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=”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 /&gt;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.

Leave a Reply

7 Comments on "Create An Image SlideShow – Part 2"

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

This is cool scrip. i has just demo for my blog at http://driver.exe.vn you can see

View Comment
mun im
Guest

widget on my blog
width 600px …how to fix this slide for my blog?

View Comment
Sai
Guest

By default, this widget has a width of 720px, so to change it simply change the value to 600px (at two places in the code above, highlighted in blue)

View Comment
Anonymous
Guest

Thanx for the post. it working fine with firefox,chrome ,ie7 but in ie6 slideshow not working properly, slideshow not getting at correct position its overflowing imean going top of the sidebar, how can fix this issue, give me a solution plz??

View Comment
psychia
Guest

hey, just used this in my blog. thanks for this. 😀 Wish the smileys worked too but I think it's coz of my template. But still grateful. Kudos to you!

View Comment
Divya Sai
Guest

Hi there,
In which blog are you trying smileys? Give me the url and leave the code as it is, so that I can check it…

View Comment
Anonymous
Guest

niceb-(

View Comment
wpDiscuz