Created
April 12, 2013 13:30
-
-
Save marsz/5371997 to your computer and use it in GitHub Desktop.
convert to utf8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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('jQuery.fn.bgStretcher.slideShow(\''+jQuery.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('<div id="bgstretcher-flash"> </div>'); | |
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('<div class="bgstretcher-page" />').wrapInner('<div class="bgstretcher-area" />'); | |
code = '<div id="' + settings.imageContainer + '" class="bgstretcher"><ul>'; | |
// 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 += '<li><span class="image-path">' + settings.images[ind] + '</span></li>'; | |
} else { | |
code += '<li class="img-loaded"><img src="' + settings.images[ind] + '" alt="" /></li>'; | |
} | |
} | |
} else { | |
code += '<li class="swf-mode">' + settings.images[0] + '</li>'; | |
} | |
} | |
code += '</ul></div>'; | |
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; | |
$(current).stop(true, true); | |
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('jQuery.fn.bgStretcher.slideShow(\''+jQuery.fn.bgStretcher.settings.sequenceMode+'\', -1)', jQuery.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 += '<ul>'; | |
for (i = 0; i < l; i++){ | |
output += '<li><a href="javascript:;">'+(i+1)+'</a></li>'; | |
} | |
output += '</ul>'; | |
$($.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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment