Včera a asi hodinu dneska jsem se zaobíral použitím responzivního, zoomovatelného, mobile-friendly, řešení pro zobrazení fotografií bez neustálého načítání z DB všech fotek při zobrazení každé fotky.
Ono to už bylo hotové včera v 8 večer, ale mělo to jednu chybu – když jste sdíleli stránku třeba s pid(Photo ID) 1, a někdo na to kliknul, automaticky se mu načetla fotka s pid 0 – tedy ta předchozí.
To už je teď spravené. Ale další problém zůstal – nedokázal jsem rozhodit, aby když uživatel zavře fotku, vybere jinou, aby se mu otevřela ve stejném tabu. Prostě se otevře tab nový.
To ale není všechno. Když zavře v novém tabu fotku, neztratí se mu z adresy hash parametry gid a pid – takže když si toho nevšimne a pošle někomu tento odkaz, příjemci se zobrazí fotka, na kterou se naposledy v tomto albu díval.
Snažil jsem se, ale lépe jsem to vyřešit nedokázal. A teď již jak tuto fotogalerii použít. Budeme používat TypeScript, takže si prvně musíte vytvořit definici .js souboru.
V objektu options můžete určit aby se zobrazovaly mimo jiné tyto prvky – já mám všechno na false, protože kliknutí na libovolný tento prvek způsobí že se vám načte první obrázek, ať už jste na jakémkoliv – vím jak to obejít, dostanu se k tomu později:
closeEl:false,
fullscreenEl: false,
zoomEl: false,
shareEl: false,- closeEl – není jednoduše potřeba, na PC se zavře když kliknete mimo fotku a nebo zmáčknete esc. Na mobilu stačí libovolnou fotku posunout nahoru či dolů.
- fullscreenEl – Toto je celkem dobrá věc na mobilech, ale všechny ovládací prvky se ve výchozím stavu skrývají a přiblížení funguje stejně dobře i tak.
- zoomEl – I bez tohoto se lze obejít – na mobilu jde zoomovat prstama, na PC tlačítkem myši.
- shareEl – sdílení na Pinterest, Twitter, Facebook a možnost stažení fotky.
Moc se mě neptejte, proč to je napsáno tak či onak. Já sám to nevím a nastavoval jsem to svou tradiční metodou – tedy pokus-omyl protože když v tom přehršli/změti nastavení které tato galerie má a ještě navíc ani moc nečtu dokumentaci, je to pak těžké.
Ke kódu, zde máte konečně TypeScript definici v souboru PhotoSwipe.d.ts s metodami a konstruktorem, které budeme potřebovat:
declare class PhotoSwipe {
constructor(pswpElement, PhotoSwipeUI_Default, items, options);
listen(ev : string, fn : any) : void;
init(): void;
next(): void;
}Samotný soubor PhotoSwipe.ts, který si pak importujeme do stránky, kde budeme chtít zobrazovat fotogalerii vypadá takto:
/// <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);
}
}Myslím že jak tento soubor vypadá v JavaScriptu zde dávat nemusím, si ho zkompilujte a nebo upravte sami.
V *.aspx.cs souboru jsou teď nutné udělat pouze 2 věci, za prvé vložit JavaScript/jQuery kód, který zavolá metodu photoSwipe v PhotoSwipe.js, kód jQuery může vypadat třeba takto:
$(document).ready(function () { photoSwipe('" + "A" + idAlbum.ToString() + @"'); });Takže předám například do metody photoSwipe A1, což si PhotoSwipe pamatuje a když někdo někomu pošle odkaz na fotku, otevře se mu ve správném albu. To je ale pouze pro ty co nemají ještě identifikátor alba ve vlastní uri – u mě je to jen pro „pořádek“.
Druhá věc je zavolat metodu, která vám do stránky vloží JS pole s jednotlivými fotkami – každý objekt musí mít 3 proměnné – src, w, h – pokud bude jakýkoliv chybět, aplikace vám obrázek nezobrazí a můžete přidat i pid, aby PhotoSwipe věděl jaké je ID obrázku – silně doporučuji.
Celý tento js objekt pak může vypadat třeba takto:
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 vše. Jak to vypadá v praxi se můžete kouknout třeba v tomhle albu: 👻 Server odpojen, kabel smotán, klíče vráceny..