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:

closeEl:false,
fullscreenEl: false,
zoomEl: false,
shareEl: false,
 
  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:

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:

/// <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:

$(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:

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 .


Leave a Reply

Your email address will not be published.