How to add slide show images in blog post or sidebar widget? How to add slide show images in blog without Flash? That's the common question that bear in blogger's mind. As we all know that Flash script will consume more time also the bandwidth to load in a blog even for a small feature like a flash clock widget.So in this article i will featuring a Slide Show Image with Jquery plugin that will works like a charm, means it works very well. I am very impressed and interested with s3slider when saw it.
First of all, you must choose or prepare your images in the same size e.g. 560 x 420 px or 420 x 300 px. Resize the images using ACDC Pro 2.5 or Adobe Photoshop CS3 or Picture Resize free.
I choose several Hot Sexy Lingerie images from Valisere which i love the Lingerie.
LOOK My Images slide show below ...... size 560 x 420 px, 7 images.....
Sexy Lingerie
Sexy Lingerie 1.
Sexy Lingerie
Sexy Lingerie 2.
Sexy Lingerie
Sexy Lingerie 3.
Sexy Lingerie
Sexy Lingerie 4.
Sexy Lingerie
Sexy Lingerie 5.
Sexy Lingerie
Sexy Lingerie 6.
Sexy Lingerie
Sexy Lingerie 7.
This the Second Slide Show using 560 x 350 px, 3 images .....
Sexy Lingerie
Sexy Lingerie 8.
Sexy Lingerie
Sexy Lingerie 9.
Sexy Lingerie
Sexy Lingerie 10
The CSS script quite concise and neatly.
-----------------------------------------------------------------------------------
]]></b:skin>
<script src='URL Jquery.Script' type='text/javascript'/>
<script src='URL VsSlider.Script' type='text/javascript'/>
<link href='URL Css.Element.Script' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#slider1').VsSlider({
timeOut: 4000
});
});
</script>
</head>
-----------------------------------------------------------------------------------
Second Step
Download the Jquery script here
Download the VsSlider script here
Note : to Download, Right Click your mouse over the link, and save the file.
Third Step
Upload the all the Script you have download to hot linking service like Google Pages, Google Group etc. Don't forget note your upload link each file.
Fourth Step
The Slide Show Css element
This is the most important thing you have to learn and tweak later.
Basic CSS :
#slider1 {
width: 560px;
height: 460px;
position: relative;
overflow: hidden;
}
#slider1Content {
width: 560px;
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: 15px 15px;
width: 560px;
background-color: #000000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #ffffff;
display: none;
}
.clear {
clear: both;
}
.slider1Image span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 10px;
left: 0;
}
.left {
top: 0;
left: 0;
width: 90px !important;
height: 460px;
}
.right {
right: 0;
bottom: 0;
width: 90px !important;
height: 460px;
}
ul { list-style-type: none;}
Type the CSS in a text editor like Notepad and save it as VsCSSstyle.js
Upload it to your Hot Linking service.
Fifth Step
Paste the complete script to your template, after ]]></b:skin>
and above </head>
The complete script would be like this :
]]></b:skin>
<script src='http://tinyurl.com/yfpvtap' type='text/javascript'/>
<script src='http://tinyurl.com/ycbqk77' type='text/javascript'/>
<link href='http://VsCSSstyle.js' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#slider1').VsSlider({
timeOut: 4000
});
});
</script>
</head>
CHANGE the brown color with your own Hot linking URL.
Sixth Step
Finally add the images.
Add this script to your post or sidebar widget in HTML format.
<div id="Slider">
<ul id="SliderContent">
<li class="SliderImage">
<a href="http://vista-sg.blogspot.com/"><img src="http://i33.tinypic.com/vjg2f.jpg" alt="Sexy Lingerie" /></a>
<span class="top"><strong>Sexy Lingerie</strong><br/>Sexy Lingerie 1.</span></li>
<li class="SliderImage">
<a href=""><img src="http://Your Images Jpg URL Link" alt="Your Text Here" /></a>
<span class="left"><strong>Your Title</strong><br/>Your caption Text 2.</span></li>
<li class="SliderImage">
<a href=""><img src="http://www.YOUR picture.com/Vista SG.jpg" alt="Alt Text here" /></a>
<span class="bottom"><strong>Your Title Images</strong><br/>Your Text goes Here 3.</span></li>
<li class="SliderImage">
<a href=""><img src="http://Your Jpg Images URL" alt="Your alt text" /></a>
<span class="left"><strong>Your Image Title</strong><br/>Explain Image with Text 4.</span></li>
<div class="clear SliderImage"></div>
</ul></div>
Note :
Point your mouse on the image will stop the slide show.
Also each image have a title and it showed when you point your mouse on each image.
This is the basic tutorial of the Add Slide Show Images in Blog Post & Widget with Jquery plugin.
I will continue to explain this Cross Fading Slide Show tutorial in another post sooner.
This is great to apply in photographer blog and business sites that use a huge amount of images when a Slide Show images will attract more visitor to see it than a static images do.
So what do you think with this Slide Show guys or ladies, isn't awesome?
Let me know your thought.
Thanks.
My Last Post : Coolest Sculptural Toilet
Posts
