Permalink
Browse files

Fade now works without flashing, updated images object to support lin…

…ks, add some more documentation
  • Loading branch information...
1 parent f64a4c5 commit 42182a5b9885c6d452edd7ab11b8cff1e8a4145f McManusM committed Jul 22, 2009
Showing with 32 additions and 16 deletions.
  1. +32 −16 jquery.fadeAble.js
View
48 jquery.fadeAble.js 100644 → 100755
@@ -21,33 +21,43 @@
// Go through the matched elements and return the jQuery object.
this.each(function(){
var container = this;
- var containerImage = $(container).children('img');
+ var defaultLink = $(container).children('a');
+ defaultLink.addClass("fadeAble")
+ var defaultImage = $(defaultLink).children('img');
+ // Let's make sure things don't start jumping around all crazy like
$(container).css({
position: 'relative',
- height: $(containerImage).height(),
- width: $(containerImage).width()
+ height: $(defaultImage).height(),
+ width: $(defaultImage).width()
});
+ // Add the additional images inside your container
$(options.images).each(function(){
- $(container).append('<img style="display:none" src="'+this+'" />');
+ $(container).append('<a href="'+this.href+'" class="fadeAble" style="display:none" title="'+this.title+'"><img src="'+this.src+'" /></a>');
});
- $(container).children('img').css({
+ // Make sure things line up nicely
+ $(container).children('a').css({
position: 'absolute',
top: 0,
left: 0
});
//prepend $(img:first).src to array
- options.images.unshift($(container).children('img:first').attr('src'));
+ options.images.unshift({
+ "src": $(defaultImage).attr('src'),
+ "href": $(defaultLink).attr('src'),
+ "title": $(defaultLink).attr('title')
+ });
+
if (options.controlsShow) {
$(this).append(
- ' <span class="button" id="'+options.prevId+'">' +
- '<a href=\"javascript:void(0);\">'+
- options.prevText +'</a></span> <span class="button" id="'+options.nextId+'">' +
- '<a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'
+ '<span class="button" style="z-index:2" id="'+options.prevId+'">' +
+ '<a href=\"javascript:void(0);\">'+options.prevText +'</a></span>' +
+ '<span class="button" style="z-index:2" id="'+options.nextId+'">' +
+ '<a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'
);
$("#"+options.nextId).click(function(){ fade("next", container); });
@@ -62,21 +72,27 @@
});
function fade(direction, container) {
- if (options.timeout)
+ if (options.timeout) {
clearTimeout(options.timeout);
+ }
+ //Figure out what the next index should be
var nextIndex;
- if (direction == 'prev')
+ if (direction == 'prev') {
nextIndex = ( options.current == 0 ) ? options.images.length-1 : options.current-1;
- else
+ } else {
nextIndex = ( options.current == options.images.length-1 ) ? 0 : options.current+1;
+ }
- var imgs = $(container).children('img');
- imgs.eq(options.current).fadeOut(options.speed);
- imgs.eq(nextIndex).fadeIn(options.speed);
+ // Animate the transition
+ var imgs = $(container).children('a.fadeAble');
+ imgs.hide();
+ imgs.eq(options.current).show().css('z-index', '0');
+ imgs.eq(nextIndex).css('z-index', '1').fadeIn(options.speed);
options.current = nextIndex;
+ // Reset the time
if (options.loop) {
options.timeout = setTimeout(function(){
fade("next", container);

0 comments on commit 42182a5

Please sign in to comment.