396 lines
17 KiB
JavaScript
396 lines
17 KiB
JavaScript
/*
|
|
* Slides, A Slideshow Plugin for jQuery
|
|
* Intructions: http://slidesjs.com
|
|
* By: Nathan Searles, http://nathansearles.com
|
|
* Version: 1.1.2
|
|
* Updated: February 14th, 2011
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
(function($) {
|
|
$.fn.slides = function(option) {
|
|
option = $.extend({}, $.fn.slides.option, option);
|
|
return this.each(function() {
|
|
$('.' + option.container, $(this)).children().wrapAll('<div class="slides_control"/>');
|
|
var elem = $(this),
|
|
control = $('.slides_control', elem),
|
|
total = control.children().size(),
|
|
width = control.children().outerWidth(),
|
|
height = control.children().outerHeight(),
|
|
start = option.start - 1,
|
|
effect = option.effect.indexOf(',') < 0 ? option.effect : option.effect.replace(' ', '').split(',')[0],
|
|
paginationEffect = option.effect.indexOf(',') < 0 ? effect : option.effect.replace(' ', '').split(',')[1],
|
|
next = 0,
|
|
prev = 0,
|
|
number = 0,
|
|
current = 0,
|
|
loaded, active, clicked, position, direction, imageParent;
|
|
if (total < 2) {
|
|
return;
|
|
}
|
|
if (start < 0) {
|
|
start = 0;
|
|
};
|
|
if (start > total) {
|
|
start = total - 1;
|
|
};
|
|
if (option.start) {
|
|
current = start;
|
|
};
|
|
if (option.randomize) {
|
|
control.randomize();
|
|
}
|
|
$('.' + option.container, elem).css({
|
|
overflow: 'hidden',
|
|
position: 'relative'
|
|
});
|
|
control.children().css({
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: control.children().outerWidth(),
|
|
zIndex: 0,
|
|
display: 'none'
|
|
});
|
|
control.css({
|
|
position: 'relative',
|
|
width: (width * 3),
|
|
height: height,
|
|
left: -width
|
|
});
|
|
$('.' + option.container, elem).css({
|
|
display: 'block'
|
|
});
|
|
if (option.autoHeight) {
|
|
control.children().css({
|
|
height: 'auto'
|
|
});
|
|
control.animate({
|
|
height: control.children(':eq(' + start + ')').outerHeight()
|
|
}, option.autoHeightSpeed);
|
|
}
|
|
if (option.preload && control.find('img').length) {
|
|
$('.' + option.container, elem).css({
|
|
background: 'url(' + option.preloadImage + ') no-repeat 50% 50%'
|
|
});
|
|
var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
|
|
if ($('img', elem).parent().attr('class') != 'slides_control') {
|
|
imageParent = control.children(':eq(0)')[0].tagName.toLowerCase();
|
|
} else {
|
|
imageParent = control.find('img:eq(' + start + ')');
|
|
}
|
|
control.find('img:eq(' + start + ')').attr('src', img).load(function() {
|
|
control.find(imageParent + ':eq(' + start + ')').fadeIn(option.fadeSpeed, function() {
|
|
$(this).css({
|
|
zIndex: 5
|
|
});
|
|
elem.css({
|
|
background: ''
|
|
});
|
|
loaded = true;
|
|
});
|
|
});
|
|
} else {
|
|
control.children(':eq(' + start + ')').fadeIn(option.fadeSpeed, function() {
|
|
loaded = true;
|
|
});
|
|
}
|
|
if (option.bigTarget) {
|
|
control.children().css({
|
|
cursor: 'pointer'
|
|
});
|
|
control.children().click(function() {
|
|
animate('next', effect);
|
|
return false;
|
|
});
|
|
}
|
|
if (option.hoverPause && option.play) {
|
|
control.children().bind('mouseover', function() {
|
|
stop();
|
|
});
|
|
control.children().bind('mouseleave', function() {
|
|
pause();
|
|
});
|
|
}
|
|
if (option.generateNextPrev) {
|
|
$('.' + option.container, elem).after('<a href="#" class="' + option.prev + '">Prev</a>');
|
|
$('.' + option.prev, elem).after('<a href="#" class="' + option.next + '">Next</a>');
|
|
}
|
|
$('.' + option.next, elem).click(function(e) {
|
|
e.preventDefault();
|
|
if (option.play) {
|
|
pause();
|
|
};
|
|
animate('next', effect);
|
|
});
|
|
$('.' + option.prev, elem).click(function(e) {
|
|
e.preventDefault();
|
|
if (option.play) {
|
|
pause();
|
|
};
|
|
animate('prev', effect);
|
|
});
|
|
if (option.generatePagination) {
|
|
elem.append('<ul class=' + option.paginationClass + '></ul>');
|
|
control.children().each(function() {
|
|
$('.' + option.paginationClass, elem).append('<li><a href="#' + number + '">' + (number + 1) + '</a></li>');
|
|
number++;
|
|
});
|
|
} else {
|
|
$('.' + option.paginationClass + ' li a', elem).each(function() {
|
|
$(this).attr('href', '#' + number);
|
|
number++;
|
|
});
|
|
}
|
|
$('.' + option.paginationClass + ' li:eq(' + start + ')', elem).addClass('active');
|
|
$('.' + option.paginationClass + ' li a', elem).click(function() {
|
|
if (option.play) {
|
|
pause();
|
|
};
|
|
clicked = $(this).attr('href').match('[^#/]+$');
|
|
if (current != clicked) {
|
|
animate('pagination', paginationEffect, clicked);
|
|
}
|
|
return false;
|
|
});
|
|
$('a.link', elem).click(function() {
|
|
if (option.play) {
|
|
pause();
|
|
};
|
|
clicked = $(this).attr('href').match('[^#/]+$') - 1;
|
|
if (current != clicked) {
|
|
animate('pagination', paginationEffect, clicked);
|
|
}
|
|
return false;
|
|
});
|
|
if (option.play) {
|
|
playInterval = setInterval(function() {
|
|
animate('next', effect);
|
|
}, option.play);
|
|
elem.data('interval', playInterval);
|
|
};
|
|
|
|
function stop() {
|
|
clearInterval(elem.data('interval'));
|
|
};
|
|
|
|
function pause() {
|
|
if (option.pause) {
|
|
clearTimeout(elem.data('pause'));
|
|
clearInterval(elem.data('interval'));
|
|
pauseTimeout = setTimeout(function() {
|
|
clearTimeout(elem.data('pause'));
|
|
playInterval = setInterval(function() {
|
|
animate("next", effect);
|
|
}, option.play);
|
|
elem.data('interval', playInterval);
|
|
}, option.pause);
|
|
elem.data('pause', pauseTimeout);
|
|
} else {
|
|
stop();
|
|
}
|
|
};
|
|
|
|
function animate(direction, effect, clicked) {
|
|
if (!active && loaded) {
|
|
active = true;
|
|
switch (direction) {
|
|
case 'next':
|
|
prev = current;
|
|
next = current + 1;
|
|
next = total === next ? 0 : next;
|
|
position = width * 2;
|
|
direction = -width * 2;
|
|
current = next;
|
|
break;
|
|
case 'prev':
|
|
prev = current;
|
|
next = current - 1;
|
|
next = next === -1 ? total - 1 : next;
|
|
position = 0;
|
|
direction = 0;
|
|
current = next;
|
|
break;
|
|
case 'pagination':
|
|
next = parseInt(clicked, 10);
|
|
prev = $('.' + option.paginationClass + ' li.active a', elem).attr('href').match('[^#/]+$');
|
|
if (next > prev) {
|
|
position = width * 2;
|
|
direction = -width * 2;
|
|
} else {
|
|
position = 0;
|
|
direction = 0;
|
|
}
|
|
current = next;
|
|
break;
|
|
}
|
|
if (effect === 'fade') {
|
|
option.animationStart();
|
|
if (option.crossfade) {
|
|
control.children(':eq(' + next + ')', elem).css({
|
|
zIndex: 10
|
|
}).fadeIn(option.fadeSpeed, function() {
|
|
if (option.autoHeight) {
|
|
control.animate({
|
|
height: control.children(':eq(' + next + ')', elem).outerHeight()
|
|
}, option.autoHeightSpeed, function() {
|
|
control.children(':eq(' + prev + ')', elem).css({
|
|
display: 'none',
|
|
zIndex: 0
|
|
});
|
|
control.children(':eq(' + next + ')', elem).css({
|
|
zIndex: 0
|
|
});
|
|
option.animationComplete(next + 1);
|
|
active = false;
|
|
});
|
|
} else {
|
|
control.children(':eq(' + prev + ')', elem).css({
|
|
display: 'none',
|
|
zIndex: 0
|
|
});
|
|
control.children(':eq(' + next + ')', elem).css({
|
|
zIndex: 0
|
|
});
|
|
option.animationComplete(next + 1);
|
|
active = false;
|
|
}
|
|
});
|
|
} else {
|
|
option.animationStart();
|
|
control.children(':eq(' + prev + ')', elem).fadeOut(option.fadeSpeed, function() {
|
|
if (option.autoHeight) {
|
|
control.animate({
|
|
height: control.children(':eq(' + next + ')', elem).outerHeight()
|
|
}, option.autoHeightSpeed, function() {
|
|
control.children(':eq(' + next + ')', elem).fadeIn(option.fadeSpeed);
|
|
});
|
|
} else {
|
|
control.children(':eq(' + next + ')', elem).fadeIn(option.fadeSpeed, function() {
|
|
if ($.browser.msie) {
|
|
$(this).get(0).style.removeAttribute('filter');
|
|
}
|
|
});
|
|
}
|
|
option.animationComplete(next + 1);
|
|
active = false;
|
|
});
|
|
}
|
|
} else {
|
|
control.children(':eq(' + next + ')').css({
|
|
left: position,
|
|
display: 'block'
|
|
});
|
|
if (option.autoHeight) {
|
|
option.animationStart();
|
|
control.animate({
|
|
left: direction,
|
|
height: control.children(':eq(' + next + ')').outerHeight()
|
|
}, option.slideSpeed, function() {
|
|
control.css({
|
|
left: -width
|
|
});
|
|
control.children(':eq(' + next + ')').css({
|
|
left: width,
|
|
zIndex: 5
|
|
});
|
|
control.children(':eq(' + prev + ')').css({
|
|
left: width,
|
|
display: 'none',
|
|
zIndex: 0
|
|
});
|
|
option.animationComplete(next + 1);
|
|
active = false;
|
|
});
|
|
} else {
|
|
option.animationStart();
|
|
control.animate({
|
|
left: direction
|
|
}, option.slideSpeed, function() {
|
|
control.css({
|
|
left: -width
|
|
});
|
|
control.children(':eq(' + next + ')').css({
|
|
left: width,
|
|
zIndex: 5
|
|
});
|
|
control.children(':eq(' + prev + ')').css({
|
|
left: width,
|
|
display: 'none',
|
|
zIndex: 0
|
|
});
|
|
option.animationComplete(next + 1);
|
|
active = false;
|
|
});
|
|
}
|
|
}
|
|
if (option.pagination) {
|
|
$('.' + option.paginationClass + ' li.active', elem).removeClass('active');
|
|
$('.' + option.paginationClass + ' li:eq(' + next + ')', elem).addClass('active');
|
|
}
|
|
}
|
|
};
|
|
});
|
|
};
|
|
$.fn.slides.option = {
|
|
preload: false,
|
|
preloadImage: '../images/loading.gif',
|
|
container: 'slides_container',
|
|
generateNextPrev: false,
|
|
next: 'next',
|
|
prev: 'prev',
|
|
pagination: true,
|
|
generatePagination: true,
|
|
paginationClass: 'pagination',
|
|
fadeSpeed: 350,
|
|
slideSpeed: 350,
|
|
start: 1,
|
|
effect: 'slide',
|
|
crossfade: false,
|
|
randomize: false,
|
|
play: 0,
|
|
pause: 0,
|
|
hoverPause: false,
|
|
autoHeight: false,
|
|
autoHeightSpeed: 350,
|
|
bigTarget: false,
|
|
animationStart: function() {},
|
|
animationComplete: function() {}
|
|
};
|
|
$.fn.randomize = function(callback) {
|
|
function randomizeOrder() {
|
|
return (Math.round(Math.random()) - 0.5);
|
|
}
|
|
return ($(this).each(function() {
|
|
var $this = $(this);
|
|
var $children = $this.children();
|
|
var childCount = $children.length;
|
|
if (childCount > 1) {
|
|
$children.hide();
|
|
var indices = [];
|
|
for (i = 0; i < childCount; i++) {
|
|
indices[indices.length] = i;
|
|
}
|
|
indices = indices.sort(randomizeOrder);
|
|
$.each(indices, function(j, k) {
|
|
var $child = $children.eq(k);
|
|
var $clone = $child.clone(true);
|
|
$clone.show().appendTo($this);
|
|
if (callback !== undefined) {
|
|
callback($child, $clone);
|
|
}
|
|
$child.remove();
|
|
});
|
|
}
|
|
}));
|
|
};
|
|
})(jQuery); |