Lightbox JS V.2.

Endnu en lille hyles til [OpenSource](http://en.wikipedia.org/wiki/opensource “Wiki: Om “OpenSource”.”) miljøet:

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. Its a snap to setup and works on all modern browsers.

Jeg har faktisk længe haft Lightbox JS til at ligge i min “usefull_stuff” mappe, men havde fuldstændig glemt det igen. Her forleden faldt jeg så pludselig over det igen, og endte på programmøren, Lokesh Dhakars hjemmeside. Glædeligt nok skulle det vise sig, at der var kommet en ny version af scriptet.

Den [gamle/første version](http://www.huddletogether.com/projects/lightbox/ “Gå til første version af “Lightbox JS”.”) synes jeg var en fryd for øjet, da jeg fandt den - Men det er ingenting i forhold til [version 2](http://www.huddletogether.com/projects/lightbox2/ “Gå til “Lightbox JS V.2”.”)! Version 2 (som i skrivende stund kan downloades i v. 2.02), benytter sig af Prototype Javascript Library som kan downloades hos script.aculo.us, hvilket giver mulighed for nogle fede “morphing” effekter.

Eksempler: Klik på billedet herunder, og du vil se hvad Lightbox JS egentligt kan:

Update: Jeg bruger ikke længere Lightbox til fremvisning af mine billeder. Gå til Lightbox´s officielle side for at se de rigtige effekter.

Som noget nyt, i V.2, kan du også grupperer dine billeder, med andre ord, du kan lave sets. Nedenfor har jeg grupperet tre billeder, tryk på et af dem, og du kan browse frem og tilbage mellem billederne i settet.

Kode: Scriptet er temmelig let at sætte op. Aller først skal du selvfølgelig [downloade scriptet](http://www.huddletogether.com/projects/lightbox2/#download “Gå til download af “Lightbox JS V.2”.”). Scriptet består af 5 filer, 4 .js-filer og et .css-dokument. Hernæst skal du loade scriptene og style-sheetet i din sektion, på din hjemmeside, som følgende:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Du kan nu benytte Lightbox JS til at vise enkelte billeder, ved at tilføje rel=“lightbox” til en link-attribut. Beskrivelsen der vil komme frem, er selve title-attributten på linket. Det overstående enkelte billede, kan vises på følgende måde:

<a rel="lightbox" title="Her er det muligt at beskrive billederne." href="https://static.simon-jensen.io/uploads/Banner/buddah.jpg">Billede</a>

For at lave sets, tilføjer vi bare et set-navn til relationen, således rel=“lightbox[setnavn]”. Vi bruger således samme setnavn, til alle billeder der skal grupperes, og skulle kunne browsers sammen. Overstående set-eksempel kan vises som herunde, hvor jeg har samlet billederne i settet “set”:

<a href="https://static.simon-jensen.io/uploads/solen_og_jollen.jpg" title="Solen og Jollen." rel="lightbox[set]">#1</a>
<a href="https://static.simon-jensen.io/uploads/plaine.jpg" title="Devine Moment." rel="lightbox[set]">#2</a>
<a href="https://static.simon-jensen.io/uploads/dk_savannah.jpg" title="Dansk Savanne." rel="lightbox[set]">#3</a>

Til sidst: Jeg har tidligere gjort lidt reklame for en [WYSIWYG](http://en.wikipedia.org/wiki/wysiwyg “Wiki: Om “WYSIWYG”.”)-editor, kaldet FCKeditoren. Det er som sagt denne editor jeg benytter til at skrive mine poster med, og da jeg nu holder så meget af de to, Lightbox JS og FCKeditor, hvorfor skulle de så ikke kunne arbejde sammen? FCKeditoren har mange settings, også for insættelse/redigering af links, relation-tagget er bare ikke med som standard. Men det skulle nu ikke stoppe dig, for det er faktisk forholdsvis let at tilføje. Alt du skal gøre er at tilføje til følgende filer:

FCKeditor/editor/dialog/fck_link.html
FCKeditor/editor/dialog/fck_link/fck_link.js

Vil du vide mere, skal du være velkommen til at kommenterer heruden.