Jquery Step Carousel Viewer
(No Ratings Yet)
Loading ...Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose. Some highlights of this script:
*
Contents for the Step Carousel Viewer can be defined either directly inline on the page or via Ajax and extracted from an external file instead.
*
Ability to specify whether panels should wrap after reaching the two ends, or stop at the first/last panel.
*
Panel persistence supported, so the last viewed panel can be remembered and recalled within the same browser session.
*
Ability for Carousel to auto rotate as dictated by the new parameter: autostep: {enable:true, moveby:1, pause:3000} During this mode, Carousel pauses onMouseover, resumes onMouseout, and clicking Carousel halts auto rotation altogether. v1.6
*
Carousel now stops at the very last visible panel, instead of the last panel itself. In other words, no more white space at the end. v1.6
*
Option to specify two navigational images that’s automatically positioned to the left and right of the Carousel Viewer to move the panels back and forth. v1.4
Step 1: Add the following script to the
section of your page:< !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" lang="en" xml:lang="en">
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="stepcarousel.js">
/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 270px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style></html>
Step 2: Add the following HTML to the
of your page, which corresponds to the HTML for the first demo you see above:<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>
<div class="panel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>
<div class="panel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>
<div class="panel">
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>
<div class="panel">
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</div>
</div>
</div>
<p>
<b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span><br />
<a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a> <br />
<a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>
</p>
FF1+ IE7+ Opr9+
Step Carousel Viewer v1.6.1
Author: Dynamic Drive
Note: Oct 21st, 08′- Updated to v 1.6.1 with minor bug fixes: See changelog.
Description: Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose. Some highlights of this script:
*
Contents for the Step Carousel Viewer can be defined either directly inline on the page or via Ajax and extracted from an external file instead.
*
Ability to specify whether panels should wrap after reaching the two ends, or stop at the first/last panel.
*
Panel persistence supported, so the last viewed panel can be remembered and recalled within the same browser session.
*
Ability for Carousel to auto rotate as dictated by the new parameter: autostep: {enable:true, moveby:1, pause:3000} During this mode, Carousel pauses onMouseover, resumes onMouseout, and clicking Carousel halts auto rotation altogether. v1.6
*
Carousel now stops at the very last visible panel, instead of the last panel itself. In other words, no more white space at the end. v1.6
*
Option to specify two navigational images that’s automatically positioned to the left and right of the Carousel Viewer to move the panels back and forth. v1.4
Demo #1: Auto rotation enabled (every 3 seconds, 1 panel each time), left/right nav buttons enabled, persistence enabled.
Showing panels 4 to 5
Demo #2: Wrap around disabled, left/right nav buttons enabled.
Current Panel: 1 Total Panels: 5
Back 1 Panel Forward 1 Panel
To 1st Panel Forward 2 Panels
Demo #3: Variable content widths, left/right nav buttons disabled, moves 2 panels at a time.
1
2
3
4
5
6
7
Back Forward
Currently showing panels: 1 to 3
Directions Developer’s View
Step 1: Add the following script to the
section of your page:Select All
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The code above references two external .js files, which you need to download below (right click/ select “Save As”):
1. stepcarousel.js (2 variables near the top you can customize)
2. jquery-1.2.6.pack.js
Step 2: Add the following HTML to the
of your page, which corresponds to the HTML for the first demo you see above:Select All
Current Panel: Total Panels:
Back 1 Panel Forward 1 Panel
To 1st Panel Forward 2 Panels
That’s it for installation, but this script is only as good as your understanding of it, so time for some documentation.
Basic Set Up Information
The HTML for a Step Carousel viewer follows a set structure consisting of 3 levels of nested DIVs- the main “carousel” DIV, an inner “belt” DIV, finally followed by “panel” DIVs that each hold some actual content:
Sample Step Carousel HTML:
<div id="mygallery" class="stepcarousel"> <div class="belt"> <div class="panel"> Panel 1 content here... </div> <div class="panel"> Panel 2 content here... </div> <div class="panel"> Panel 3 content here... </div> </div> </div>
All the IDs and class names (in red above) can be arbitrary in their values, but must be defined for the script to know what’s what. Each piece of content you wish to show would then be wrapped around its own “panel” DIV (in yellow), whether it’s just an image, or rich HTML etc.
Moving on, we come to the sample HTML for the buttons/ links used to navigate a Step Carousel Viewer.
Sample HTML for Carousel Viewer navigation:
<p class="samplebuttons">
<a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a> <br />
<a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>
</p>
Simply call the two methods stepBy() or stepTo() using the ID of your Carousel Viewer plus how much to move by anywhere on your page.
Demo: http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
Download: http://www.dynamicdrive.com/dynamicindex4/stepcarousel.js (2 variables near the top you can customize)
http://www.dynamicdrive.com/jquery/jquery-1.2.6.pack.js
Source: http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
Related Listings:
- Jquery Step Carousel Viewer Step Carousel Viewer displays images or even rich HTML by...
- Simple 3D Carousel This is a very basic 3D Carousel. This example will...
- Carousel Component Script The intent of my carousel component was to fill in...
- Simple Infinite Carousel with jQuery Making a jQuery Infinite Carousel with nice features from...
- 3D Carousel Slideshow Carousel Slideshow is a fabulous DHTML script for the showcasing...
Do you like this post?
Tags:
1 Comment »
RSS feed for comments on this post. TrackBack URL
Leave a comment
|
|
|
September 23rd, 2009 at 1:27 pm
Very easy to setup and use.
One question: when the last frame is displayed, the “belt” is scrolled right so that frame # 1 is displayed next. Can this be easily done without the visable scrolling of the entire belt? That is, I would like to jump from N to 1 without the rapid scroll right.
Thanks
Chas