Dragsters julkalender 2011

Dragsters julkalender för 2011 skiljde sig från övriga år. Temat var Dragster-året som gått. Vad hade Dragster egentligen sysslat med under det händelserika året 2011? Dragnet programmerade ihop en sida för att presentera detta medan Dragster fyllde luckorna.

Dragster julkalender 2011

» Visning i datorn

Luckorna

Alla luckor visas på en sida. Allt eftersom decemberdagarna gick blev en ny lucka aktuell. Den gick på dag och klockslag. Kl 23:59 visades en lucka och två minuter senare blev nästa dags lucka aktuell. Det gjorde att innehållet kunde fyllas på i förväg och "publiceringen" kunde sedan sköta sig själv.

Kollen, om luckan var aktuell, dåtida eller framtida, gjordes både när luckan presenterades och när innehållet hämtades vid öppning. Det gick alltså inte att kolla på någonting i förväg. Den aktuella luckan lades överst och blev röd. De luckor som redan öppnats låg i lagret under och de som inte öppnats låg underst och visade Dragster-loggan istället för en luckbild.

Dragsters julkalender 2011 - 10e december

» Kalendern som den såg ut 10e december

Javascript som användes

Polaroid photo viewer
Det hela baserades på en polaroid photo viewer som gjorts av Marco Kuiper. Målet var att anpassa denna så kalendern skulle kunna följas även i läsplatta och smart mobil. 

jQuery UI
Inbyggt i polaroid photo viewer fanns jQuery UI. Draggable användes när en bild flyttades med muspekaren. Från början ändrades bildens rotation när den flyttades eller klickades på, men det kommenterades ut för denna kalender.

Detect Mobile Browsers
En liten kodsnutt från detectmobilebrowsers.com som avgör om besökaren surfar från en mobil eller inte. Här lades ipad till för att få samma funktionalitet för ipadens touchscreen som mobilerna.

Doubletap
På de små enheterna med touch så är det krångligt att klicka på de små siffrorna för att öppna en lucka. En doubletap är mycket smidigare. En doubletap känns av och triggar ett klick på den luckans siffra, så egentligen händer det exakt samma sak som när man klickar på siffran.

Toucharea
För att kunna flytta runt bilderna på en touch screen används toucharea. Med hjälp av den kan man få tag i händelser som touchdragstart och touchdragmove, vilket är precis vad som händer när en bild  flyttas.

Fancybox
Till sist lades Fancybox 2.0 in. Den visar luckorna i rätt format oavsett enhet.

Dragster julkalender 2011 i mobil

» Kalendern i mobil

Dragster julkalender 2011 i mobil

» Lucköppningen i mobil

Besök dragster.se/jul

Kommentera

blog comments powered by Disqus