Webprogrammør

Simon Jensen

Bloggen med evigt skiftende tema!


 2

Fancy visning af indhold vha. Javascripts

10. Februar 2008, Kl. 16:32:36 af Simon Jensen

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 FacyZoomFancyZoom 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").

Lightbox JS

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.


Cheers for denne samling af scripts.
Det var lige et par jeg ikke kendte som absolut skal afprøvers.

Cool site btw.

Få dit eget gravatar hos www.gravatar.com alex

Kan nu detsvære fortælle, at Internet Explorer ikke heeeelt er gearet til FancyZoom :( Tror nu alligevel at jeg holde ved den lidt endnu...


Skriv en kommentar






AddThis Social Bookmark Button


aalborg add on ajax akismet algoritme analyse apache arbejde automatix backup bad gastein beryl billeder blog bot brows browser business buzz cache chat cloaking cms color schemer colorpix compiz fusion crazy eggs css css zengarden design desktop applet deviantart editor error falken productions farver fckeditor feed feedburner ferie firebug firefox flash flickr fokus foto gadget galleri gettext gnome gnu goat google google maps gps gracefull degredation grafik gravatar hijax hotel htaccess html ie IM install instereo intaller internet explorer internet explorer 6.0 investering ipod it itunes java javascript karneval kunst linux live search livecd meta microsoft mobil mod_rewrite mootools mozbackup mozilla msn musik mysql news omgivelser one.com ooxml opera os php pidgin ping pipes png podcast printer programmering projekt prototype qfilm reklame reklamebureau rss screenshot script script.aculo.us seo skole songbird spam sponser standard standarder statistik strand svn test thunderbird tillykke tivoli top 10 twitter ubuntu udvikling validering video vinter vista w3c wallpaper web 2.0 web design web programmering webcrawler webserver windows wordpress xhtml xml xmlrpc xp yahoo youtube