/*
background stretcher jquery plugin
� 2011 ajaxblender.com
for any questions please visit www.ajaxblender.com
or email us at support@ajaxblender.com
version: 2.0.1
*/
;(function($){
/* variables */
var container = null;
var alllis = '', containerstr = '';
var element = this;
var _bgstretcherpause = false;
var _bgstretcheraction = false;
var _bgstretchertm = null;
var random_line = new array();
var random_temp = new array();
var r_image = 0;
var swf_mode = false;
var img_options = new array();
$.fn.bgstretcher = function(settings){
if ($('.bgstretcher-page').length || $('.bgstretcher-area').length) {
if(typeof(console) !== 'undefined' && console != null) console.log('more than one bgstretcher');
return false;
}
settings = $.extend({}, $.fn.bgstretcher.defaults, settings);
$.fn.bgstretcher.settings = settings;
function _build(body_content){
if(!settings.images.length){ return; }
_genhtml(body_content);
containerstr = '#' + settings.imagecontainer;
container = $(containerstr);
alllis = '#' + settings.imagecontainer + ' li';
$(alllis).hide().css({'z-index': 1, overflow: 'hidden'});
if(!container.length){ return; }
$(window).resize(function(){
_resize(body_content)
});
_resize(body_content);
var stratelement = 0;
/* rebuild images for simpleslide */
if (settings.transitioneffect == 'simpleslide') {
if (settings.sequencemode == 'random') {
if(typeof(console) !== 'undefined' && console != null) {
console.log('effect \'simpleslide\' don\'t be to use with mode random.');
console.log('mode was automaticly set in normal.');
}
}
$(alllis).css({'float': 'left', position: 'static'});
$(alllis).show();
if ($.fn.bgstretcher.settings.slidedirection == 'nw' || $.fn.bgstretcher.settings.slidedirection == 'ne') {
$.fn.bgstretcher.settings.slidedirection = 'n';
}
if ($.fn.bgstretcher.settings.slidedirection == 'sw' || $.fn.bgstretcher.settings.slidedirection == 'se') {
$.fn.bgstretcher.settings.slidedirection = 's';
}
if ($.fn.bgstretcher.settings.slidedirection == 's' || $.fn.bgstretcher.settings.slidedirection == 'e') {
settings.sequencemode = 'back';
$(alllis).removeclass('bgs-current');
$(alllis).eq($(alllis).length - $.fn.bgstretcher.settings.startelementindex - 1).addclass('bgs-current');
if ($.fn.bgstretcher.settings.slidedirection == 'e') {
l = $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) * $(containerstr).width()*(-1);
t = 0;
} else { // s
t = $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) * $(containerstr).height()*(-1);
l = 0;
}
$(containerstr+' ul').css({left: l+'px', top: t+'px'});
} else {
settings.sequencemode = 'normal';
if ($.fn.bgstretcher.settings.startelementindex != 0) {
if ($.fn.bgstretcher.settings.slidedirection == 'n') {
t = $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) * $(containerstr).height()*(-1);
l = 0;
} else { // w
l = $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) * $(containerstr).width()*(-1);
t = 0;
console.log(l);
}
$(containerstr+' ul').css({left: l+'px', top: t+'px'});
}
}
}
if ($(settings.buttonnext).length || $(settings.buttonprev).length || $(settings.pagination).length){
if (settings.sequencemode == 'random') {
if(typeof(console) !== 'undefined' && console != null) {
console.log('don\'t use random mode width prev-button, next-button and pagination.');
}
} else {
/* prev and next buttons init */
if ($(settings.buttonprev).length){
$(settings.buttonprev).addclass('bgstretchernav bgstretchernavprev');
$(settings.buttonprev).click(function(){
$.fn.bgstretcher.buttonslide('prev');
});
}
if ($(settings.buttonnext).length){
$(settings.buttonnext).addclass('bgstretchernav bgstretchernavnext');
$(settings.buttonnext).click(function(){
$.fn.bgstretcher.buttonslide('next');
});
}
/* pagination */
if ($(settings.pagination).length) {
$.fn.bgstretcher.pagination();
}
}
}
/* random mode init */
if (settings.sequencemode == 'random') {
var i = math.floor(math.random()*$(alllis).length);
$.fn.bgstretcher.buildrandom(i);
if (settings.transitioneffect != 'simpleslide') {
$.fn.bgstretcher.settings.startelementindex = i;
}
stratelement = i;
} else {
if ($.fn.bgstretcher.settings.startelementindex > ($(alllis).length - 1)) $.fn.bgstretcher.settings.startelementindex = 0;
stratelement = $.fn.bgstretcher.settings.startelementindex;
if (settings.transitioneffect == 'simpleslide') {
if ($.fn.bgstretcher.settings.slidedirection == 's' || $.fn.bgstretcher.settings.slidedirection == 'e') {
stratelement = $(alllis).length - 1 - $.fn.bgstretcher.settings.startelementindex;
}
}
}
$(alllis).eq(stratelement).show().addclass('bgs-current');
$.fn.bgstretcher.loadimg($(alllis).eq(stratelement));
/* go slideshow */
if(settings.slideshow && $(alllis).length > 1){
_bgstretchertm = settimeout('$.fn.bgstretcher.slideshow(\''+$.fn.bgstretcher.settings.sequencemode+'\', -1)', settings.nextslidedelay);
}
};
function _resize(body_content){
var winw = 0;
var winh = 0;
var conth = 0;
var contw = 0;
if ($('body').hasclass('bgstretcher-container')) {
winw = $(window).width();
winh = $(window).height();
if (($.browser.msie) && (parseint(jquery.browser.version) == 6)) {
$(window).scroll(function(){
$('#'+settings.imagecontainer).css('top', $(window).scrolltop());
});
}
} else {
$('.bgstretcher').css('position', 'absolute').css('top', '0px');
winw = body_content.width();
winh = body_content.height();
}
var imgw = 0, imgh = 0;
var leftspace = 0;
// max image size
if(settings.maxwidth != 'auto'){
if (winw > settings.maxwidth){
leftspace = (winw - settings.maxwidth)/2;
contw = settings.maxwidth;
} else contw = winw;
} else contw = winw;
if(settings.maxheight != 'auto'){
if (winh > settings.maxheight){
conth = settings.maxheight;
} else conth = winh;
} else conth = winh;
// update container's size
container.width(contw);
container.height(conth);
// non-proportional resize
if(!settings.resizeproportionally){
imgw = conth;
imgh = conth;
} else {
var initw = settings.imagewidth, inith = settings.imageheight;
var ratio = inith / initw;
imgw = contw;
imgh = math.round(contw * ratio);
if(imgh < conth){
imgh = conth;
imgw = math.round(imgh / ratio);
}
}
// anchoring
var mar_left = 0;
var mar_top = 0;
var anchor_arr;
if ($.fn.bgstretcher.settings.anchoring != 'left top') {
anchor_arr = ($.fn.bgstretcher.settings.anchoring).split(' ');
if (anchor_arr[0] == 'right') {
mar_left = (winw - contw);
} else {
if (anchor_arr[0] == 'center') mar_left = math.round((winw - contw)/2);
}
if (anchor_arr[1] == 'bottom') {
mar_top = (winh - conth);
} else {
if (anchor_arr[1] == 'center') {
mar_top = math.round((winh - conth)/2);
}
}
container.css('marginleft', mar_left+'px').css('margintop', mar_top+'px');
}
mar_left = 0;
mar_top = 0;
if ($.fn.bgstretcher.settings.anchoringimg != 'left top') {
anchor_arr = ($.fn.bgstretcher.settings.anchoringimg).split(' ');
if (anchor_arr[0] == 'right') {
mar_left = (contw - imgw);
} else {
if (anchor_arr[0] == 'center') mar_left = math.round((contw - imgw)/2);
}
if (anchor_arr[1] == 'bottom') {
mar_top = (conth - imgh);
} else {
if (anchor_arr[1] == 'center') {
mar_top = math.round((conth - imgh)/2);
}
}
}
img_options['mar_left'] = mar_left;
img_options['mar_top'] = mar_top;
// apply new size for images
if (container.find('li:first').hasclass('swf-mode')) {
var path_swf = container.find('li:first').html();
container.find('li:first').html('
');
var header = new swfobject('flash/stars.swf', 'flash-obj', contw, conth, '9');
header.addparam('wmode', 'transparent');
header.write('bgstretcher-flash');
};
img_options['imgw'] = imgw;
img_options['imgh'] = imgh;
if(!settings.resizeanimate){
container.children('ul').children('li.img-loaded').find('img').css({'marginleft': img_options["mar_left"]+'px', 'margintop': img_options["mar_top"]+'px'});
container.children('ul').children('li.img-loaded').find('img').css({'width': img_options["imgw"]+'px', 'height': img_options["imgh"]+'px'});
} else {
container.children('ul').children('li.img-loaded').find('img').animate({'marginleft': img_options["mar_left"]+'px', 'margintop': img_options["mar_top"]+'px'}, 'normal');
container.children('ul').children('li.img-loaded').find('img').animate({'width': img_options["imgw"]+'px', 'height': img_options["imgh"]+'px'}, 'normal');
}
$(alllis).width(container.width()).height(container.height());
if ($.fn.bgstretcher.settings.transitioneffect == 'simpleslide') {
if ($.fn.bgstretcher.settings.slidedirection == 'w' || $.fn.bgstretcher.settings.slidedirection == 'e') {
container.children('ul').width(container.width() * $(alllis).length).height(container.height());
if ( $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) != -1 ){
l = $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) * container.width()*(-1);
container.children('ul').css({left: l+'px'});
}
} else {
container.children('ul').height(container.height() * $(alllis).length).width(container.width());
if ( $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) != -1 ){
t = $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) * $(containerstr).height()*(-1);
container.children('ul').css({top: t+'px'});
}
}
}
};
function _genhtml(body_content){
var code = '';
var cur_bgstretcher;
body_content.each(function(){
$(this).wrapinner('').wrapinner('');
code = '';
// if swf
if (settings.images.length) {
var ext = settings.images[0].split('.');
ext = ext[ext.length-1];
if (ext != 'swf') {
var ind = 0;
for(i = 0; i < settings.images.length; i++){
if (settings.transitioneffect == 'simpleslide' && settings.sequencemode == 'back')
ind = settings.images.length-1-i;
else ind = i;
if ($.fn.bgstretcher.settings.preloadimg) {
code += '- ' + settings.images[ind] + '
';
} else {
code += '';
}
}
} else {
code += '- ' + settings.images[0] + '
';
}
}
code += '
';
cur_bgstretcher = $(this).children('.bgstretcher-area');
$(code).prependto(cur_bgstretcher);
cur_bgstretcher.css({position: 'relative'});
cur_bgstretcher.children('.bgstretcher-page').css({'position': 'relative', 'z-index': 3});
});
};
/* start bgstretcher */
this.addclass('bgstretcher-container');
_build(this);
};
$.fn.bgstretcher.loadimg = function(obj){
if (obj.hasclass('img-loaded')) return true;
obj.find('span.image-path').each(function(){
var imgsrc = $(this).html();
var imgalt = '';
var parent = $(this).parent();
var img = new image();
$(img).load(function () {
$(this).hide();
parent.prepend(this);
$(this).fadein('100');
}).error(function () {
}).attr('src', imgsrc).attr('alt', imgalt);
$(img).css({'marginleft': img_options["mar_left"]+'px', 'margintop': img_options["mar_top"]+'px'});
$(img).css({'width': img_options["imgw"]+'px', 'height': img_options["imgh"]+'px'});
});
obj.addclass('img-loaded');
return true;
}
$.fn.bgstretcher.play = function(){
_bgstretcherpause = false;
$.fn.bgstretcher._cleartimeout();
$.fn.bgstretcher.slideshow($.fn.bgstretcher.settings.sequencemode, -1);
};
$.fn.bgstretcher._cleartimeout = function(){
if(_bgstretchertm != null){
cleartimeout(_bgstretchertm);
_bgstretchertm = null;
}
}
$.fn.bgstretcher.pause = function(){
_bgstretcherpause = true;
$.fn.bgstretcher._cleartimeout();
};
$.fn.bgstretcher.sliderdestroy = function(){
var cont = $('.bgstretcher-page').html();
$('.bgstretcher-container').html('').html(cont).removeclass('bgstretcher-container');
$.fn.bgstretcher._cleartimeout();
_bgstretcherpause = false;
}
/* slideshow */
$.fn.bgstretcher.slideshow = function(sequence_mode, index_next){
_bgstretcheraction = true;
if ($(alllis).length < 2) return true;
var current = $(containerstr + ' li.bgs-current');
var next;
if (index_next == -1) {
switch (sequence_mode){
case 'back':
next = current.prev();
if(!next.length){ next = $(containerstr + ' li:last'); }
break;
case 'random':
if (r_image == $(containerstr + ' li').length) {
$.fn.bgstretcher.buildrandom(random_line[$(containerstr + ' li').length-1]);
r_image = 0;
}
next = $(containerstr + ' li').eq(random_line[r_image]);
r_image++;
break;
default:
next = current.next();
if(!next.length){ next = $(containerstr + ' li:first'); }
}
} else {
next = $(containerstr + ' li').eq(index_next);
}
$(containerstr + ' li').removeclass('bgs-current');
$.fn.bgstretcher.loadimg(next);
next.addclass('bgs-current');
switch ($.fn.bgstretcher.settings.transitioneffect){
case 'fade':
$.fn.bgstretcher.effectfade(current, next);
break;
case 'simpleslide':
$.fn.bgstretcher.simpleslide();
break;
case 'superslide':
$.fn.bgstretcher.superslide(current, next, sequence_mode);
break;
default :
$.fn.bgstretcher.effectnone(current, next);
}
if ($($.fn.bgstretcher.settings.pagination).find('li').length) {
$($.fn.bgstretcher.settings.pagination).find('li.showpage').removeclass('showpage');
$($.fn.bgstretcher.settings.pagination).find('li').eq($(containerstr + ' li').index($(containerstr + ' li.bgs-current'))).addclass('showpage');
}
// callback
if ($.fn.bgstretcher.settings.callbackfunction) {
if(typeof $.fn.bgstretcher.settings.callbackfunction == 'function')
$.fn.bgstretcher.settings.callbackfunction.call();
}
if(!_bgstretcherpause){
_bgstretchertm = settimeout('$.fn.bgstretcher.slideshow(\''+$.fn.bgstretcher.settings.sequencemode+'\', -1)', $.fn.bgstretcher.settings.nextslidedelay);
}
};
/* others effects */
$.fn.bgstretcher.effectnone = function(current, next){
next.show();
current.hide();
_bgstretcheraction = false;
};
$.fn.bgstretcher.effectfade = function(current, next){
next.fadein( $.fn.bgstretcher.settings.slideshowspeed );
current.fadeout( $.fn.bgstretcher.settings.slideshowspeed, function(){
_bgstretcheraction = false;
} );
};
$.fn.bgstretcher.simpleslide = function(){
var t, l;
switch ($.fn.bgstretcher.settings.slidedirection) {
case 'n':
case 's':
t = $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) * $(containerstr).height()*(-1);
l = 0;
break;
default:
l = $(containerstr + ' li').index($(containerstr + ' li.bgs-current')) * $(containerstr).width()*(-1);
t = 0;
}
$(containerstr+' ul').animate({left: l+'px', top: t+'px'}, $.fn.bgstretcher.settings.slideshowspeed, function(){
_bgstretcheraction = false;
});
};
$.fn.bgstretcher.superslide = function(current, next, sequence_mode){
var t, l;
switch ($.fn.bgstretcher.settings.slidedirection) {
case 's':
t = $(containerstr).height();
l = 0;
break;
case 'e':
t = 0;
l = $(containerstr).width();
break;
case 'w':
t = 0;
l = $(containerstr).width()*(-1);
break;
case 'nw':
t = $(containerstr).height()*(-1);
l = $(containerstr).width()*(-1);
break;
case 'ne':
t = $(containerstr).height()*(-1);
l = $(containerstr).width();
break;
case 'sw':
t = $(containerstr).height();
l = $(containerstr).width()*(-1);
break;
case 'se':
t = $(containerstr).height();
l = $(containerstr).width();
break;
default:
t = $(containerstr).height()*(-1);
l = 0;
}
if (sequence_mode == 'back') {
next.css({'z-index': 2, top: t+'px', left: l+'px'});
next.show();
next.animate({left: '0px', top: '0px'}, $.fn.bgstretcher.settings.slideshowspeed, function(){
current.hide();
$(this).css({'z-index': 1});
_bgstretcheraction = false;
});
} else {
current.css('z-index', 2);
next.show();
current.animate({left: l+'px', top: t+'px'}, $.fn.bgstretcher.settings.slideshowspeed, function(){
$(this).hide().css({'z-index': 1, top: '0px', left: '0px'});
_bgstretcheraction = false;
});
}
};
/* build line random images */
$.fn.bgstretcher.buildrandom = function(el_not){
var l = $(alllis).length;
var i, j, rt;
for (i = 0; i < l; i++ ) {
random_line[i] = i;
random_temp[i] = math.random()*l;
}
for (i = 0; i < l; i++ ) {
for (j = 0; j < (l-i-1); j++) {
if (random_temp[j] > random_temp[j+1]) {
rt = random_temp[j];
random_temp[j] = random_temp[j+1];
random_temp[j+1] = rt;
rt = random_line[j];
random_line[j] = random_line[j+1];
random_line[j+1] = rt;
}
}
}
if (random_line[0] == el_not) {
rt = random_line[0];
random_line[0] = random_line[l-1];
random_line[l-1] = rt;
}
};
/* prev and next buttons */
$.fn.bgstretcher.buttonslide = function(button_point){
if (_bgstretcheraction || ($(alllis).length < 2)) return false;
var mode = '';
if (button_point == 'prev') {
mode = 'back';
if ($.fn.bgstretcher.settings.sequencemode == 'back') mode = 'normal';
} else {
mode = $.fn.bgstretcher.settings.sequencemode;
}
$(alllis).stop(true, true);
$.fn.bgstretcher._cleartimeout();
$.fn.bgstretcher.slideshow(mode, -1);
return false;
};
/* pagination */
$.fn.bgstretcher.pagination = function(){
var l = $(alllis).length;
var output = ''; var i = 0;
if (l > 0) {
output += '';
for (i = 0; i < l; i++){
output += '- '+(i+1)+'
';
}
output += '
';
$($.fn.bgstretcher.settings.pagination).html(output);
$($.fn.bgstretcher.settings.pagination).find('li:first').addclass('showpage');
$($.fn.bgstretcher.settings.pagination).find('a').click(function(){
if ($(this).parent().hasclass('showpage')) return false;
$(alllis).stop(true, true);
$.fn.bgstretcher._cleartimeout();
$.fn.bgstretcher.slideshow($.fn.bgstretcher.settings.sequencemode, $($.fn.bgstretcher.settings.pagination).find('a').index($(this)));
return false;
});
}
return false;
}
/* default settings */
$.fn.bgstretcher.defaults = {
imagecontainer: 'bgstretcher',
resizeproportionally: true,
resizeanimate: false,
images: [],
imagewidth: 1024,
imageheight: 768,
maxwidth: 'auto',
maxheight: 'auto',
nextslidedelay: 3000,
slideshowspeed: 'normal',
slideshow: true,
transitioneffect: 'fade', // none, fade, simpleslide, superslide
slidedirection: 'n', // n, s, w, e, (if superslide - nw, ne, sw, se)
sequencemode: 'normal', // back, random
buttonprev: '',
buttonnext: '',
pagination: '',
anchoring: 'left top', // right bottom center
anchoringimg: 'left top', // right bottom center
preloadimg: false,
startelementindex: 0,
callbackfunction: null
};
$.fn.bgstretcher.settings = {};
})(jquery);