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 2 3 4 |
closeEl:false, fullscreenEl: false, zoomEl: false, shareEl: false, |
- 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.
- fullscreenEl – Toto je celkem dobra vec na mobilech, ale vsechny ovladaci prvky se ve vychozim stavu skryvaji a priblizeni funguje stejne dobre i tak.
- zoomEl – I bez tohoto se lze obejit – na mobilu jde zoomovat prstama, na PC tlacitkem mysi.
- 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:
|
1 2 3 4 5 6 7 |
declare class PhotoSwipe { constructor(pswpElement, PhotoSwipeUI_Default, items, options); listen(ev : string, fn : any) : void; init(): void; next(): void; } |
Samotny soubor PhotoSwipe.ts, ktery si pak importujeme do stranky, kde budeme chtit zobrazovat fotogalerii vypada takto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/// <reference path="../swf.ts"></reference> /// <reference path="../PhotoSwipe.d.ts"></reference> /// <reference path="../jquery.d.ts"></reference> function photoSwipe(nameAlbum: string) { var pswpElement = document.querySelectorAll('.pswp')[0]; var pid = getHashValue('pid'); var options = { galleryUID: nameAlbum, backButtonHideEnabled: false, loop: true, escKey: true, arrowKeys: true, history: true, captionEl: true, closeEl: false, fullscreenEl: false, zoomEl: false, shareEl: false, counterEl: true, arrowEl: true, preloaderEl: true, tapToClose: false, tapToToggleControls: true, mouseUsed: false, closeOnScroll: false, pinchToClose: false, }; var gallery = new PhotoSwipe(pswpElement, window['PhotoSwipeUI_Default'], items, options); gallery.listen('gettingData', setAAnchorImage); gallery.listen('close', function () { history.replaceState('', document.title, window.location.pathname); }); gallery.init(); if (pid != undefined) { gallery.next(); } } function setAAnchorImage(index, item) { var a = document.getElementById('aAnchorImage'); a.setAttribute('href', item.src); a.setAttribute('data-size', item.w + 'x' + item.h); a.setAttribute('pid', item.id); if (items[index + 1]) { var a2 = document.getElementById('aAnchorImage2'); a2.setAttribute('href', items[index + 1].src); a2.setAttribute('data-size', items[index + 1].w + 'x' + items[index + 1].h); a2.setAttribute('pid', items[index + 1].id); } } |
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:
|
1 |
$(document).ready(function () { photoSwipe('" + "A" + idAlbum.ToString() + @"'); }); |
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:
|
1 |
var items = [{src:'http://sunamo.cz/i/Photos/A-2147482952/uwHWhz2WGO/-2147474835_DSC_0001.JPG',w:1024,h:576,pid:0},{src:'http://sunamo.cz/i/Photos/A-2147482952/eIUz56x2IH/-2147474834_DSC_0002.JPG',w:1024,h:576,pid:1}, ...]; |
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 .