/* Name: ImageFlow Version: 1.3.0 (March 9 2010) Author: Finn Rudolph Support: http://finnrudolph.de/ImageFlow License: ImageFlow is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License (http://creativecommons.org/licenses/by-nc/3.0/). 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). + Noncommercial. You may not use this work for commercial purposes. + For any reuse or distribution, you must make clear to others the license terms of this work. + Any of the above conditions can be waived if you get permission from the copyright holder. + Nothing in this license impairs or restricts the author's moral rights. Credits: This script is based on Michael L. Perrys Cover flow in Javascript [1]. The reflections are generated server-sided by a slightly hacked version of Richard Daveys easyreflections [2] written in PHP. The mouse wheel support is an implementation of Adomas Paltanavicius JavaScript mouse wheel code [3]. It also uses the domReadyEvent from Tanny O'Haley [4]. [1] http://www.adventuresinsoftware.com/blog/?p=104#comment-1981 [2] http://reflection.corephp.co.uk/v2.php [3] http://adomas.org/javascript-mouse-wheel/ [4] http://tanny.ica.com/ICA/TKO/tkoblog.nsf/dx/domcontentloaded-for-browsers-part-v */ /* ImageFlow constructor */ function ImageFlow () { /* Setting option defaults */ this.defaults = { animationSpeed: 50, /* Animation speed in ms */ aspectRatio: 1.964, /* Aspect ratio of the ImageFlow container (width divided by height) */ buttons: true, /* Toggle navigation buttons */ captions: true, /* Toggle captions */ circular: true, /* Toggle circular rotation */ imageCursor: 'default', /* Cursor type for all images - default is 'default' */ ImageFlowID: 'target_2', /* Default id of the ImageFlow container */ imageFocusM: 1.0, /* Multiplicator for the focussed image size in percent */ imageFocusMax: 10, /* Max number of images on each side of the focussed one */ imagePath: '', /* Path to the images relative to the reflect_.php script */ imageScaling: true, /* Toggle image scaling */ imagesHeight: 0.67, /* Height of the images div container in percent */ imagesM: 1.0, /* Multiplicator for all images in percent */ onClick: function() { window.open (this.url, '_blank', 'width=800, height=600, left = 150, top = 150'); }, /* Onclick behaviour */ opacity: true, /* Toggle image opacity */ opacityArray: [10,8,6,4,2], /* Image opacity (range: 0 to 10) first value is for the focussed image */ percentLandscape: 118, /* Scale landscape format */ percentOther: 100, /* Scale portrait and square format */ preloadImages: true, /* Toggles loading bar (false: requires img attributes height and width) */ reflections: false, /* Toggle reflections */ reflectionGET: '', /* Pass variables via the GET method to the reflect_.php script */ reflectionP: 0.5, /* Height of the reflection in percent of the source image */ reflectionPNG: false, /* Toggle reflect2.php or reflect3.php */ reflectPath: '', /* Path to the reflect_.php script */ scrollbarP: 0.8, /* Width of the scrollbar in percent */ slider: true, /* Toggle slider */ sliderCursor: 'e-resize', /* Slider cursor type - default is 'default' */ sliderWidth: 17, /* Width of the slider in px */ slideshow: true, /* Toggle slideshow */ slideshowSpeed: 2500, /* Time between slides in ms */ slideshowAutoplay: true, /* Toggle automatic slideshow play on startup */ startID: 1, /* Image ID to begin with */ glideToStartID: true, /* Toggle glide animation to start ID */ startAnimation: true, /* Animate images moving in from the right on startup */ xStep: 150 /* Step width on the x-axis in px */ }; var my=this;this.init=function(a){for(var b in my.defaults){this[b]=(a!==undefined&&a[b]!==undefined)?a[b]:my.defaults[b]}var c=document.getElementById(my.ImageFlowID);if(c){c.style.visibility='visible';this.ImageFlowDiv=c;if(this.createStructure()){this.imagesDiv=document.getElementById(my.ImageFlowID+'_images');this.captionDiv=document.getElementById(my.ImageFlowID+'_caption');this.navigationDiv=document.getElementById(my.ImageFlowID+'_navigation');this.scrollbarDiv=document.getElementById(my.ImageFlowID+'_scrollbar');this.sliderDiv=document.getElementById(my.ImageFlowID+'_slider');this.buttonNextDiv=document.getElementById(my.ImageFlowID+'_next');this.buttonPreviousDiv=document.getElementById(my.ImageFlowID+'_previous');this.buttonSlideshow=document.getElementById(my.ImageFlowID+'_slideshow');this.indexArray=[];this.current=0;this.imageID=0;this.target=0;this.memTarget=0;this.firstRefresh=true;this.firstCheck=true;this.busy=false;var d=this.ImageFlowDiv.offsetWidth;var e=Math.round(d/my.aspectRatio);document.getElementById(my.ImageFlowID+'_loading_txt').style.paddingTop=((e*0.5)-22)+'px';c.style.height=e+'px';this.loadingProgress()}}};this.createStructure=function(){var a=my.Helper.createDocumentElement('div','images');var b,version,src,imageNode;var c=my.ImageFlowDiv.childNodes.length;for(var d=0;d1){var i;for(i=0;i1){my.MouseWheel.init();my.MouseDrag.init();my.Touch.init();my.Key.init();if(my.slideshow){my.Slideshow.init()}if(my.slider){my.scrollbarDiv.style.visibility='visible'}}}};this.loadingStatus=function(){var a=my.imagesDiv.childNodes.length;var i=0,completed=0;var b=null;for(var c=0;c(c.h/(my.reflectionP+1))){c.pc=my.percentLandscape;c.pcMem=my.percentLandscape}else{c.pc=my.percentOther;c.pcMem=my.percentOther}if(my.imageScaling===false){c.style.position='relative';c.style.display='inline'}c.style.cursor=my.imageCursor;i++}}this.max=my.indexArray.length;if(my.imageScaling===false){c=my.imagesDiv.childNodes[my.indexArray[0]];this.totalImagesWidth=c.w*my.max;c.style.paddingLeft=(my.imagesDivWidth/2)+(c.w/2)+'px';my.imagesDiv.style.height=c.h+'px';my.navigationDiv.style.height=(my.maxHeight-c.h)+'px'}if(my.firstRefresh){my.firstRefresh=false;my.imageID=my.startID-1;if(my.imageID<0){my.imageID=0}if(my.circular){my.imageID=my.imageID+my.imageFocusMax}maxId=(my.circular)?(my.max-(my.imageFocusMax))-1:my.max-1;if(my.imageID>maxId){my.imageID=maxId}if(my.glideToStartID===false){my.moveTo(-my.imageID*my.xStep)}if(my.startAnimation){my.moveTo(5000)}}if(my.max>1){my.glideTo(my.imageID)}my.moveTo(my.current)};this.moveTo=function(x){this.current=x;this.zIndex=my.max;for(var a=0;amy.memTarget){b.style.visibility='hidden';b.style.display='none'}else{var z=(Math.sqrt(10000+x*x)+100)*my.imagesM;var d=x/z*my.size+my.size;b.style.display='block';var e=(b.h/b.w*b.pc)/z*my.size;var f=0;switch(e>my.maxHeight){case false:f=b.pc/z*my.size;break;default:e=my.maxHeight;f=b.w*e/b.h;break}var g=(my.imagesDivHeight-e)+((e/(my.reflectionP+1))*my.reflectionP);b.style.left=d-(b.pc/2)/z*my.size+'px';if(f&&e){b.style.height=e+'px';b.style.width=f+'px';b.style.top=g+'px'}b.style.visibility='visible';switch(x<0){case true:this.zIndex++;break;default:this.zIndex=my.zIndex-1;break}switch(b.i==my.imageID){case false:b.onclick=function(){my.glideTo(this.i)};break;default:this.zIndex=my.zIndex+1;if(b.url!==''){b.onclick=my.onClick}break}b.style.zIndex=my.zIndex}}else{if((c+my.maxFocus)my.memTarget){b.style.visibility='hidden'}else{b.style.visibility='visible';switch(b.i==my.imageID){case false:b.onclick=function(){my.glideTo(this.i)};break;default:if(b.url!==''){b.onclick=my.onClick}break}}my.imagesDiv.style.marginLeft=(x-my.totalImagesWidth)+'px'}x+=my.xStep}};this.glideTo=function(a){var b,clonedImageID;if(my.circular){if(a+1===my.imageFocusMax){clonedImageID=my.max-my.imageFocusMax;b=-clonedImageID*my.xStep;a=clonedImageID-1}if(a===(my.max-my.imageFocusMax)){clonedImageID=my.imageFocusMax-1;b=-clonedImageID*my.xStep;a=clonedImageID+1}}var x=-a*my.xStep;this.target=x;this.memTarget=x;this.imageID=a;var c=my.imagesDiv.childNodes[a].getAttribute('alt');if(c===''||my.captions===false){c=' '}my.captionDiv.innerHTML=c;if(my.MouseDrag.busy===false){if(my.circular){this.newSliderX=((a-my.imageFocusMax)*my.scrollbarWidth)/(my.max-(my.imageFocusMax*2)-1)-my.MouseDrag.newX}else{this.newSliderX=(a*my.scrollbarWidth)/(my.max-1)-my.MouseDrag.newX}my.sliderDiv.style.marginLeft=(my.newSliderX-my.sliderWidth)+'px'}if(my.opacity===true||my.imageFocusM!==my.defaults.imageFocusM){my.Helper.setOpacity(my.imagesDiv.childNodes[a],my.opacityArray[0]);my.imagesDiv.childNodes[a].pc=my.imagesDiv.childNodes[a].pc*my.imageFocusM;var d=0;var e=0;var f=0;var g=my.opacityArray.length;for(var i=1;i<(my.imageFocusMax+1);i++){if((i+1)>g){d=my.opacityArray[g-1]}else{d=my.opacityArray[i]}e=a+i;f=a-i;if(e=0){my.Helper.setOpacity(my.imagesDiv.childNodes[f],d);my.imagesDiv.childNodes[f].pc=my.imagesDiv.childNodes[f].pcMem}}}if(b){my.moveTo(b)}if(my.busy===false){my.busy=true;my.animate()}};this.animate=function(){switch(my.targetmy.current+1){case true:my.moveTo(my.current+(my.target-my.current)/3);window.setTimeout(my.animate,my.animationSpeed);my.busy=true;break;default:my.busy=false;break}};this.glideOnEvent=function(a){if(my.slideshow){my.Slideshow.interrupt()}my.glideTo(a)};this.Slideshow={direction:1,init:function(){(my.slideshowAutoplay)?my.Slideshow.start():my.Slideshow.stop()},interrupt:function(){my.Helper.removeEvent(my.ImageFlowDiv,'click',my.Slideshow.interrupt);my.Slideshow.stop()},addInterruptEvent:function(){my.Helper.addEvent(my.ImageFlowDiv,'click',my.Slideshow.interrupt)},start:function(){my.Helper.setClassName(my.buttonSlideshow,'slideshow pause');my.buttonSlideshow.onclick=function(){my.Slideshow.stop()};my.Slideshow.action=window.setInterval(my.Slideshow.slide,my.slideshowSpeed);window.setTimeout(my.Slideshow.addInterruptEvent,100)},stop:function(){my.Helper.setClassName(my.buttonSlideshow,'slideshow play');my.buttonSlideshow.onclick=function(){my.Slideshow.start()};window.clearInterval(my.Slideshow.action)},slide:function(){var a=my.imageID+my.Slideshow.direction;var b=false;if(a===my.max){my.Slideshow.direction=-1;b=true}if(a<0){my.Slideshow.direction=1;b=true}(b)?my.Slideshow.slide():my.glideTo(a)}};this.MouseWheel={init:function(){if(window.addEventListener){my.ImageFlowDiv.addEventListener('DOMMouseScroll',my.MouseWheel.get,false)}my.Helper.addEvent(my.ImageFlowDiv,'mousewheel',my.MouseWheel.get)},get:function(a){var b=0;if(!a){a=window.event}if(a.wheelDelta){b=a.wheelDelta/120}else if(a.detail){b=-a.detail/3}if(b){my.MouseWheel.handle(b)}my.Helper.suppressBrowserDefault(a)},handle:function(a){var b=false;var c=0;if(a>0){if(my.imageID>=1){c=my.imageID-1;b=true}}else{if(my.imageID<(my.max-1)){c=my.imageID+1;b=true}}if(b){my.glideOnEvent(c)}}};this.MouseDrag={object:null,objectX:0,mouseX:0,newX:0,busy:false,init:function(){my.Helper.addEvent(my.ImageFlowDiv,'mousemove',my.MouseDrag.drag);my.Helper.addEvent(my.ImageFlowDiv,'mouseup',my.MouseDrag.stop);my.Helper.addEvent(document,'mouseup',my.MouseDrag.stop);my.ImageFlowDiv.onselectstart=function(){var a=true;if(my.MouseDrag.busy){a=false}return a}},start:function(o){my.MouseDrag.object=o;my.MouseDrag.objectX=my.MouseDrag.mouseX-o.offsetLeft+my.newSliderX},stop:function(){my.MouseDrag.object=null;my.MouseDrag.busy=false},drag:function(e){var a=0;if(!e){e=window.event}if(e.pageX){a=e.pageX}else if(e.clientX){a=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft}my.MouseDrag.mouseX=a;if(my.MouseDrag.object!==null){var b=(my.MouseDrag.mouseX-my.MouseDrag.objectX)+my.sliderWidth;if(b<(-my.newSliderX)){b=-my.newSliderX}if(b>(my.scrollbarWidth-my.newSliderX)){b=my.scrollbarWidth-my.newSliderX}var c,imageID;if(my.circular){c=(b+my.newSliderX)/(my.scrollbarWidth/(my.max-(my.imageFocusMax*2)-1));imageID=Math.round(c)+my.imageFocusMax}else{c=(b+my.newSliderX)/(my.scrollbarWidth/(my.max-1));imageID=Math.round(c)}my.MouseDrag.newX=b;my.MouseDrag.object.style.left=b+'px';if(my.imageID!==imageID){my.glideOnEvent(imageID)}my.MouseDrag.busy=true}}};this.Touch={x:0,startX:0,stopX:0,busy:false,first:true,init:function(){my.Helper.addEvent(my.navigationDiv,'touchstart',my.Touch.start);my.Helper.addEvent(document,'touchmove',my.Touch.handle);my.Helper.addEvent(document,'touchend',my.Touch.stop)},isOnNavigationDiv:function(e){var a=false;if(e.touches){var b=e.touches[0].target;if(b===my.navigationDiv||b===my.sliderDiv||b===my.scrollbarDiv){a=true}}return a},getX:function(e){var x=0;if(e.touches){x=e.touches[0].pageX}return x},start:function(e){my.Touch.startX=my.Touch.getX(e);my.Touch.busy=true;my.Helper.suppressBrowserDefault(e)},isBusy:function(){var a=false;if(my.Touch.busy){a=true}return a},handle:function(e){if(my.Touch.isBusy&&my.Touch.isOnNavigationDiv(e)){var a=(my.circular)?(my.max-(my.imageFocusMax*2)-1):(my.max-1);if(my.Touch.first){my.Touch.stopX=(a-my.imageID)*(my.imagesDivWidth/a);my.Touch.first=false}var b=-(my.Touch.getX(e)-my.Touch.startX-my.Touch.stopX);if(b<0){b=0}if(b>my.imagesDivWidth){b=my.imagesDivWidth}my.Touch.x=b;var c=Math.round(b/(my.imagesDivWidth/a));c=a-c;if(my.imageID!==c){if(my.circular){c=c+my.imageFocusMax}my.glideOnEvent(c)}my.Helper.suppressBrowserDefault(e)}},stop:function(){my.Touch.stopX=my.Touch.x;my.Touch.busy=false}};this.Key={init:function(){document.onkeydown=function(a){my.Key.handle(a)}},handle:function(a){var b=my.Key.get(a);switch(b){case 39:my.MouseWheel.handle(-1);break;case 37:my.MouseWheel.handle(1);break}},get:function(a){a=a||window.event;return a.keyCode}};this.Helper={addEvent:function(a,b,c){if(a.addEventListener){a.addEventListener(b,c,false)}else if(a.attachEvent){a["e"+b+c]=c;a[b+c]=function(){a["e"+b+c](window.event)};a.attachEvent("on"+b,a[b+c])}},removeEvent:function(a,b,c){if(a.removeEventListener){a.removeEventListener(b,c,false)}else if(a.detachEvent){if(a[b+c]===undefined){alert('Helper.removeEvent » Pointer to detach event is undefined - perhaps you are trying to detach an unattached event?')}a.detachEvent('on'+b,a[b+c]);a[b+c]=null;a['e'+b+c]=null}},setOpacity:function(a,b){if(my.opacity===true){a.style.opacity=b/10;a.style.filter='alpha(opacity='+b*10+')'}},createDocumentElement:function(a,b,c){var d=document.createElement(a);d.setAttribute('id',my.ImageFlowID+'_'+b);if(c!==undefined){b+=' '+c}my.Helper.setClassName(d,b);return d},setClassName:function(a,b){if(a){a.setAttribute('class',b);a.setAttribute('className',b)}},suppressBrowserDefault:function(e){if(e.preventDefault){e.preventDefault()}else{e.returnValue=false}return false},addResizeEvent:function(){var a=window.onresize;if(typeof window.onresize!='function'){window.onresize=function(){my.refresh()}}else{window.onresize=function(){if(a){a()}my.refresh()}}}}}var domReadyEvent={name:"domReadyEvent",events:{},domReadyID:1,bDone:false,DOMContentLoadedCustom:null,add:function(a){if(!a.$$domReadyID){a.$$domReadyID=this.domReadyID++;if(this.bDone){a()}this.events[a.$$domReadyID]=a}},remove:function(a){if(a.$$domReadyID){delete this.events[a.$$domReadyID]}},run:function(){if(this.bDone){return}this.bDone=true;for(var i in this.events){this.events[i]()}},schedule:function(){if(this.bDone){return}if(/KHTML|WebKit/i.test(navigator.userAgent)){if(/loaded|complete/.test(document.readyState)){this.run()}else{setTimeout(this.name+".schedule()",100)}}else if(document.getElementById("__ie_onload")){return true}if(typeof this.DOMContentLoadedCustom==="function"){if(typeof document.getElementsByTagName!=='undefined'&&(document.getElementsByTagName('body')[0]!==null||document.body!==null)){if(this.DOMContentLoadedCustom()){this.run()}else{setTimeout(this.name+".schedule()",250)}}}return true},init:function(){if(document.addEventListener){document.addEventListener("DOMContentLoaded",function(){domReadyEvent.run()},false)}setTimeout("domReadyEvent.schedule()",100);function run(){domReadyEvent.run()}if(typeof addEvent!=="undefined"){addEvent(window,"load",run)}else if(document.addEventListener){document.addEventListener("load",run,false)}else if(typeof window.onload==="function"){var a=window.onload;window.onload=function(){domReadyEvent.run();a()}}else{window.onload=run}/*@cc_on@if(@_win32||@_win64)document.write("