 |
 |
« What To Look For When Hiring An SEO Service | Create Free Online jQuery Catalog With Fancy Zoom »
| Tweet |
|
|
|
Online slideshow comes in various types, and webmasters prefer one over another based on ease of use and its appearance.
In the past tutorials in this blog on creating slideshows, there were some that are not difficult to implement like the one using iframe tag, or the onMouseover slideshow, or the versatile photo gallery using ‘swissarmy.js’, though a few like the Galleria slideshow is a little tougher to do.
In this video article we will take a slightly different route and create a slider-type slideshow with jQuery JavaScript.
The advantage with this slideshow is that since one slide is shown at a time in a small designated place, you can have large amount of content to come in subsequent slides. This means you are enjoying the presence of a large content – something that search engines like – yet not permitting them to eat up space on your webpage.
Take a look at the slideshow we have top right to show our featured videos.
The picture below shows that the 2 ‘arrows’ on either side of the slide control the slideshow as it moves to the left or right.
This slideshow is made using the jQuery script created by Jacob Gube of Six Revisions. Jacob has a good tutorial explaining the steps for using his script to create jQuery slideshow.
The slideshow is shown below. There are 3 slides here. Click on the right arrow to let subsequent slides flow in from right.
Note that the first and the last slide respectively have only the right and the left arrow.
The middle slide has both arrows, and that indicates there are more slide(s) on either side. You can of course have as many slides as you need.
The slides have texts and images, but it is possible to have videos also in them. The html code for this jQuery slideshow is given below with short illustration; before that let us look at the slideshow.
HTML Code
The html code refers to the jQuery library in the head section. Also in the head section is the JavaScript code by Jacob pertaining to the slideshow.
Besides, the styles governing the appearance of the slideshow are spelled out in the head section. Both the CSS styles and Jacob’s JavaScript can be made to external files and referred to in the head section. This frees up the jostling of codes in the page html making it easy to understand the flow of the overall code.
<html><head>
<title>jQuery Slidehow: 2WebVideo Demo</title>
<style type="text/css">
<!--
/**
* Slideshow style
*/
#slideshow {
margin:0;
width:520px;
text-align:center;
height:155px;
background:transparent url(bg-slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:440px;
height:155px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:420px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:155px;
}
/**
* Slideshow controls style
*/
.control {
display:block;
width:35px;
height:155px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(control-left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(control-right.jpg) no-repeat 0 0;
}
/**
* Style rules for this Demo
*/
a {
color: #009;
text-decoration:underline;
}
a:hover {
text-decoration:none;
color: #f90;
}
body {
background:#fff;
margin: 0;
}
.slide p {
margin:10px;
text-align:left;
font:normal 13px Verdana, Geneva, sans-serif;
color:#444;
}
.slide h2 {
margin:10px;
text-align:left;
font:italic 21px Georgia, "Times New Roman", Times, serif;
color:#666;
margin:0 0 15px 5px;
}
.slide img {
float:right;
margin:0 8px;
border: 3px double #999;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 440;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
</head>
<body>
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<h2><a href="">This Is The First Slide</a></h2>
<p><a href=""><img src="image-1.jpg" alt="Image of the first slide" width="150" height="100" /></a>Details about the first slide can be writen here.</p>
<p>Note the image and the heading are hyperlinked.</p>
</div>
<div class="slide">
<h2><a href="">The Second Slide, This One</a></h2>
<p><a href=""><img src="image-2.jpg" width="150" height="100" alt="All about the second image" /></a>The second slide can be detailed here.</p>
<p>Note the image and the heading are hyperlinked. You may create hyperlinks for texts as well.</p>
</div>
<div class="slide">
<h2><a href="">Now Is The Turn For The Third Slide</a></h2>
<p><a href=""><img src="image-3.jpg" width="150" height="100" alt="This thumbnail image is for the third slide" /></a>Write about the third slide here in brief.</p>
<p>As told before the image and the heading are hyperlinked. And <a href="">this is an example of text hyperlink</a>.</p>
</div>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</body></html>![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=84610dfd-070f-478e-bf1d-e83436875d51)
| Tweet |
|
|
|
This article of October 19th, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
