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

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”).

Lightbox JS

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

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

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.

Anyways, følgende video af SIGGRAPH fortælle om en intelligent algoritme til at scallerer billeder med, kaldet Content-Aware Image Resizing eller Retargeting. Jeg mener ikke at have set noget lignende, og mener kun at det kan gå få langsomt at få den med i f.eks. PhotoShop

Hvor fedt er det!

Som webprogrammør er jeg ikke så glad for design- og farve-opgaver – jeg elsker et fedt design – jeg er bare ikke speciel god til selv at lave dem.

På mit nye arbejde, har vi heldigvis dedikerede designere, som tager sig af alt den slags. Men til tider sker det, at også de har travlt. Dette var tilfældet forleden, hvilket medførte at jeg blev sat til at finde farver som passede ind i et design til en kunde.

Efter at have prøvet mig frem i nogen tid, var det tydeligt at se, at jeg ikke var ansat som designer, hehe… Men heldigvis, kan selv os farvespassere nu også være med.

Color Schemer

Min redning blev Color Shemer. Color Shemer har en online løsning, som automatisk genererer farve-skemaer, bestående af relaterede farver, til en farve du væger.

Du kan vælge en farve, enten ved at indtaste RGB eller HEX koden for farven, eller ved at vælge direkte fra et panel, som vist på billedet herunde. Color Shemer giver dig som sagt nogle forslag. Til disse forslag kan du vælge om farvene (alle de relaterede) skal være lysere eller mørkere.

ColorPix

Skulle du være i tvivl om hvad RGB eller HEX koden er, for den farve du har fundet frem til, evt. ved at se på andre sites programmer eller lignende, har Color Shemer også et værktøj til dette! Dette hedder ColorPix. ColorPix er et lille program som du skal downloade – pt. findes det kun til Windows (kører også fint gennem wine til Linux) – og ser ud som det første billede i denne post.

ColorPix åbner et lille vindue, som du kan zoome fra 100-2800% – Vinduet viser indholdet lige omkring din musemarkør, og viser samtidigt farve-koderne for de farver din mus kører over. Det betyder at du nu kan snuppe en hver farve du ser på din skærm. Når du har fundet din farve, trykker du på en tilfældig tast, og vinduet låser indholdet, og farverne. Herefter kan du klikke på vinduer, og farvekoden er nu kopieret til udklipsholderen – Herefter kan man jo passende, smutter over til Color Shemer Online, og få site et passende farve skema – og vupti, så er man pludselig farve ekspert…

Noget lignende findes hos Genopal – Her kan du bare ikke selv vælge, hvilket specifik farvekode du vil arbejde ud fra. Genopal arbejder mere med harmoni konceptet, hvor et sæt farver (som de har forudbestemt) f.eks. passer på en årstid, eller en stemning.

Kender du lignende værktøjer, kan du linke til dem herunder. Color Shemer har også et par produkter til Macintosh, hvilket jeg ikke har fået prøvet endnu…

Figuren er taget fra “Rapid Development” af Steven McConnell.

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 synes jeg var en fryd for øjet, da jeg fandt den – Men det er ingenting i forhold til version 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. Scriptet består af 5 filer, 4 .js-filer og et .css-dokument.
Hernæst skal du loade scriptene og style-sheetet i din <head> 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="/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="/uploads/solen_og_jollen.jpg" title="Solen og Jollen." rel="lightbox[set]">#1</a>
<a href="/uploads/plaine.jpg" title="Devine Moment." rel="lightbox[set]">#2</a>
<a href="/uploads/dk_savannah.jpg" title="Dansk Savanne." rel="lightbox[set]">#3</a>

Til sidst:
Jeg har tidligere gjort lidt reklame for en 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.

For dem af jer der har fulgt med på sitet, vil I sikkert give mig ret i, at sidste opdatering ikke var meget værd. Så vidt jeg husker, var der ikke meget andet end lidt design ændringer og en fin flash intro til at promote.

Jeg må ærlig tilstå, at det er længe siden at jeg har brugt siden sidst. Mit sidste upload var i April i år, men alligevel fik jeg lidt af et shock, da jeg blev mødt af skærmen, med teksten: “the deviantART administration would like to make the following announcement” – hurtigt efterfulgt af et lille glædens hop, da det gik op for mig at det var en opdatering!
Også denne gang bliver opdateringen fulgt op af en flash introduktion, som du kan se her. Ahhh – Det er noget der vækker minder hos en nørd som mig – De gode gamel dage til “The Party“, hvor det eneste der lyste de store haller op, var computer skærme og storskærmens demo-ræs.

Castle kommer, heldigvis, med mere end bare design ændringer. Specielt glæder det mig, at se at de endelig har fået øjnene op for RSS. Endelig har du mulighed for at følge dine favoritter uden at skulle browse dybt ind på sittet. På denne måde kan du f.eks følge mit galleri via denne feed.

En anden ny ting, som jeg også fangede i flash-introen, er muligheden for at blogge, eller rettere embedde, billeder fra siden. Under detaljer for et billede findes der nu en embed-form, med en kode, som du kan copy/paste til din egen blog el.ling.
Billedet herunder er indsat med deres nye embed-funtion.

Castle kommer selvfølgelig også med design ændringer. Her er jeg specielt glad for, at de endelig har valgt at bruge bare en lille smule farver denne gang. Og så slap vi endelig af med det kedelige gamle “square-look”, hvilket også har irriteret mig længe.

En anden fiks lille funktion, som du kan se på billedet her til højre, er en ny “buddy spy“, som du kan poppe op, og se hvem af dine venner der er online. Er de ikke online, giver det dig alligevel en hurtig måde at navigerer til deres profiler, hvilket i “gamle dage”, også var en lang process.

Apropo lange processer. Hvor svært var det liiiige det vat at navigerer gennem de mange kategorier der findes? Denne process er heldigvis også blevet drastisk forenklet i Castle. Nu findes der en enkelt menu, lidt ala iPods menu-system, hvor du kan specificerer hvilke kategori og under-kategori du vil se – Det virker fantastisk. Du kan se funktionen på dette screenshot, men bør se den live, før du forstår 100% hvor smart det er.

Til slut bør du lige se denne promotion video. Endnu et fund på youTube.

Nu har jeg endelig fundet et sted, hvor man ikke behøver at browser gennem hundredevis af billeder, for at finde noget man sådan nogenlunde kan lide. Sidens navn, Sockoff, synes måske ikke at være særlig imødekommende, men dens samling af wallpapers er!

Sidens eget galleri, indeholder en god samling på ca. 100 idyliske billeder. Det bedste ved dem er farverne og de dejlige motiver. Se f.eks. billedet her til venstre … det ligner den klassiske baggrunde som Windows XP har, når det lige er installeret – Men sammenlign dem selv, og du vil nok kunne se forskellen.

Foruden Sockoff´s egen samling af wallpapers, har de prydet hele forsiden med links til andre sider med wallpapers, delt op i kategorier og sorteret i alfabetisk orden. Så hvis man har tålmodigheden, skulle der være mulighed for at finde noget for selv den mest kræsende.