A couple of things. This part may be made external:
Code:
/* jQuery Slide Show Plugin ©2010 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
(function($){
var cre = /\bslide_(\d+)\b/, //regex for individual buttons
sre = / img$/; //regex for selector
$.fn.slideShow = function(cObj){
cObj = cObj || {};
if(!sre.test(this.selector)){
cObj.parent = this.css({position: 'relative', overflow: 'hidden'});
this.data('slideShow', cObj);
$(this.selector + ' img').slideShow(cObj);
return;
}
if(cObj.random){
this.sort(function() {return 0.5 - Math.random();});
}
cObj.count = cObj.count || 0; cObj.rotaterate = cObj.rotaterate || 2500; cObj.ims = [];
cObj.faderate = cObj.faderate || 1500; cObj.counter = cObj.counter || ['', '/'];
var p = [cObj.parent.innerHeight(), cObj.parent.innerWidth()], timer = 0;
cObj.ln = this.hide().css({position: 'absolute', top: 0, left: 0}).hover(function(){cObj.pause = !cObj.nopause;}, function(){cObj.pause = false;}).each(function(i){
cObj.ims[i] = $(this);
var im = $(new Image());
im.bind('load', function(){
cObj.ims[i].data('loaded', true)
.css({marginTop: (p[0] - cObj.ims[i].outerHeight()) / 2, marginLeft: (p[1] - cObj.ims[i].outerWidth()) / 2});
});
if(!i){
im.bind('load', function(){
cObj.ims[0].fadeIn('normal', function(){
if(cObj.showback){
$('#' + cObj.showback).css('backgroundColor', cObj.background || 'black');
}
if(cObj.controls && cObj.active.length){
$(cObj.controls + ' .slide_1').addClass('active');
}
if(cObj.controls){
$(cObj.controls + ' .cObj.count').html(cObj.counter[0] + 1 + cObj.counter[1] + cObj.ln);
}
if(cObj.onslide){
cObj.onslide.call(cObj);
}
timer = setTimeout(cObj.slide, cObj.rotaterate);
});
});
}
im.attr('src', cObj.ims[i].attr('src'));
}).length;
if(cObj.controls){
$(cObj.controls + ' .stop').bind('click', function(e){clearTimeout(timer); cObj.stopped = true; e.preventDefault();});
$(cObj.controls + ' .go').bind('click', function(e){
if(cObj.stopped){
clearTimeout(timer);
cObj.stopped = false;
cObj.slide();
}
e.preventDefault();
});
$(cObj.controls + ' .next').bind('click', function(e){ //next button
clearTimeout(timer);
cObj.stopped = false;
cObj.slide();
cObj.stopped = true;
e.preventDefault();});
$(cObj.controls + ' .prev').bind('click', function(e){ //previous button
clearTimeout(timer);
cObj.ims[cObj.count % cObj.ln].fadeOut(cObj.faderate);
cObj.count = cObj.count - 2 + cObj.ln;
cObj.stopped = false;
cObj.slide();
cObj.stopped = true;
e.preventDefault();
});
$(cObj.controls + ' .first').bind('click', function(e){ //first button
cObj.stopped = true;
clearTimeout(timer);
if(cObj.count % cObj.ln !== 0){
cObj.ims[cObj.count % cObj.ln].fadeOut(cObj.faderate);
cObj.count = cObj.ln - 1;
cObj.stopped = false;
cObj.slide();
cObj.stopped = true;
}
e.preventDefault();
});
$(cObj.controls + ' .last').bind('click', function(e){ //last button
cObj.stopped = true;
clearTimeout(timer);
if(cObj.count % cObj.ln !== cObj.ln - 1){
cObj.ims[cObj.count % cObj.ln].fadeOut(cObj.faderate);
cObj.count = cObj.ln - 2;
cObj.stopped = false;
cObj.slide();
cObj.stopped = true;
}
e.preventDefault();
});
cObj.active = $(cObj.controls + ' [class*="slide_"]').bind('click', function(e){ //individual buttons
var num = this.className.match(cre);
if(num && num[1]){
cObj.stopped = true;
clearTimeout(timer);
if(cObj.count % cObj.ln !== (num[1] - 1 + cObj.ln) % cObj.ln){
cObj.ims[cObj.count % cObj.ln].fadeOut(cObj.faderate);
cObj.count = num[1] - 2 + cObj.ln;
cObj.stopped = false;
cObj.slide();
cObj.stopped = true;
}
}
e.preventDefault();
});
}
cObj.slide = function(){
clearTimeout(timer);
if(cObj.stopped){
return;
}
if(cObj.pause || !cObj.ims[(cObj.count + 1) % cObj.ln].data('loaded')){
clearTimeout(timer);
timer = setTimeout(cObj.slide, 300);
return;
}
cObj.count = cObj.count % cObj.ln;
cObj.ims[cObj.count].fadeOut(cObj.faderate);
cObj.ims[(++cObj.count) % cObj.ln].fadeIn(cObj.faderate, function(){
if(cObj.onslide){
cObj.onslide.call(cObj);
}
clearTimeout(timer);
timer = setTimeout(cObj.slide, cObj.rotaterate);
});
if(cObj.controls && cObj.active.length){
cObj.active.removeClass('active');
$(cObj.controls + ' .slide_' + (cObj.count % cObj.ln + 1)).addClass('active');
}
if(cObj.controls){
$(cObj.controls + ' .count').html(cObj.counter[0] + (cObj.count % cObj.ln + 1) + cObj.counter[1] + cObj.ln);
}
};
}
})(jQuery);
Save it as jsjqslideshow.js and replace it and its opening and closing script tags with:
HTML Code:
<script type="text/javascript" src="jsjqslideshow.js">
/* jQuery Slide Show Plugin ©2010 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>
This part (which is the configuration/activation):
Code:
<script type="text/javascript">
jQuery(function($){
$('.vacation_2').slideShow({onslide: function(){if(this.count === this.ln)this.stopped = true;}, rotaterate: 2000, faderate: 1500, nopause: true, controls: '.show2controls', counter: ['Image ', ' of ']});
});
</script>
For what you are doing, should probably be:
Code:
<script type="text/javascript">
jQuery(function($){
$('.vacation_2').slideShow({rotaterate: 2000, faderate: 1500, controls: '.show2controls'});
});
</script>
And if you are using the same configuration on all pages, can also be made external.
Reply With Quote
Originally Posted by lio
Bookmarks