Slideshow is a great tool in the hands of webmasters to attract the attention of visitors, and showcase a series of important information about the website.
Though images are mostly used for slideshows – which is why they are also called image galleries – it is possible to easily create slideshow with texts and even videos.
I’ve written a good number of video articles in this blog on different types of slideshows, including using mouseover horizontal accordion, using Swiss-Army JavaScript, as well as the easy one of doing with iframe tag.
In this article we will look at creating slideshow modeled on Alen Grakalic’s EasySlider1.5. Alen has come out with newer version of the slideshow, which we may look at in future article.
Alen’s Easy Slider 1.5 is a lot similar to Jacob Gube’s jQuery slideshow. I’ve shown here (after the video below) how the same script can be modified to create 3 types of slideshows. Stay tuned!
Type 1: Horizontal Slideshow With Controls On Either Side
This slideshow is commonly used wherein the controls (rather, control arrows) appear on either side of the main slide area. When the end slide is reached either in the beginning or at the end, one of the 2 controls will fade off.
Here we have used 3 slides, but you can include as many slides as you want. Let us look at the slideshow below. Click the arrows to see how it works. The demo can also be seen here.
The HTML code for the above slideshow is given below. The EasySlider1.5 JavaScript has to be downloaded from Alen’s site.
<html><head>
<title>EasySlider 1.5 jQuery Plugin Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '</p>',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
});
</script>
<style type="text/css">
body {
background:#fff;
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
line-height:180%;
margin:0;
padding:0;
}
h2{
font-size:160%;
font-weight:normal;
}
img{border:none;}
#container{
margin:0 0 0 40px;
position:relative;
text-align:left;
width:520px;
background:#fff;
}
#content{
position:relative;
}
/* Easy Slider */
#slider{}
#slider ul, #slider li, #slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:520px;
height:260px;
overflow:hidden;
}
#slider2 {
border:1px solid #999;
}
#slider2 li{
background:#f7f7f7;
}
#slider2 li h2{
margin:0 20px;
padding-top:20px;
}
#slider2 li p{
margin:20px;
}
p#controls, p#controls2{
margin:0;
position:relative;
}
#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
display:block;
margin:0;
overflow:hidden;
text-indent:-8000px;
width:35px;
height:52px;
position:absolute;
left:-40px;
top:-160px;
}
#nextBtn, #nextBtn2{
left:525px;
}
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{
display:block;
width:35px;
height:52px;
background:transparent url('control-left.JPG') no-repeat 0 0;
}
#nextBtn a, #nextBtn2 a{
background:transparent url('control-right.JPG') no-repeat 0 0;
}
/* // Easy Slider */
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="slider2">
<ul>
<li>
<h2>What's 2WebVideo video foundation course anyway?</h2>
<p>2WebVideo's video foundation course is a membership based training program where you get
<strong>full access to nearly 60 video lessons spread over 9 modules</strong> for a very affordable
<strong>fee of $15/week or $50/month! You also get a full access free trial for 1 day.</strong></p>
<p>Yup, that's right! All of <a target="_new" href="http://www.2webvideo.com/video-production.html" title="Video production course">these</a> plus <strong>all of the
new lessons released within the tenure of your membership</strong>. No extra cost, no hidden fees!
<strong><a target="_new" href="http://www.2webvideo.com/members/signup.php" title="Sign Up Now!">Sign up NOW!</a></strong></p>
</li>
<li>
<h2>Why is the fee so low?</h2>
<p>I wanted to show <strong>how to make 5 types of web videos available to as many of you as possible</strong>.
The <a href="http://www.2webvideo.com/">video production course</a> is not only meant for commercial but for
<strong>educational purpose as well</strong>.</p>
<p>For example, my training lessons explain <strong>how to make PowerPoint video - not just slideshow -
which you can upload to YouTube or embed in any webpage for everyone to see.</strong> This is particularly useful for
educational or marketing/sales purpose.</p>
</li>
<li>
<h2>What 2WebVideo video foundation course offers?</h2>
<p>The foundation course offers complete training to make <strong>flawless audio podcast</strong> and individual web videos in <strong>flash, PowerPoint, screencast, and static image on motion</strong>.</p>
<p>Further, the course teaches how to <strong>combine all the individual videos and audio into a single slick final web video ready
for uploading to YouTube or embedding in any webpage.</strong></p>
</li>
</ul>
</div>
</div></div>
</body>
</html>
Type 2: Horizontal Slideshow With Controls Below
In this case we will use the same script but the control arrows will come beneath the slideshow instead of on its 2 sides. Click the arrows to see how the slideshow works. See the demo here also.
Positioning the control arrows below is possible by changing their positions suitably in the page style. Also the slides are wider than earlier. The following are the changes in CSS in the above HTML code marked in big size.
#container{
margin:0 0 0 0;
width:576px;
position:relative;
text-align:left;
}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area adjusts according to parameters here
*/
width:576px;
height:241px;
overflow:hidden;
}
#slider2 {
border:1px solid #F96;
}
#slider2 li{
background:#FFC;
}
#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
display:block;
margin:0;
overflow:hidden;
text-indent:-8000px;
width:35px;
height:52px;
position:absolute;
left:220px;
top:5px;
}
#nextBtn, #nextBtn2{
left:290px;
}
Type 3: Vertical Continuous Slideshow With Controls Below
A vertical slideshow can also be made from the same JavaScript as shown below. As can be seen the slideshow runs uninterrupted. But it can be stopped and controlled by clicking one of the control arrows. Try out yourself (demo here too).
In this case some changes in the CSS code is made, but more importantly the following piece of JavaScript code has been altered marked in big size. The same continuous slideshow can be made ‘horizontal’ by making the parameter ‘vertical’ as ‘false’.
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: true,
speed: 1000,
auto: true,
pause: 2000,
continuous: true
};
Remember, the EasySlider jQuery works based on jQuery library which is referred to in the head section of the HTML code.
Feel free to copy the HTML code above for your use. Hope you will be able to implement the slideshow in your website.
 This article of December 10th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
[...] here: 3 Slideshows With Same jQuery Code – Free & Easy : Video Tutorials … By admin | category: blog script | tags: bolton, different-types, federation, france, [...]
hi bro
nice work
bro can i put these code in blogger if i put how can and which place i put ?
plz reply me
I’m not much familiar with Blogger but let me suggest some ways out. If you have access to the template of the Blogger blog you can include the JavaScripts and the CSS in the head section, and the remaining in the body section. In that case the entire easyslider.js code must come in the head section.
A second option will be to host the entire slideshow in a separate webpage (that is, if you have a host server) and include it in Blogger with the help of <iframe> tag. Hope this helps.