Ez egy atom primitív lightbox-szerű képmegjelenítő bemutatója

LightBox szerű képmegjelenítő alkalmazás mindössze 26 JavaScript programsorból...

Készülőben: Effektezett változat (Ez a verzió még nem minden böngészőben működik megfelelően!)

Az alkalmazás működéséhez semmilyen egyéb fájlt nem kell behúzni a HTML-be, csak az van, amit ennek a HTML laponak a forrásában is látsz. Az alkalmazás egy CSS stílusformázási részből, egy HTML deklarációs részből, valamint magából a 26 soros JavaScript kódból áll.

Előzmények

Egy általam régóta használt hasonló webes API több mint 600 programsorból áll. Nem értettem, hogyan lőttek el ennyi kódsort egy amúgy olyan egyszerű feladatra, aminek csak egy DIV dobozt kell kitennie a képernyőre egy képpel némi sallang mellett. Ez egy tisztán JavaScript alapú szoftver, létezik hasonló JQuery alapon is. Gondoltam ez kevesebb sorból fog állni, mivel sok dolgot, pláne az effekt részeket JQueryben sokkal egyszerűbb leírni. Több mint 2000 programsorból állt! Kipróbáltam, hogy egy minimálkoncepciós, de funcionalitásban teljes hasonló alkalmazás mennyi kód felhasználásával hozható létre. (A JavaScript kódban egy sorban csak egy utasítást írtam.) Az eredény egy kevesebb, mint 30 soros program, mely effektek nélkül, de kedvezően esztétitkus megjenéssel minden szükséges állapot kezelésével (letöltés, hibakezelés, megjelenítés, elrejtés és köztzük lévő valamennyi előforduló átjárás) rendelkezik.

Fotógaléria

A szövegben lévő képes linkeket is megjeleníti. Nem kell megadni rel tag-ekben semmit, az alkalmazás belinkeli az összes képre irányuló linket. És a nagy képeket is jól jeleníti meg:

Nagy képek:

Ezek a képek idegen weboldalakról vannak linkelve (remélem nem haragszanak meg érte...), keresővel találtam rájuk:

Ez pedig egy hibás link

Kompatibilitás

Böngészők:

A szoftver valamennyi ismert böngészővel (Firefox, Chrome, Opera, Safari) működik. Az Internet Explorer nevű program 8-as verziójával tesztelten kompatibilis, azonban -informatikai tanáromat idézve- a Windows még saját magával sem kompatibilis. És köztudottan az MS IE verziók még egymást követő vezriókban is jelentősen eltértek, miközben a hivatalos szavbányok követése helyett saját útjait és önhatalmú szabványait járta.

W3C valid?

Nem, az alkalmazás sajon nem megy át a validáláson, két okból kifolyólag. Egyrészt, hogy az MS Internet Explorerben is legyen háttér elsötétítés alkalmazni kellett egy nem szabványis áttetsző tulajdonságot (mivel a szabványost az IE nem ismeri). Másrészt a validátor kifogásolja a zoomBox HTML elemei között található zoomimg azonosítójú üres src attribútumú (hivatkozás nélküli) img tag-et. Szükség esetén ezek JavaScript-be ültetésével a valid kód megoldható, bár véleményem szerint az ilyen (és az esetekben 99.999%-ban alkalmazott) megoldások csak szőnyeg alá söprik az amúgy valóban álproblémát.

Használati útmutató

A zoomBox CSS stílust ezen demóban látható módon a head részben célszerű elhelyezni, mivel csak néhány formázást tartalmaz. A JavaScript kód feltétlenül a body záró-TAG előtt kell hogy legyen, ugyanis amikor futni kezd az inicializáló része, akkor már étezniük kell a DOM-ban az összes a tag-nek.

A kód részletes magyarázata

Hamarosan...

Letöltés

Mentsd le ezt a HTML fájlt a linkelt képekkel, vagy anélkül...

Licensz

A program licensze Public Domain, bárki azt csinál vele amit akar...

Betöltés…
Bezár