Impedisci alle foto di nascondere mai la barra degli strumenti

Question

Uso PhotoSwipe 3.0.4 con jQueryMobile 1.1-rc1.

Sto cercando di impedire a PhotoSwipe di nascondere la sua barra degli strumenti.

Ho provato a impostare il parametro captionAndToolbarAutoHideDelay su 0 sperando che questo impedisse la nascosta barra degli strumenti, ma questo sembra proprio impedirgli di nascondersi automaticamente.

Ho anche impostato la didascalia captionAndToolbarHide nella falsa speranza che ciò impedirebbe di nascondersi, ma questo non ha aiutato.

Vorrei impedire che la barra degli strumenti si nasconda quando l'utente tocca e fa scorrere le immagini, poiché su alcuni telefoni è un po 'difficile riportare la barra degli strumenti.

Qualcuno ha avuto fortuna con questo?

Answer 1

Dall'indirizzamento del codice sorgente here sembrano esserci alcune opzioni possibili.

1. Override l'OnFadeout o la funzione dissolvenza in toolbar.class.js in modo che esso non dissolvenza la barra degli strumenti sulla base di una impostazione che si imposta. Specificamente aggiungendo un'istruzione basata sulle impostazioni in base al seguente line.

2. Sostituire o aggiungere ulteriori ascoltatori di eventi agli eventi OnBeforeJide o OnHide, per mostrare o interrompere la nascosta della barra degli strumenti.

   Per un esempio di un evento personalizzato listner vedere here o addirittura rimuovere l'evento OnHide chiamando Util.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler);, al di fuori del metodo PhotoSwipe Dispose.

3. Aggiungi un gestore di eventi personalizzato agli eventi OnHide o OnBeforeHide che eredita da quello predefinito, ma interrompe l'occultamento della barra degli strumenti in base all'impostazione impostata.

Da quello che posso vedere

• la variabile captionAndToolbarHide è false per impostazione predefinita, e se impostato su true impedisce la barra degli strumenti da sempre di essere creata in funzione CreateComponents.
• la variabile captionAndToolbarAutoHideDelay fa ciò che dice ma impedisce solo l'occultamento automatico della didascalia e della barra degli strumenti, ma non di altre chiamate di eventi a OnHide.
• la variabile preventHide impedisce all'utente di chiudere photoSwipe ma non garantisce necessariamente che la barra degli strumenti non venga nascosta.

Ulteriore documentazione di PhoneSwipe è disponibile here.

Answer 2

Avevo bisogno di impedire a PhotoSwipe di nascondere le didascalie delle immagini, ma di lasciarle nascondere normalmente la barra degli strumenti nella parte inferiore della pagina. Ho semplicemente aggiunto il seguente css per sovrascrivere gli stili in linea applicati a PhotoSwipe per nascondere questo elemento. Puoi usare un modo simile per evitare di nascondere anche la barra degli strumenti.

.ps-caption{ 
opacity:0.8 !important; 
display:block !important; 
} 

Answer 3

Aggiungere la seguente riga di codice per visualizzare la barra degli strumenti in modo permanente

.ps-toolbar{ 
    opacity:0.8 !important; 
} 

Answer 4

Hai bisogno di entrambi di questi tag nel CSS:

.ps-caption{ 
opacity:0.8 !important; 
} 

.ps-toolbar { 
opacity:0.8 !important; 
} 

Answer 5

sto usando photoswipe solo in modalità presentazione , le foto vengono caricate tramite una chiamata Ajax. Volevo che la didascalia fosse apposta in modo permanente nella parte inferiore della presentazione. Questo è quello che ho trovato. Prestare attenzione alle ultime due righe:

instance.toolbar.showCaption(); 
    instance.toggleToolbar = function() {}; 

Questo costringe la didascalia per visualizzare e poi sovrascrive la levetta funzioni con niente. Non ho avuto errori con questa soluzione.

loadSlideshow = function(items){ 


var options = { 
    captionAndToolbarOpacity: 0.9, 
    captionAndToolbarFlipPosition: true, 
    captionAndToolbarAutoHideDelay: 0, 
    captionAndToolbarShowEmptyCaptions: true, 
    preventHide: false, 
    enableKeyboard: false, 
    autoStartSlideshow: true, 
    target: $('#PhotoSwipeTarget'), 
    imageScaleMethod: 'fit', 
    preventHide: true, 
    margin: 0, 
    allowUserZoom: false, 
    backButtonHideEnabled: false, 
    //captionAndToolbarHide: true, 
    getImageSource: function(obj){ 
     return obj.url; 
    }, 
    getImageCaption: function(obj){ 
     return obj.caption; 
    } 
    }; 

    instance = window.Code.PhotoSwipe.attach(
    items, options 
); 

    instance.show(0); 
    instance.toolbar.showCaption(); 
    instance.toggleToolbar = function() {};       
    return true; 
} 

Answer 6

Per visualizzare tutto il tempo la barra degli strumenti e rimuovere quelli didascalia sopra lo script per primo:

this.caption.fadeOut(); 
this.toolbar.fadeOut(); 

poi

this.captionAndToolbar.fadeOut() 

attenzione, ci sono due cercano uno poi l'altro sapere è quale. Attenzione modificare il collegamento al sito. Minuti la maggior parte del tempo.