Náhledy na obrázky trochu jinak – podruhé
V tomto článku se ještě jednou vrátíme ke skriptu pro náhledy obrázků a ukážeme si jeho některá vylepšení. K obrázkům přidáme textové popisky, skript rozšíříme o možnost otevírat obrázky v novém okně a přidáme užitečnou funkci „SlideShow“ – postupného zobrazení všech obrázků. Navíc jsem vám jako bonus nakreslil nový obrázek – velice hezkého slona.
Všechny funkce a vylepšení vyjmenované v předchozím odstavci si můžete vyzkoušet po kliknutí zde (viz též minulý článek). V rozbalovacím menu v prvním řádku tabulky lze zvolit, kde se budou obrázky zobrazovat, na druhém žádku lze zapnout/vypnout zobrazování textových popisků (implicitně je zapnuto). Stiskem tlačítka na třetím řádku tabulky spustíte SlideShow, přičemž interval pro změnu obrázků lze nastavit na témže řádku (doporučuji spustit SlideShow v módu „V tomto okně“). Nakonec, tlačítkem „Vynulovat“ pod textovým polem lze zrušit zobrazení aktuálního obrázku a popisku v témže okně.
Základem skriptu je opět objekt previewer, který oproti minulému příkladu doznal několika změn. Protože se jedná o větší úsek kódu, ukážeme si jej postupně.
Hlavička objektu obsahuje obvyklé inicializace členských proměnných (především polí). Členské pole txts obsahuje popisky k jednotlivým obrázkům. Přibyla interní proměnná iName, do níž je při inicializaci ukládáno jméno instance vytvořeného objektu – to je potřeba k zajištění zpětné vazby při volání členských funkcí objektu. Dále jsou pak inicializovány dosud nevyužité „nulté“ prvky pole na prázdné hodnoty – toto využijeme později při obsluze tlačítka „Vynulovat“:
|
Metoda Add je používána k ukládání dat do objektu. Její první dva parametry určují soubor s obrázkem (velkým a malým), třetí parametr je textový popisek:
|
Funkce Preview se změnila z „externí“ funkce na metodu objektu previewer. Jejím parametrem je index obrázku, který je třeba zobrazit do preview výstupu. Tímto výstupem může být (dle nastavení příslušného SELECT boxu ve formuláři prw) buď aktuální okno, nebo okno nově otevřené. Dle nastavení příslušného checkboxu je zde rovněž vypisován/nevypisován textový popisek. Při výpisu textu do aktuálního okna je použita nejjednodušší metoda, totiž výpis do textového formulářového pole; při výpisu do nově otevíraného okna lze psát přímo do HTML.
|
Pozornější z vás si jistě všimli, že metoda Preview obsahuje test na nenulový index, který se ale uplatňuje pouze ve větvi pro nově otevírané okno. Je tomu tak proto, že volání Preview(0) s výhodou využijeme pro vynulování obrázku v aktuálním okně – při výstupu do nového okna by se ale zbytečně otevíralo okno s prázdným obrázkem i textem.
Funkce Draw kreslí tabulku s náhledy (thumbnaily), proti minulému článku doznala dvou změn, a to ve volání funkce Preview, která je nyní volána nikoliv jako externí, ale jako metoda objektu previewer (zde s výhodou využijeme uloženého jména instance objektu v členské proměnné iName). Druhou změnou je absence vykreslení velkého obrázku pro výstup – ten je definován „ručně“ přímo v HTML kódu stránky (viz níže). Za definicí metody Draw je jedna pravá složená závorka navíc jako ukončení definice celého objektu previewer:
|
Další část kódu se týká obsluhy SlideShow. Potřebujeme k tomu dvě globální proměnné (k uložení intervalu zobrazování obrázků a příznaku, že SlideShow právě běží), funkci SlideShow, která zobrazuje příslušný obrázek a zároveň periodicky „volá sama sebe“ s využitím časovače, a konečně funkci StartSlideShow, která to celé aspustí a zároveň pohlídá všechny pokusy o opětovné spuštění SlideShow ve chvíli, kdy tato běží. Zde je celý právě popsaný kód:
|
Před prvním použitím je potřeba vytvořit instanci objektu previewer (vzhledem k četným vazbám doporučuji zachovat její jednoznakové jméno „p“) a naplnit ji daty o obrázcích a jejich popiscích. Konkrétní kód může vypadat nějak takto (použité texty se pravda hodí spíše pro mateřskou školu, ale co taky chcete napsat inteligentního o slepici, že):
|
Nakonec zbývá HTML kód formuláře s tabulkou a obrázky. K němu není mnoho co dodat, snad jen že se jmenuje prw a pro událost onClick na obou použitých tlačítkách jsou definovány obslužné handlery, které volají funkce z výše popsaného kódu. Jména formulářových polí jsou vázána na JS kód, není tedy záhodno je měnit bez vážného důvodu. Totéž ovšem neplatí o grafickém provedení, které si jistě každý přizpůsobí podle svého vkusu:
|
To je k náhledům na obrázky pro tentokrát vše, přeji vám příjemný den.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Vstupte do éry umělé inteligence: ASOME Max Studio s AMD Ryzen™ 9 7940HS
14. listopadu 2023 -
Certifikáty Entrust ztratí důvěru Google Chrome
8. července 2024 -
Rychlost serveru: Klíč k lepšímu umístění ve vyhledávačích
7. června 2024 -
Moderní trendy ve webdesignu: Top trendy pro rok 2024
12. ledna 2024
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024