/** * -------------------------------------------------------------------- * jQuery-Plugin SuperBGimage - Scaling Fullscreen Backgrounds and Slideshow using jQuery * Version: 1.0, 29.08.2009 * * by Andreas Eberhard, andreas.eberhard@gmail.com * http://dev.andreaseberhard.de/projects/superbgimage/ * * Copyright (c) 2009 Andreas Eberhard * licensed under a Creative Commons Attribution 3.0 * * Inspired by * Supersized - Fullscreen Slideshow jQuery Plugin * http://buildinternet.com/project/supersized/ * By Sam Dunn (www.buildinternet.com // www.onemightyroar.com) * -------------------------------------------------------------------- * License: * http://creativecommons.org/licenses/by/3.0/ * http://creativecommons.org/licenses/by/3.0/deed.de * * You are free: * * to Share - to copy, distribute and transmit the work * * to Remix - to adapt the work * * Under the following conditions: * * Attribution. You must attribute the work in the manner specified * by the author or licensor (but not in any way that suggests that * they endorse you or your use of the work). * -------------------------------------------------------------------- * Changelog: * 29.08.2009 initial Version 1.0 * 2.3.2012 - added condition options.inlineMode => option == 3 => css position:absolute * 30.5.2012 - add optional div for superbgimage div for substitution for body * -------------------------------------------------------------------- */ (function($){ jQuery.fn.superbgimage=function(loadingoptions){ var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options,loadingoptions); $.superbg_inAnimation=false; $.superbg_slideshowActive=false; $.superbg_imgIndex=1; $.superbg_imgActual=1; $.superbg_imgLast=-1; $.superbg_imgSlide=0; $.superbg_interval=0; $.superbg_preload=0; $.superbg_direction=0; $.superbg_max_randomtrans=7; $.superbg_lasttrans=-1; $.superbg_isIE6=false; $.superbg_firstLoaded=false; $.superbg_saveId=$(this).attr('id'); if(options.inlineMode===1){ if($('#'+options.id).length===0){ $(this).prepend(''); }else{ $(this).prepend($('#'+options.id)); } }else if(options.inlineMode===5){ if($('#'+options.id).length===0){ $('#'+options.gallery_image).prepend(''); }else{ $('#'+options.gallery_image).prepend($('#'+options.id)); } }else{ if($('#'+options.id).length===0){ $('body').prepend(''); }else{ $('body').prepend($('#'+options.id)); } } $('#'+options.id).css('display','none').css('overflow','hidden').css('z-index',options.z_index); if(options.inlineMode===0){ $('#'+options.id).css('position','fixed').css('width','100%').css('height','100%').css('top',0).css('left',0); } if(options.inlineMode==3){ $('#'+options.id).css('position','absolute').css('width','100%').css('height','100%').css('top',0).css('left',0); } if(options.reload){$('#'+options.id+' img').remove();} $('#'+options.id+' img').hide().css('position','absolute'); $('#'+options.id).children('img').each(function(){ $(this).attr('rel',$.superbg_imgIndex++); if(!options.showtitle){$(this).attr('title','');} }); if( options.inlineMode===5 ){ $(this).children('img').each(function(){ $(this).attr('rel',$.superbg_imgIndex++); if(!options.showtitle){$(this).attr('title','');} }); } $(this).children('a').each(function(){$(this).attr('rel',$.superbg_imgIndex++).click(function(){$(this).superbgShowImage();return false;}).addClass('preload');});$.superbg_imgIndex--;$(window).bind('load',function(){$(this).superbgLoad();}); $(window).bind('resize',function(){$(this).superbgResize();});$.superbg_isIE6=/msie|MSIE 6/.test(navigator.userAgent);if($.superbg_isIE6&&(options.inlineMode===0)){$('#'+options.id).css('position','absolute').width($(window).width()).height($(window).height());$(window).bind('scroll',function(){$(this).superbgScrollIE6();});}if(options.reload){$(this).superbgLoad();}return this;}; jQuery.fn.superbgScrollIE6=function(){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);$('#'+options.id).css('top',document.documentElement.scrollTop+'px');}; jQuery.fn.superbgLoad=function(){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);if(($('#'+options.id).children('img').length>0)||($('#'+$.superbg_saveId).children('a').length>0)){$('#'+options.id).show();}if((typeof options.showimage!='undefined')&&(options.showimage>=0)){$.superbg_imgActual=options.showimage;}if(options.randomimage===1){$.superbg_imgActual=(1+parseInt(Math.random()*($.superbg_imgIndex-1+1),10));}$(this).superbgShowImage($.superbg_imgActual);}; jQuery.fn.superbgimagePreload=function(){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);clearInterval($.superbg_preload);if(!$.superbg_firstLoaded&&($('#'+$.superbg_saveId).children('a').length>0)){$.superbg_preload=setInterval("$(this).superbgimagePreload()",111);return;}$('#'+$.superbg_saveId).children('a.preload:first').each(function(){var imgrel=$(this).attr('rel');var imgtitle=$(this).attr('title');var img=new Image();$(img).load(function(){$(this).css('position','absolute').hide();if($('#'+options.id).children('img'+"[rel='"+imgrel+"']").length===0){$(this).attr('rel',imgrel);if(options.showtitle===1){$(this).attr('title',imgtitle);}$('#'+options.id).prepend(this);}img.onload=function(){};}).error(function(){img.onerror=function(){};}).attr('src',$(this).attr('href'));$.superbg_preload=setInterval("$(this).superbgimagePreload()",111);}).removeClass('preload');}; jQuery.fn.startSlideShow=function(){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);$.superbg_imgSlide=$.superbg_imgActual;if($.superbg_interval!==0){clearInterval($.superbg_interval);}$.superbg_interval=setInterval("$(this).nextSlide()",options.slide_interval);$.superbg_slideshowActive=true;return false;}; jQuery.fn.stopSlideShow=function(){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);clearInterval($.superbg_interval);$.superbg_slideshowActive=false;return false;}; jQuery.fn.nextSlide=function(){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);if($.superbg_inAnimation)return false;if($.superbg_slideshowActive){clearInterval($.superbg_preload);}$.superbg_direction=0;$.superbg_imgSlide++;if($.superbg_imgSlide>$.superbg_imgIndex){$.superbg_imgSlide=1;}if(options.randomimage===1){$.superbg_imgSlide=(1+parseInt(Math.random()*($.superbg_imgIndex-1+1),10));while($.superbg_imgSlide===$.superbg_imgLast){$.superbg_imgSlide=(1+parseInt(Math.random()*($.superbg_imgIndex-1+1),10));}}$.superbg_imgActual=$.superbg_imgSlide;return $(this).superbgShowImage($.superbg_imgActual);}; jQuery.fn.prevSlide=function(){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);if($.superbg_inAnimation)return false;$.superbg_direction=1;$.superbg_imgSlide--;if($.superbg_imgSlide<1){$.superbg_imgSlide=$.superbg_imgIndex;}if(options.randomimage===1){$.superbg_imgSlide=(1+parseInt(Math.random()*($.superbg_imgIndex-1+1),10));while($.superbg_imgSlide===$.superbg_imgLast){$.superbg_imgSlide=(1+parseInt(Math.random()*($.superbg_imgIndex-1+1),10));}}$.superbg_imgActual=$.superbg_imgSlide;return $(this).superbgShowImage($.superbg_imgActual);}; jQuery.fn.superbgResize=function(){ var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options); var thisimg=$('#'+options.id+' img.activeslide'); var dimensions=$(this).superbgCalcSize($(thisimg).width(),$(thisimg).height()); var newwidth=dimensions[0]; var newheight=dimensions[1]; var newleft=dimensions[2]; var newtop=dimensions[3]; $(thisimg).css('width',newwidth+'px'); $(thisimg).css('height',newheight+'px'); if($.superbg_isIE6&&(options.inlineMode===0)){ $('#'+options.id).width(newwidth).height(newheight);$(thisimg).width(newwidth); $(thisimg).height(newheight); } $(thisimg).css('left',newleft+'px'); if(options.vertical_center===1){ $(thisimg).css('top',newtop+'px'); }else{ $(thisimg).css('top','0px'); } }; //size of image jQuery.fn.superbgCalcSize=function(imgw,imgh){ var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options); var browserwidth=$(window).width(); var browserheight=$(window).height(); if(options.inlineMode===1 || options.inlineMode===5){ // browserwidth=$('#'+options.id).width(); browserheight=$('#'+options.id).height(); } if( options.inlineMode===5 ){ var ratio=imgh/imgw; var newheight=0; var newwidth=0; if((browserheight/browserwidth)ratio){ newheight=browserheight; newwidth=Math.round(browserheight/ratio); }else{ newheight=Math.round(browserwidth*ratio); newwidth=browserwidth; } } var newleft=Math.round((browserwidth-newwidth)/2); var newtop=Math.round((browserheight-newheight)/2); var rcarr=[newwidth-2,newheight-2,newleft,newtop]; return rcarr; }; jQuery.fn.superbgShowImage=function(img){ var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options); $.superbg_imgActual=$(this).attr('rel'); if(typeof img!=='undefined'){ $.superbg_imgActual=img; } if($('#'+options.id+' img.activeslide').attr('rel')===$.superbg_imgActual){ return false; } if($.superbg_inAnimation){ return false; }else{ $.superbg_inAnimation=true; } var imgsrc=''; var imgtitle=''; if($('#'+options.id).children('img'+"[rel='"+$.superbg_imgActual+"']").length===0){ imgsrc=$('#'+$.superbg_saveId+' a'+"[rel='"+$.superbg_imgActual+"']").attr('href'); imgtitle=$('#'+$.superbg_saveId+' a'+"[rel='"+$.superbg_imgActual+"']").attr('title'); }else{ imgsrc=$('#'+options.id).children('img'+"[rel='"+$.superbg_imgActual+"']").attr('src'); } if((typeof options.onHide==='function')&&(options.onHide!==null)&&($.superbg_imgLast>=0)){ options.onHide($.superbg_imgLast); } $('#'+options.id+' img.activeslide').superbgLoadImage(imgsrc,imgtitle); $('#'+$.superbg_saveId+' a').removeClass('activeslide'); if( options.inlineMode===5 ){ var this_image_now = this + 'a'+"[rel='"+$.superbg_imgActual+"']"; $(this_image_now).addClass('activeslide'); //$('#image_list a'+"[rel='"+$.superbg_imgActual+"']").addClass('activeslide'); var position = $(this_image_now+' img').position(); //alert( position.top ); $('#image_list').jScrollPane({ showArrows:true, verticalDragMinHeight: 100, verticalDragMaxHeight: 100 }).data('jsp').scrollTo(0, position.top, 1); } $('#'+$.superbg_saveId).children('a'+"[rel='"+$.superbg_imgActual+"']").addClass('activeslide'); $.superbg_imgSlide=$.superbg_imgActual; $.superbg_imgLast=$.superbg_imgActual;return false; }; jQuery.fn.superbgLoadImage=function(imgsrc,imgtitle){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);if($('#'+options.id).children('img'+"[rel='"+$.superbg_imgActual+"']").length===0){var img=new Image();$(img).load(function(){$(this).css('position','absolute').hide();if($('#'+options.id).children('img'+"[rel='"+$.superbg_imgActual+"']").length===0){$(this).attr('rel',$.superbg_imgActual);if(options.showtitle===1){$(this).attr('title',imgtitle);}$('#'+options.id).prepend(this);}var thisimg=$('#'+options.id).children('img'+"[rel='"+$.superbg_imgActual+"']");var dimensions=$(this).superbgCalcSize(img.width,img.height);$(this).superbgTransition(thisimg,dimensions);if(!$.superbg_firstLoaded){if(options.slideshow===1){$(this).startSlideShow();}if((options.preload===1)&&($('#'+$.superbg_saveId).children('a').length>0)){$.superbg_preload=setInterval("$(this).superbgimagePreload()",250);}}$.superbg_firstLoaded=true;img.onload=function(){};}).error(function(){$.superbg_inAnimation=false;img.onerror=function(){};}).attr('src',imgsrc);}else{var thisimg=$('#'+options.id).children('img'+"[rel='"+$.superbg_imgActual+"']");var dimensions=$(this).superbgCalcSize($(thisimg).width(),$(thisimg).height());$(this).superbgTransition(thisimg,dimensions);if(!$.superbg_firstLoaded){if(options.slideshow===1){$(this).startSlideShow();}if((options.preload===1)&&($('#'+$.superbg_saveId).children('a').length>0)){$.superbg_preload=setInterval("$(this).superbgimagePreload()",250);}$.superbg_firstLoaded=true;}}}; jQuery.fn.superbgTransition=function(thisimg,dimensions){var options=$.extend($.fn.superbgimage.defaults,$.fn.superbgimage.options);var newwidth=dimensions[0];var newheight=dimensions[1];var newleft=dimensions[2];var newtop=dimensions[3];$(thisimg).css('width',newwidth+'px').css('height',newheight+'px').css('left',newleft+'px');if((typeof options.onClick==='function')&&(options.onClick!==null)){$(thisimg).unbind('click').click(function(){options.onClick($.superbg_imgActual);});}if((typeof options.onMouseenter==='function')&&(options.onMouseenter!==null)){$(thisimg).unbind('mouseenter').mouseenter(function(){options.onMouseenter($.superbg_imgActual);});}if((typeof options.onMouseleave==='function')&&(options.onMouseleave!==null)){$(thisimg).unbind('mouseleave').mouseleave(function(){options.onMouseleave($.superbg_imgActual);});}if((typeof options.onMousemove==='function')&&(options.onMousemove!==null)){$(thisimg).unbind('mousemove').mousemove(function(e){options.onMousemove($.superbg_imgActual,e);});}if(options.randomtransition===1){var randomtrans=(0+parseInt(Math.random()*($.superbg_max_randomtrans-0+1),10));while(randomtrans===$.superbg_lasttrans){randomtrans=(0+parseInt(Math.random()*($.superbg_max_randomtrans-0+1),10));}options.transition=randomtrans;}if(options.vertical_center===1){$(thisimg).css('top',newtop+'px');}else{$(thisimg).css('top','0px');}var akt_transitionout=options.transitionout;if((options.transition===6)||(options.transition===7)){akt_transitionout=0;}if(akt_transitionout===1){$('#'+options.id+' img.activeslide').removeClass('activeslide').addClass('lastslide').css('z-index',0);}else{$('#'+options.id+' img.activeslide').removeClass('activeslide').addClass('lastslideno').css('z-index',0);}$(thisimg).css('z-index',1);options.transition=parseInt(options.transition,10);$.superbg_lasttrans=options.transition;var theEffect='';var theDir='';if(options.transition===0){$(thisimg).show(1,function(){if((typeof options.onShow==='function')&&(options.onShow!==null))options.onShow($.superbg_imgActual);$.superbg_inAnimation=false;if($.superbg_slideshowActive){$('#'+options.id).startSlideShow();}}).addClass('activeslide');}else if(options.transition===1){$(thisimg).fadeIn(options.speed,function(){if((typeof options.onShow==='function')&&(options.onShow!==null))options.onShow($.superbg_imgActual);$('#'+options.id+' img.lastslideno').hide(1,null).removeClass('lastslideno');$.superbg_inAnimation=false;if($.superbg_slideshowActive){$('#'+options.id).startSlideShow();}}).addClass('activeslide');}else{if(options.transition===2){theEffect='slide';theDir='up';}if(options.transition===3){theEffect='slide';theDir='right';}if(options.transition===4){theEffect='slide';theDir='down';}if(options.transition===5){theEffect='slide';theDir='left';}if(options.transition===6){theEffect='blind';theDir='horizontal';}if(options.transition===7){theEffect='blind';theDir='vertical';}if(options.transition===90){theEffect='slide';theDir='left';if($.superbg_direction===1){theDir='right';}}if(options.transition===91){theEffect='slide';theDir='down';if($.superbg_direction===1){theDir='up';}}$(thisimg).show(theEffect,{direction:theDir},options.speed,function(){if((typeof options.onShow==='function')&&(options.onShow!==null))options.onShow($.superbg_imgActual);$('#'+options.id+' img.lastslideno').hide(1,null).removeClass('lastslideno');$.superbg_inAnimation=false;if($.superbg_slideshowActive){$('#'+options.id).startSlideShow();}}).addClass('activeslide');}if(akt_transitionout===1){var outspeed=options.speed;if(options.speed=='slow'){outspeed=600+200;}else if(options.speed=='normal'){outspeed=400+200;}else if(options.speed=='fast'){outspeed=400+200;}else{outspeed=options.speed+200;}if(options.transition===0){$('#'+options.id+' img.lastslide').hide(1,null).removeClass('lastslide');}else if(options.transition==1){$('#'+options.id+' img.lastslide').fadeOut(outspeed).removeClass('lastslide');}else{if(options.transition===2){theEffect='slide';theDir='down';}if(options.transition===3){theEffect='slide';theDir='left';}if(options.transition===4){theEffect='slide';theDir='up';}if(options.transition===5){theEffect='slide';theDir='right';}if(options.transition===6){theEffect='';theDir='';}if(options.transition===7){theEffect='';theDir='';}if(options.transition===90){theEffect='slide';theDir='right';if($.superbg_direction===1){theDir='left';}}if(options.transition===91){theEffect='slide';theDir='up';if($.superbg_direction===1){theDir='down';}}$('#'+options.id+' img.lastslide').hide(theEffect,{direction:theDir},outspeed).removeClass('lastslide');}}else{$('#'+options.id+' img.lastslide').hide(1,null).removeClass('lastslide');}}; jQuery.fn.superbgimage.defaults={id:'superbgimage',z_index:0,inlineMode:0,showimage:1,vertical_center:1,transition:1,transitionout:1,randomtransition:0,showtitle:0,slideshow:0,slide_interval:5000,randomimage:0,speed:'slow',preload:1,onShow:null,onClick:null,onHide:null,onMouseenter:null,onMouseleave:null,onMousemove:null};}) (jQuery);