jQuery Content Thumbnail Slider V2.0: jsCarousel V2.0
This is the updated version of jsCarousel, click here for original post.
jsCarousel v2.0 is a jquery slider plugin that slides contents in multi direction. Now it supports both horizontal and vertical orientation, see the screen shot below. jsCarousel v2.0 slider can be used as a feature content slider as well. You can put any kind of contents you want whether images, text, videos, news etc. it's up to you. One interesting thing about jsCarousel v2.0 slider is that you can make simple image gallery with thumbnail support by using it. jsCarousel v2.0 slider plugin gives you the source of image via callback function, when you click on some image within slider. See Using jsCarousel v2.0 Slider section below to get an idea about using the callback function.
- orientation: To use horizontal slider set orientation value to 'h' and for vertical slider set orientation value to 'v', default is 'h'.
- masked: Boolen value, set masked to true if you want overlay effect, default is true.
- scrollspeed: Sliding speed in milliseconds for slider contents, default is 500.
- delay: The delay in milliseconds between each slide shift, default is 5000.
- itemstodisplay: Maximum no of visible items, default is 5.
- autoscroll: If true slider contents will automatically shuffle, default is false.
- circular: if true slider will start over after last item, if false slider will stop at last item if moving forward and at first item if moving backward. Circular property is only meaningful with autoscroll = false, as autoscroll is already circular. default value is true.
- onthumbnailclick: Callback function to be called on each image click, jsCarousel slider will automatically find images and bind the callback function if provided.
In your HTML file add the following in the head section.
- Add a reference to latest jQuery script
- Add a reference to jsCarousel-v2.0.0.js file
- Add a reference to jsCarousel-v2.0.0.css file
Create a block element (div) within the body of you HTML file, assign it some id e.g 'jsCarousel'. Next you need to put some block elements (div) within above created element. All the first level(direct children) block elements will be used as slider items. You are free to add whatever elements you like within these first level child elements. See the "divs" in the complete source code of the sample below. I've put single image and a span element within each first level elements, you can put some more interesting contents. e.g. News with images
Now add the following code to your HTML file’s head section.
<script type="text/javascript">
$(document).ready(function() {
$('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });
});
</script>
Here is the complete code for the example above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Thumbnail/Content Slider: jsCarouselV2.0.0</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jsCarousel-2.0.0.js" type="text/javascript"></script>
<link href="jsCarousel-2.0.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' });
$('#carouselh').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 5, orientation: 'h' });
$('#carouselhAuto').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });
});
</script>
<style type="text/css">
body
{
background-color: #2F2F2F;
padding-top: 40px;
}
#demo-wrapper
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
padding: 40px 20px 0px 20px;
}
#demo-left
{
width: 15%;
float: left;
}
#demo-right
{
width: 85%;
float: left;
}
#hWrapperAuto
{
margin-top: 20px;
}
#demo-tabs
{
width: 100%;
height: 50px;
color: White;
margin: 0;
padding: 0;
}
#demo-tabs div.item
{
height: 35px;
float: left;
background-color: #2F2F2F;
border: solid 1px gray;
border-bottom: none;
padding: 0;
margin: 0;
margin-left: 10px;
text-align: center;
padding: 10px 4px 4px 4px;
font-weight: bold;
}
#contents
{
width: 100%;
margin: 0;
padding: 0;
color: White;
font: arial;
font-size: 11pt;
}
#demo-tabs div.item.active-tab
{
background-color: Black;
}
#demo-tabs div.item.active-tabc
{
background-color: Black;
}
#v1, #v2
{
margin: 20px;
}
.visible
{
display: block;
}
.hidden
{
display: none;
}
#oldWrapper
{
margin-left: 100px;
}
#contents a
{
color: yellow;
}
#contents a:hover
{
text-decoration: none;
color: Gray;
}
.heading
{
font-size: 20pt;
font-weight: bold;
}
</style>
</head>
<body>
<div id="contents">
<div id="v2">
<span class="heading">jsCarousel V 2.0.0</span> <a href="http://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0">
Back To Post</a>
<p>
This is version 2.0.0 of jsCarousel plugin, it supports both horizontal and vertical
sliders. You can also control the mask effect directly from the plugin initializer
function instead of modifying the CSS code in jsCarousel v2.0.0. To see demonstration
for jsCarousel v 1.0.0 <a href="http://www.egrappler.com/contents/jsCarousel/Demo/index.htm">
click here.</a></p>
<div id="demo-wrapper">
<div id="demo-left">
<div id="vWrapper">
<div id="carouselv">
<div>
<img alt="" src="images/img_1.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_2.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_3.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_4.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_5.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_6.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_7.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_8.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_9.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_10.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_11.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_12.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_13.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_14.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_15.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_16.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
</div>
</div>
</div>
<div id="demo-right">
<div id="hWrapper">
<div id="carouselh">
<div>
<img alt="" src="images/img_1.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_2.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_3.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_4.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_5.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_6.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_7.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_8.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_9.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_10.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_11.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_12.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_13.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_14.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_15.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_16.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
</div>
</div>
<div id="hWrapperAuto">
<div id="carouselhAuto">
<div>
<img alt="" src="images/img_1.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_2.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_3.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_4.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_5.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_6.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_7.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_8.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_9.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_10.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_11.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_12.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_13.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_14.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_15.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_16.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
For useful web development and jQuery plugins, visit http://www.egrappler.com