Jak pouzit galerii PhotoSwipe v ASP.NET

Vcera a asi hodinu dneska jsem se zaobiral pouzitim responzivniho, zoomovatelneho, mobile-friendly, reseni pro zobrazeni fotografii bez neustaleho nacitani z DB vsech fotek pri zobrazeni kazde fotky.

Ono to uz bylo hotove vcera v 8 vecer, ale melo to jedno chybu – kdyz jste sdileli stranku treba s pid(Photo ID) 1, a nekdo na to klikl, automaticky se mu nacetla fotka s pid 0 – tedy ta predchozi.

To uz je ted spravene. Ale dalsi problem zustal – nedokazal jsem rozhodit, aby kdyz uzivatel zavre fotku, vybere jinou, aby se mu otevrela ve stejnem tabu. Proste se otevre tab novy.

To ale neni vsechno. Kdyz zavre v novem tabu fotku, neztrati se mu z adresy hash parametry gid a pid – takze kdyz si toho nevsimne a posle nekomu tento odkaz, prijemci se zobrazi fotka, na kterou se naposledy v tomto albu dival.

Snazil jsem se, ale lepe jsem to vyresit nedokazal. A ted jiz jak tuto fotogalerii pouzit. Budeme pouzivat TypeScript, takze si prvne musite vytvorit definici .js souboru.

V objektu options muzete urcit aby se zobrazovali mimo jine tyto prvky – ja mam vsechno na false, protoze kliknuti na libovolny tento prvek zpusobi ze se vam nacte prvni obrazek, at uz jste na jakemkoliv – vim jak to obejit, dostanu se k tomu pozdeji:

  1. closeEl – neni jednoduse potreba, na PC se zavre kdyz kliknete mimo fotku a nebo zmacnete esc. Na mobilu staci libovolnou fotku posunout nahoru ci dolu.
  2. fullscreenEl – Toto je celkem dobra vec na mobilech, ale vsechny ovladaci prvky se ve vychozim stavu skryvaji a priblizeni funguje stejne dobre i tak.
  3. zoomEl – I bez tohoto se lze obejit – na mobilu jde zoomovat prstama, na PC tlacitkem mysi.
  4. shareEl – sdileni na Pinterest, Twitter, Facebook a moznost stahnuti fotky.

Moc se me neptejte, proc to je napsano tak ci onak. Ja sam to nevim a nastavoval jsem to svou tradicni metodou – tedy pokus-omyl protoze kdyz v tom prehrsli/zmeti nastaveni ktere tato galerie ma a jeste navic ani moc nectu dokumentaci, je to pak tezke.

Ke kodu, zde mate konecne TypeScript definici v souboru PhotoSwipe.d.ts s metodami a konstruktorem, ktere budeme potrebovat:

Samotny soubor PhotoSwipe.ts, ktery si pak importujeme do stranky, kde budeme chtit zobrazovat fotogalerii vypada takto:

Myslim ze jak tento soubor vypada v JavaScriptu zde davat nemusim, si ho zkompilujte a nebo upravte sami.

V *.aspx.cs souboru jsou ted nutne udelat pouze 2 veci, za prve vlozit JavaScript/jQuery kod, ktery zavola metodu photoSwipe v PhotoSwipe.js, kod jQuery muze vypadat treba takto:

Takze predam napriklad do metody photoSwipe A1, coz si PhotoSwipe pamatuje a kdyz nekdo nekomu posle odkaz na fotku, otevre se mu ve spravnem albu. To je ale pouze pro ty co nemaji jeste identifikator alba ve vlastni uri – u me je to jen pro “poradek”.

Druha vec je zavolat metodu, ktera vam do stranky vlozi JS pole s jednotlivymi fotkami – kazdy objekt musi mit 3 promenne – src, w, h – pokud bude jakykoliv chybet, aplikace vam obrazek nezobrazi a muzete pridat i pid, aby PhotoSwipe vedel jake je ID obrazku – silne doporucuji.

Cely tento js objekt pak muze vypadat treba takto:

A to je vse. Jak to vypada v praxi se muzete kouknout treba v tomhle albu: http://sunamo.cz/Photos/Album/-2147482675_GC4NTYT_507_Studanka_299/AlbumKey/hZRklFp86UYK4sX68kI .

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.