jquery.dumbcrossfade-2.0.js
Documentation
jquery.dumbCrossFade is intended to be a light-weight slide transition that enables external manipulation.
Tested to work with jQuery 1.4 and used in over 200 ecommerce websites as a base tool.
option parameters:
slideType : can be one of the following: 'slidehorizontal', 'slidevertical', 'fade', default 'slidehorizontal'
index : integer, is zero-based, is what item to start from, default 0
showTime : integer, is how long to show an item in milliseconds, default 5000
transitionTime : integer, is how long the fade takes in milliseconds, default 1000
doHoverPause : boolean, sets if pausing on mouse over is enabled or not, default true
maxZIndex : integer, is the z-index of the element being faded into view. The faded out is maxZIndex - 1, default 100
slideChange : event function, is fired when the slide has changed, passes in index of current slide, default null
slideDirection : can be one of the following: 'forward', 'backward', default 'forward'
fadeInOut : only useful when slideType is 'slidehorizontal' or 'slidevertical' for a transition slide-wipe affect, default false
//You can use options like so:
var options = {
'doHoverPause' : false,
slideChange : function (currentSlideIndex) {
alert(currentSlideIndex);
}
};
$('.slide').dumbCrossFade(options);
//instance methods:
$(jquerySelector).dumbCrossFade('stop') : stops auto playing slides
$(jquerySelector).dumbCrossFade('start') : starts auto playing slides
$(jquerySelector).dumbCrossFade('jump',index) : jumps to slide index specified, zero-based index
$(jquerySelector).dumbCrossFade('next') : goes to the next slide
$(jquerySelector).dumbCrossFade('previous') : goes to the previous slide
Supports full jQuery chaining, instance methods and settings override.
for example:
$('.slides').dumbCrossFade();
$('a.next').click(function() {
$('.slides').dumbCrossFade('next');
});
Code Example
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://storage.sebringcreative.s3.amazonaws.com/jquery/jquery.dumbcrossfade-2.0.min.js"></script>
<style type="text/css">
/* <![CDATA[ */
.dumbCrossFade {
width:904px;
height:300px;
display:block;
cursor:pointer;
border:none;
position:relative;
overflow:hidden;
}
.dumbCrossFade .dumbItem {
display:none;
position:absolute;
top:0;
left:0;
border:none;
}
.dumbCrossFade .dumbItem img {
border:none;
}
.dumbCrossFade * {
border:none;
text-decoration:none;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.dumbCrossFade .dumbItem').dumbCrossFade({'slideType':'slidevertical','fadeInOut':true});
});
/* ]]> */
</script>
<div class="dumbCrossFade">
<div class="dumbItem">
<a href="Contact.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image5.jpg" alt="Contact Us" \></a>
</div>
<div class="dumbItem">
<a href="CaseStudies.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image1.jpg" alt="Case Studies" \></a>
</div>
<div class="dumbItem">
<a href="Print.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image2.jpg" alt="Print Work" \></a>
</div>
<div class="dumbItem">
<a href="Web.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image3.jpg" alt="Web Work" \></a>
</div>
<div class="dumbItem">
<a href="Design.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image4.jpg" alt="Design" \></a>
</div>
</div>
DEMO 1 (with 'hoverPause' turned on and slideType 'slidevertical' and fadeInOut true)
DEMO 2 (with 'hoverPause' turned off and slideType 'fade')
DEMO 3 (using 2.0 instance methods and events to create a thumbnail slideshow)
Revisions
* version 2.0 - Posted 2/3/2010
- added jQuery chaining style with method instance accessor (the correct way)
- added option "slideType" 'fade','slidevertical','slidehorizontal'
- added option "direction" 'forward','backward'
- added option "fadeInOut" boolean
- added methods "next", "previous"
* version 1.3 - Posted 11/20/2009, removed 'methods' option, returned public accessor and enabled method chaining
Use public accessor functions like so:
var $mySlides = $('#myslides').dumbCrossFade();
$mySlides.stop(); // stops the transitions
$mySlides.start(); // starts the transitions
$mySlides.jump(2); // jumps to slide 3 since zero based
OR can use like $('#myslides').dumbCrossFade().stop().start().jump(2) with method chaining although it
doesn't have much use currently. Maybe later?
* version 1.2 - Posted 10/25/2009, new options 'slideChange' and 'methods' to allow for instance manipulation
'slideChange' is a function pointer that can be passed in and is called once a slide has changed,
Use it like so:
var options = {
'slideChange' : function (currentSlideIndex) {
alert('The slide ' + currentSlideIndex + ' is currently showing');
}
};
$('#myslides').dumbCrossFade(options);
'methods' is an empty object passed in to give you a reference to the current instance and be able to manipulate it
It exposes 3 new methods:
stop() will stop the dumbCrossFade instance from playing
start() will start auto playing the dumbCrossFade instance
jump(indexToJumpTo) will jump the dumbCrossFade instance to a particular slide but also stops auto playing.
You will need to call start() again after calling jump(indexToJumpTo) to start the auto play
Use it like so:
var dcfMethods = {};
var options = {
'methods' : dcfMethods
};
$('#myslides').dumbCrossFade(options);
dcfMethods.start(); // will make your instance auto play
dcfMethods.stop(); // will stop your instance from auto playing
dcfMethods.jump(2); // will jump to a particular slide but also stop the auto play
* version 1.1 - Posted 10/6/2009, includes a fade approach to avoid any flickering using z-index
* version 1.0 - Posted 10/2/2009, includes base implementation, simple cross fade
