Fancy visning af indhold vha. Javascripts

Viser du stadig dine billeder vha. popups? Jeg er lige gået over til at bruge FancyZoom til fremvisning af billeder her på bloggen. Tidligere har jeg brugt Lightbox, men faktisk findes der efterhånden en hel del af disse scripts.

Det har længe været meget brugt, at anvende popups til at fremvise billeder i fuld størrelse på en hjemmeside - det bør være slut nu, hvis du spørger mig!

Javascript har for længst taget sit indtog med diverse effekt-biblioteker, og performance-wise er de lige så hurtige som et popup - Men ca. 100 gange så fede at se på.

FancyZoom

Effekt med FacyZoom FancyZoom som jeg lige har taget i brug, er faktisk den simpleste af følgende. Scriptet har ikke så mange features som nogle af nedenstående, men til gengæld skal du ikke gøre noget som helst for at benytte scriptets fremvisnings funktion, når først du har inkluderet scriptet på din side (ingen CSS er påkrævet!).

Ved at sætte en enkelt onload-attribut på dit body-tag, finder scriptet automatisk links med referencer til billeder, og overtager visningen, når der trykkes på linket. Det var bla. denne simpelthed der gjorde at jeg valgte dette script.

Hvis man ikke vil benytte scriptet til fremvisning, kan det deaktiveres ved at tilføje en relation-attribut til linket (rel=“nozoom”).

Effekt med Lightbox. Jeg har, som sagt, tidligere brugt Lightbox JS til fremvisning af billeder.

Lightbox har den super fede feature, at man kan lave “sets”. Dvs. at man vha. scriptet/genvejstaster kan browser flere forskellige billeder, uden at skulle klikke på hvert eneste. Smart hvis du f.eks. har et online katalog eller lignende, som du har opdelt i kategorier.

Lightbox fungere lige omvendt af FancyZoom. For hvert link du vil benytte Lightbox som fremviser, skal du tilføje et relation-tag (rel=“lightbox”). Lightbox kræver ligeledes at du tilføjer et par linier til dit CSS dokument, men det skulle dog menes at være rimelig overkommeligt.

Thickbox JS

Effekt med Thickbox. Thickbox tager skridtet videre, og lader dig fremvise langt mere end billeder, på en fancy og galant måde. Thickbox kan bruges til at fremvise enkelte billeder, såvel som sets, inline indhold, iframes, og indhold som leveres vha. AJAX.

Thickbox fungere, ligesom Lightbox, ikke af sig selv. Ved fremvisning af billeder og sets, skal der tilføjet et class- og evt. et relation-tag.

Ved fremvisning af HTML/Iframe (osv.) skal du igang med nogle ekstra parametre (vidte/højde mm. på den boks der fremkommer) på dine links, men umiddelbart virker det til at være til at finde ud af.

Highslide JS

Effekt med Highslide. Highslide fungere ligeledes ikke kun med billeder. Jeg har ikke selv haft brugt scriptet, men umiddelbart virker det overraskende hurtigt, ud fra demoerne på den officielle side. Foruden at kunne, mere eller mindre, det samme som Thickbox, kan Highslide også fremvise flash på sin egen smarte måde.

Highslide har det hele, men det kommer med en pris! For at få det hele til at spille, skal du pakke dine billeder ind i nogle specielle div-tags, og selve linket skal i nogle tilfælge udføres med en onclick-reference til en Javascript funktion.

Lad det være sagt, så får du en all-in-one effekt-pakke med Highslide, med mulighed for at tilpasse en pakke til download med forskellige moduler, direkte fra scriptets officielle site.

Bruger du stadig popups?

… så håber jeg, at jeg nu har været med til at åbne øjnene for et par alternativer.

Skulle du kende andre, lignende, scripts, så skal du være velkommen til at linke til dem i kommentaren.