Blog/

Omdat ik deze slideshow al had gemaakt voordat ik wist dat ik er een blog over gingen schrijven ben ik niet in staat geweest de problemen te noteren die ik tegen gekomen ben. Dit zal ik in het vervolg wel gaan doen.

Een korte beschrijving over het tot stand komen van deze Javascipt slideshow[link]. Ik had ergens een soortgelijk product gezien en wilde het graag perfectioneren. Volgens mijn gewaardeerde collega Mingo moest en zou het de "Playstation 3 dia animatie" hebben. Ok vooruit, we gaan natuurlijk niet een uitdaging uit de weg.

Let op! Ik heb dit alleen nog maar getest in firefox 3.5. De slideshow staat hier
Ik heb gebruik gemaakt van:

HTML
Javascript
Prototype
Scriptaculous
Coldfusion

Foto’s komen van stock.xchng

Het moet mogenlijk zijn om een slideshow te starten en om handmatig van foto naar foto te klikken. Voor het PS3 effect maak ik van de foto’s een geblurde en overbelichte variant, die ik dan over het orgineel plak en die vervolgens laat faden. Voor het in komen vliegen gebruik ik de Effect.Morph van Scriptaculous en verander ik de margin-left. Dit bestuur ik met javascript.

Ik heb de foto’s van een stock site gehaalt en via de E-line document manager geupload. Via een Coldfusion component (cfc) worden de foto’s automatisch verkleind, nog meer verkleint, geblurt en overbelicht. Voorbeeld uit de cfc:

Foto’s worden vekleint:

<cffunction name="smallImage">     <cfargument name="src" />     <cfargument name="title" />     <cfscript>        dest = "#request.site.fs_root#/shared/images/generated";        destImage = "#dest#/small_#arguments.title#";        returnSrc = "#request.site.webroot#/shared/images/generated/small_#arguments.title#";        if( not fileExists(destImage) )        {           image = imageRead(arguments.src & arguments.title);           imageResize(image,100,65);           imageWrite(image,destImage);        }     </cfscript>     <cfreturn returnSrc /> </cffunction>

Voor het blur effect en de overbelichting, ook wel "glow", gebruik ik java filters. Hiervoor is nog een andere cfc nodig en een aantal .jar files. Deze houd ik even buiten beschouwing. Ik zal laten zien hoe ik deze hanteer binnen mijn cfc.

Dit is het blur effect, de glow werkt ongeveer hetzelfde:

<cffunction name="blur" access="remote">     <cfargument name="hradius" default="0" required="No">     <cfargument name="vradius" default="0" required="No">     <cfargument name="sImage" />     <cfscript>         dest = "#request.site.fs_root#/shared/images/generated";         destImage = "#dest#/blur_#arguments.sImage#";         loadPaths = [ expandPath( "../java/Filters.jar" ) ];         javaloader = createObject( "component", "javaloader.JavaLoader" ).init( loadPaths );         srcImage = imageGetBufferedImage(imageRead( expandPath( "../images/generated/#arguments.sImage#" )));         obj_blur = javaloader.create( "com.jhlabs.image.BoxBlurFilter" );         obj_blur.setHRadius(javaCast("int",arguments.hradius));         obj_blur.setVRadius(javaCast("int",arguments.vradius));         result = obj_blur.filter(srcImage,srcImage);         finalImage = imageNew(result);         imageWrite(finalImage,destImage);     </cfscript>     <cfset rImage = this.glow(0.5,"blur_#arguments.sImage#")> </cffunction>

De javascript die ik op de pagina gebruik is behoorlijk simpel. Voor de mouseovers van de kleine foto's gebruik ik de effect.appear en effect.fade van Scriptaculous. Voor het switchen tussen de foto's effect.morph en ook voor het weg halen van het frame gebruik ik effect.morph. De slider waarmee de seconden van de slideshow aangegeven worden is ook van scriptaculous.

Mouseovers:

function lightUp(img) {     Effect.Appear(img, {duration: 0.1, queue: 'step1'}); } function darkenDown(img) {     Effect.Fade(img, {duration: 0.1, to: 0.2, queue: 'step1'}); }

Volgende en vorige:

function nextImg() {     x = currImg;     if( x == nImgs)         nNext = 1;     else         nNext = x + 1;     nNext = "img" + nNext;     $(nNext).onclick(); } function prevImg() {     x = currImg;     if( x == 1)         nPrev = nImgs;     else         nPrev = x - 1;     nPrev = "img" + nPrev;     $(nPrev).onclick(); }

swapMain():

function swapMain(y, n) {     if( currImg != n)     {         currHeight = y;         $('img' + n).onmouseout = function(){};         Effect.Appear('img' + n,{duration:0.1});         y = y + 10;         pos = n * 2000;         pos = 2000 - pos;         $('mainContainer').morph('height:'+y+'px;' , {duration:0.5,transition:Effect.Transitions.EaseFrom});         $('mainContainer').morph('left:'+pos+'px;' , {duration:0.2,transition:Effect.Transitions.EaseTo, queue: 'end'});         Effect.Fade('editedImg' + n, {duration: 0.5, queue: 'end'});         if( slideshow == 0 )         {             $('arrowbottom').morph('height:0px;', {duration:0.5});             Effect.Fade('arrowImg2', {duration: 0.5})             $('arrowtop').morph('height:20px;', {duration:0.5});             Effect.Appear('arrowImg', {duration: 0.5, to:0.5})             Effect.Appear('arrowR', {duration: 0.5, to:0.5})             Effect.Appear('arrowL', {duration: 0.5, to:0.5})         }         if( currImg != n && currImg != "")         {             Effect.Appear('editedImg' + currImg, {duration: 0.5, queue: 'end'});            $('img' + currImg).onmouseout = function(){darkenDown(this)};            Effect.Fade('img' + currImg, {to:0.2, duration:0.1, queue: 'end'});         }         currImg = n;     } }

Zodra de slideshow geinitiliseerd word gebruik ik de zelfde functie die de "volgende pijl" gebruikt om door de foto's te browsen. Alleen werkt hij nu met een setTimeout, waardoor het dus automatisch gaat.

Voor alle code of vragen: [email protected]