22. september 2006 15.50 WEB
Odzvoňte otváraniu obrázkov do nového okna
Iste. Fotky sú v spojení s HTML web stránok veľmi neprispôsobivé. Majú tendenciu byť príliš veľké alebo príliš maličké bez detailov. Nikdy ich nenarvete na plochu 10×10cm dvadsať a keď si chcete otvoriť fotku v primeranej veľkosti, rozsype sa celý web alebo si myslíme, že prepísanie stránky púhym obrázkom Vás návštevníka dokonale zbaví (veríme v neschopnosť používateľa klepnúť na Back).
Takže sa rozhodujeme asi tak, že fotky otvoríme do nového okna (FÚJ!) a očakávame, že po prezretí proste návštevník zavrie okno a pokračuje v extáze obdivovania fotiek interiéru a exteriéru našej firmy či hostesky.
Teraz si povieme axiómu: otvárať do nového okna je zlé, zlé, zlé. FÚÚÚÚJ!
Šesťkrát si premyslite, kým sa rozhodnete na svojom webe praktizovať túto formu mágie, sado-masochistických rituálov a posielania tichých bômb do prehliadačov. :-)
Prečo si myslím, že práve otvárať "plné" veľkosti fotiek do nového okna je blbosť? (nemýľte si s otváraním do nového okna všeobecne)
V prvom rade doba kráča míľovými krokmi napriek snahe slovenského internetového mainstreamu, ktorý sa ešte sám nevytočil z bludiska rokov deväťdesiatych.
Áno, rokmi odopierania a koketovania s divokým javascriptom sa stalo očakávané. Je zobratá na milosť, dokonale prelustrovaná, podporovaná a multiplatformná. Prístupná a použiteľná. Nabudúce aj certifikovaná bežným používateľom akonáhle precitne z hibernácie udržovanej mŕtvolne stuhnutými portálmi a vybehne medzi ľudí. :-)
Ako skonštruujete odkaz na "veľký formát" obrázku vo svojom kóde po starom:
FUJ! <a href="<uri>" target="_blank">Obrazok</a> FUJ!
Pokiaľ by ste neotvárali do nového okna, tak to bude takto:
<a href="<uri>">Obrazok</a>
Prichádza Lightbox ako predstaviteľ instantných knižníc pre autorov websajtov. Je to javascript, ktorý obratom ruky spraví z otvárania obrázkov doslova koncert.
Svojho dvorného webdizajnéra donútite, aby do hlavičky websajtu vložil volanie knižnice. Vy sa tým zaoberať nemusíte a pre neho je to len otázka Copy&Paste štyroch riadkov zo znepokojivo stručného návodu. Mimochodom celá stránka o knižnici Lightbox má vlastne jedinú stručnú stránku. Instant ako pre debila, že? Takže to naozaj kľudne môžete nechať na neho.
Ako skonštruujete odkaz na "veľký formát" obrázku vo svojom kóde po novom:
<a href="<uri>" rel="lightbox" title="Tu sme my na obrazku">Obrazok</a>
Zmena je malá: zabudnite na TARGET. Čarovný šém je to rel="lightbox" a okamžite ako ho uvediete, tak zapracuje knižnica. Miesto otvorenia obrázku "na prázdnej stránke" sa stane nebeský zázrak. Ja som tam ešte pre poriadok doplnil parameter TITLE. Do neho vždy dopíšte nejaký popis obrázku. Lightbox ho môže vedieť použiť.
Dovetok pre neanglofónnych slovenských dyzynyrov:
- nakopírujem knižnice, CSS súbor a pár bitmáp FTPkom,
- do hlavičky HTML dokumentov vložím tri riadky, ktoré nalinkujú knižnice a nalinkujem aj CSS súbor,
- knižnica sa samočinne aktivuje uvedením parametra
rel="lightbox"a nie je teda na zvykoch meniť nič.
Iba zabudnúť na TARGET.
Dovetok pre pokročilejších:
Lightbox využíva scriptaculous a preto ak ho už používate tak pri vkladaní knižníc Lightboxu môžete skombinovať vkladané knižnice.
Dovetok pre Yetih... ehm bežného použivateľa:
Pre teba sa, môj, nemení nič. Klikáš ako doteraz. A dokonca sa nestaráš, či máš javascript alebo nie. Na to, môj, s kľudom zabudni. Budeš iba uchvátený a okamžite zatúžiš mať aj ty také isté na stránke svojej pekárne.
Dovetok pre kverulanta:
Ale jasne, bez javascriptu to bude tiež fungovať. A hlavne, tá fotka sa nezobrazuje v primitívnom prázdnom okne ale s okolím, ktoré pôsobí integrujúco.
pošli do vybrali.sme.skKomentáre k obsahu príspevku:
Chcete napísať nesúhlasný komentár? Prosím, zvážte nasledovné: je šanca, aby niekto zmenil Váš názor alebo chcete iba trvať na svojom? V prvom prípade sú Vaše slová vítané.
Chcete urážať? Nepíšte sem urážky a invektívy. Každý, kto na týchto stránkach publikuje je automaticky (doplňte vhodný výraz). Takže už to všetci vopred vieme, čo si myslíte a preto sa neopakujte.
Podmienky pre Váš komentár: Tlačidlo na odoslanie stlačte 1x, v texte nenadávajte, nevkladajte linky za účelom SEO, nepropagujte, Váš text musí mať zmysel, neporušujete vlastnícke práva majiteľa tejto stránky, ste pravidelný čitateľ tejto stránky, komentujete príspevok (nie erupcie Slnka) a nemýlite si komentáre s kvákacími fórami a chatom. Používajte formátovanie TEXTILE najmä na odkazy! Rozumiete tomuto poučeniu? áno, nie alebo Týmto sa pošle komentár?
ten lightbox2 mi už připadá trochu moc překombinovaný, a tak jsem se vrátila k Lightbox 1, z kterého jsem osekala všechny ty animační serepetičky a nakonec je z toho jen obyč nové okno bez animací
Lightbox je jeden hnus. Je to moj subjektivny nazor, ale ako tento "projekt" spomaluje pocitac a vytazuje procesor na pocitaci lubovolneho typu a s lubovolnym mnozstvom pamate - no fuj.
.
Nehovoriac, ze je to vec, na ktoru uzivatelia nie su zvyknuti a tym porusuje zakladne pravidla pouzitelnosti.
.
Este k pouzitelnosti: otvaranie do novych okien nie je najlepsie, ale na druhej strane uzivatelia tento sposob poznaju a tym padom ho maju zauzivany.
.
Podla mna je jedinym riesenim otvaranie do toho isteho okna. Tlacitko Spat pozna kazdy. Naozaj.
Lightbox používám a musím říct, že mě uchvátil. Přijde mi to ideální a pro uživatele příjemné. Ale musí si na to zvyknout... Rozhodně lepší, než vytvářet popupy a podobná zvěrstva...
Hmm. To akože 15-20s, dokial sa vôbec niečo začne diať a pritom mať na 100% vyhulený procesor. Tak to naozaj nemusím. (AMD64 3000+) A to som vyskúšal prvé dva obrázky zo stránok lightboxu. Neviem, čo by to robilo pri naozaj veľkých obrázkoch. Možno nič, neskúšal som.
Podľa mňa je najrozumnejšie nech mi obrázok zobrazí do toho istého okna, uplne bez HTML hlavičiek (ako čistý obrázok). Keď to chcem mať v novom tab-e, tak kliknem stredným tlačítkom. back, ak je to v tom istom okne viem urobiť myšou, albo klávesnicou a nemám pocit, že sa procesor má z toho zblázniť.
divné, nepřipadá mi, že by se mi měl zbláznit komp z otvírání, a to mám pěkně dýchavičnou lemru, zkus prosím testnout tohle:
http://hellgate.cz/galerie/index.php?dir=./artwork-demoni
Ako tak pozerám, klasické nové okno s vlastnosťou "po kliknutí sa zavriem" si odsúdil do kategórie retrodizajnu. Škoda, že retrodizajn evokuje neaktuálnosť. Staré dobré animované gifi získavajú novú spoločnosť ;-)
[6] ze otváranie do nového okna je fuj už pochopili aj pornoproducenti ;-) dobrý názov retrodizajn :-)
[5] takisto nemám z výťaže zlý pocit. koniec koncov - používa to scriptaculous a ten si môj kolega nevie vynachváliť - on robí také serióznejšie veci nie sračky ako my :-)
[4] pozri: sú to nalinkované knižnice. nacachuje ich prehliadač a potom to už beží ako má. Akonáhle nájdeš pre scriptaculous využitie aj inde ako k tomuto, tak nie je o čom diskutovať. Ale takéto problémy by si musel poctivo otestovať a odhaliť problém.
[3] to prvé zobrazenie môže byť trochu iné ale nepovedal by som, že neočakávané. LightBox sa dá ľahko upraviť. Mňa na ňom zaujíma práve to a hlavne fakt, že si viem obrázok zobraziť v takom tom fotografmi a agentúrami obľúbenom rámiku. Proste to vyzerá reprezentatívne.
[1] áno presne, možeš vysypať veci, čo ťa štvú. Ale pozor - môžeš obrázky združovať a potom nimi listovať. To je pekná funkcia - máš fotky rozsypané po webstránke ale otvoríš jeden a môžeš listovať ostatnými.
[2] ale ale - a tie rôzne poňaté fotogalérie aké má idnes, bleskovky a ďalšie mediálne portály, tie sú každý iný. Dokonca pravda má lupu. Takže trochu pláveme v argumentoch. Podobne môže byť hotový ktokoľvek z obyčajného coppermine.
Všetkým ďakujem za názory ;-) V článku propagujem práve takéto instantné riešenia - moderne sa to volá všelijako napr. widgets.
Dakujem dakujem dakujem. Dakujem Ronymu ze o tom napisal, Dakujem SuE ze dala odkaz na svoju stranku a dakujem vsetkym za nazory.
IMHO LightBox rulez ;). Vid:
http://www.fem.uniag.sk/havran/galerie/janzizka/?gid=parcon_2006
Doteraz tam boli tie skarede vyskakovacie okna :D.
[5] Toto je robené tým istým skriptom? Pretože sa to správa celkom inak a ide to naozaj svižne. Ale to na stránkach http://www.huddletogether.com/projects/lightbox2/ sa mi správa ako som vyššie popísal aj keď to spustím pár krát za sebou, čo by sa už hádam teda mohlo nakešovať.
4 Dúfam, že sa na mňa nikto nenahnevá, keď to nebudem odlaďovať a testovať. Už som sa z takto sa správajúcou stránkou nedávno stretol a po asi 10-tich sekundách som ju proste uzavrel, lebo som jednoducho nevydržal čakať. Neočakával som na nej nič také dôležité, že by som to mohol potom banovať.
8 Tak na tejto stránke mi to ide rýchlo. Neviem, čo špeciáne je na tej stránke projektu, keď je to tak nechutne rozožraté.
[9] Ja som to opajcol od SuE - jeden javascriptik a dva riadky v CSS a som ohromne spokojny :))). Aj predtym som to mal tak ze ak nejde JS tak sa to proste otvori na samostatnej stranke a s tymto je to uplne super (len keby mali vsetci 1280×1024 aby sa im tie fotky co su 800×600 pomestili na obrazovku :)).
hm, ja som bezny pouzivatel. Pozrel som si tie linky, co sa nachadzaju v diskusii a prepacte mi moju neznalost modernych trendov, ale stale nevidim, v com je to o tolko lepsie ako otvaranie do novych okien. Oba sposoby mi pridu rovnako prijatelne.
[11] vyborne, to je nazor, ktory sa mi dobre pocuva :-) nepriamo potvrdzujes to, co som rovno nepovedal. akakolvek ina odpoved by vyburcovala polemiku ale trafil si stred.
Tie dva odkazy sa spravaju uplne inak ako povodny lightbox - asi preto, ze tam nie su tie [fuj] efekty zvacsovania vrstvy a zakrytia povodneho obsahu. V takomto formate to schvalujem, inak trvam na tom, ze je to hnus, ktory mi vytazuje celych 7 sekund pocitac na 100% (rychly procesor, 2 GB pamate).
.
Asi uznas, rony, ze chyba bude v samotnom skripte, ak dokaze takto dodrbat prehliadac (ano, zname to mrznutie).
.
Navrhujem teda vypnut zahlcovanie a zapnut to len vo forme, ako su uvedene dva odkazy vyssie.
.
Trvam na tom, ze z hladiska pouzitelnosti je to vo forme otvarania s prekryvom vrstiev neakceptovatelne. Vo forme ako ma SuE a Havran je to v poriadku. Uvital by som ale zname to X (zatvorenie okna) na standardnom mieste a nie niekde dole pod obrazkom.
[13] ale ved to iste robi aj Lightbox2, len si treba prestat brat do uvahy defaulty, ono to ma totiz aj parametre, moznost prisposobenia spravania.
Mimochodom prave to stmavenie prostredia mi pri prezerani fotiek velmi vyhovuje.
Mne to nevytazuje nijako vyznamne nic :-)
a nemam veru ani 2gb pamate ani dnes nijako rychly procesor ;-)))
Ved to X si mozes dat kde chces - na to tam je CSS subor :)
Pochop, zavrtaj sa a hodnot potom :)
Tak ako mozes pouzivat weblogove cms s default sablonou, tak ho mozes prekopat ako chces :)
Ale opakujem ani v default tvare mi to necini problem - aj tak mi NAJVIAC casu zaberie pocas "natahovania" prave natahovanie samotneho obrazku - cize to je v celom tom procese kym sa obrazok zobrazi, to najviac zatazujuce. A to nezmenis :-)
to ze to mimochodom zobrazi par efektov naviac je vedlajsie, ved popri tom natahuje bitmapu.
Okrem toho, treba si pozriet aj scriptacoulos aj ten sa da upravovat.
Iste cely lightbox naprogramujem aj ja sam, ale ide mi o instantne riesenia.
Naozaj nedokazem ako ty kategoricky vyhlasit, ze je to naprd lebo "toto presne to robi".
Ja ziadny problem nepocitujem (ani ten co spominas).
Narocnost lightboxu ?Skusal som - cpu 1%, ani si to nevsimne. (Intel CoreDuo)
Osobně používám uprvený Lightbox Plus, je mnohem menší než "originál" a funguje 100% spolehlivě i v application/xhtml+xml, unlike originál..
http://hulan.cz/styles/hulan.cz/lightbox/lightbox_plus.js
Ukázka zde:
http://hulan.cz/redakcni-system/