/** * -------------------------------------------------------------------- * 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 * -------------------------------------------------------------------- */ (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.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.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','');}});$(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');}};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){browserwidth=$('#'+options.id).width();browserheight=$('#'+options.id).height();}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,newheight,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');$('#'+$.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); $(function() { // update superbgimage options function update_superbgOptions() { // speed var newspeed = 0; if (($("input[name='optspeed']").val() == 'slow') || ($("input[name='optspeed']").val() == 'normal') || ($("input[name='optspeed']").val() == 'fast')) { newspeed = $("input[name='optspeed']").val(); } else { newspeed = parseInt($("input[name='optspeed']").val(), 10); if (isNaN(newspeed)) { newspeed = 'slow'; $("input[name='optspeed']").val('slow'); } } // slidshow interval var newinterval = parseInt($("input[name='optinterval']").val(), 10); if (isNaN(newinterval)) { newinterval = 5000; $("input[name='optinterval']").val(newinterval); } if ($.superbg_slideshowActive) { // restart slideshow clearInterval($.superbg_interval); return $('#thumbs').startSlideShow(); } // transition out var newtransitionout = 0; if ($("input[name='opttransout']:checked").val() == 'on') { newtransitionout = 1; } else { newtransitionout = 0; } // random transition var newrandomtransition = 0; if ($("input[name='optrandomtrans']:checked").val() == 'on') { newrandomtransition = 1; } else { newrandomtransition = 0; } // random image var newrandomimage = 0; if ($("input[name='optrandom']:checked").val() == 'on') { newrandomimage = 1; } else { newrandomimage = 0; } // onclick-callback if ($("input[name='optclick']:checked").val() == 'on') { onclickfunc = superbgimage_click; $('#superbgimage img').each(function() { // add click-callback to all images $(this).unbind('click').click(function(){ superbgimage_click($(this).attr('rel')); }); }); } else { onclickfunc = null; $('#superbgimage img').each(function() { // remove click-callback from all images $(this).unbind('click'); }); } // onshow-callback if ($("input[name='optshow']:checked").val() == 'on') { onshowfunc = superbgimage_show; $('#showtitle').fadeIn('fast'); } else { onshowfunc = null; $('#showtitle').hide(); } // update options $.fn.superbgimage.options = { transition: parseInt($("#transition").val(), 10), speed: newspeed, slide_interval: newinterval, transitionout: parseInt(newtransitionout, 10), randomtransition: parseInt(newrandomtransition, 10), randomimage: parseInt(newrandomimage, 10), onClick: onclickfunc, onShow: onshowfunc }; } // hide options $("#options").css('height','15px').css('padding', '0px').addClass('hidden').children().hide(); $("#options .legend").show(); // hide set 2 $("#thumbs2").hide().addClass('hidden'); // fade overlay with controls, fade container to display titles $('#overlay').fadeTo('slow', 0.75); $('#showtitle').fadeTo('slow', 0.40); $('#showtitle').hover( function () { $(this).fadeTo('fast', 1.00); }, function () { $(this).fadeTo('fast', 0.40); } ); // prev slide $('a.prev').click(function() { return $('#thumbs').prevSlide(); }); // next slide $('a.next').click(function() { return $('#thumbs').nextSlide(); }); // start slideshow $('a.start').click(function() { update_superbgOptions(); return $('#thumbs').startSlideShow(); }); // stop slideshow $('a.stop').click(function() { my_slideshowActive = false; return $('#thumbs').stopSlideShow(); }); // load image set 1 $('a.loadset1').click(function(){ $('#thumbs1').stopSlideShow(); $('#thumbs2').stopSlideShow(); my_slideshowActive = false; $('#showtitle').hide(); $('#thumbs2').hide().addClass('hidden'); $('#thumbs1').superbgimage({ reload: true }).show().removeClass('hidden'); return false; }); // load image set 2 $('a.loadset2').click(function(){ $('#thumbs1').stopSlideShow(); $('#thumbs2').stopSlideShow(); my_slideshowActive = false; $('#showtitle').hide(); $('#thumbs1').hide().addClass('hidden'); $('#thumbs2').superbgimage({ reload: true }).show().removeClass('hidden'); return false; }); // change transition with selectbox $("#transition").change(function() { update_superbgOptions(); }); // change option speed $("input[name='optspeed']").change(function() { update_superbgOptions(); }); // change option slide_interval $("input[name='optinterval']").change(function() { update_superbgOptions(); }); // change option transitionout $("input[name='opttransout']").click(function() { update_superbgOptions(); }); // change option randomtransition $("input[name='optrandomtrans']").click(function() { update_superbgOptions(); }); // change option randomimage $("input[name='optrandom']").click(function() { update_superbgOptions(); }); // change option onClick-callback $("input[name='optclick']").click(function() { update_superbgOptions(); }); // change option onShow-callback $("input[name='optshow']").click(function() { update_superbgOptions(); }); // toggle fieldsets $(".legend").click(function() { if ($(this).parent().hasClass('hidden')) { $(this).parent().css('height', 'auto').css('padding', '10px').removeClass('hidden').children().show(); $(this).show().css('display', 'block'); } else { $(this).parent().css('height','15px').css('padding', '0px').addClass('hidden').children().hide(); $(this).show().css('display', 'block'); } }); }); $(function() { // Options for SuperBGImage $.fn.superbgimage.options = { id: 'superbgimage', // id for the containter z_index: 0, // z-index for the container inlineMode: 0, // 0-resize to browser size, 1-do not resize to browser-size showimage: 1, // number of first image to display vertical_center: 1, // 0-align top, 1-center vertical transition: 1, // 0-none, 1-fade, 2-slide down, 3-slide left, 4-slide top, 5-slide right, 6-blind horizontal, 7-blind vertical, 90-slide right/left, 91-slide top/down transitionout: 1, // 0-no transition for previous image, 1-transition for previous image randomtransition: 0, // 0-none, 1-use random transition (0-7) showtitle: 0, // 0-none, 1-show title slideshow: 0, // 0-none, 1-autostart slideshow slide_interval: 5000, // interval for the slideshow randomimage: 0, // 0-none, 1-random image speed: 'slow', // animation speed preload: 1, // 0-none, 1-preload images onShow: superbgimage_show, // function-callback show image onClick: superbgimage_click, // function-callback click image onHide: superbgimage_hide, // function-callback hide image onMouseenter: superbgimage_mouseenter, // function-callback mouseenter onMouseleave: superbgimage_mouseleave, // function-callback mouseleave onMousemove: superbgimage_mousemove // function-callback mousemove }; // initialize SuperBGImage $('#thumbs1').superbgimage(); }); // function callback on hiding image function superbgimage_hide(img) { } // function callback on showing image // get title and display it function superbgimage_show(img) { $('#superbgimage').css('background', 'none'); } // function callback on clicking image, show next slide function superbgimage_click(img) { } my_slideshowActive = false; // function callback onmouseenter, stop slideshow, show pause-indicator function superbgimage_mouseenter(img) { if ($.superbg_slideshowActive) { my_slideshowActive = true; if ($('#pause').length == 0) { $('body').prepend('
<\/div>'); } $('#pause').css('position', 'absolute').css('z-index', 3).show(); return $('#thumbs').stopSlideShow(); } } // function callback onmouseleave, start slideshow, hide pause-indicator function superbgimage_mouseleave(img) { if (my_slideshowActive && ($('#pause').length > 0) && ($('#pause').css('display') == 'block')) { $('#pause').hide(); return $('#thumbs').startSlideShow(); } } // function callback onmousemove, show and move pause-indicator function superbgimage_mousemove(img, e) { if (my_slideshowActive && ($('#pause').length > 0)) { $("#pause").css("top",(e.pageY + 20) + "px").css("left",(e.pageX + 20) + "px").show(); } }