Evite que photoswipe oculte la barra de herramientas

Question

Estoy usando PhotoSwipe 3.0.4 con jQueryMobile 1.1-rc1.

Estoy tratando de evitar que PhotoSwipe oculte su barra de herramientas.

He intentado configurar captionAndToolbarAutoHideDelay paramater en 0 esperando que esto evite que la barra de herramientas se oculte, pero esto parece impedir que se oculte automáticamente.

También configuré captionAndToolbarHide en falso esperando que esto evite que se oculte, pero esto no ayudó.

Me gustaría evitar que la barra de herramientas se oculte cuando el usuario toca y desliza imágenes, ya que en algunos teléfonos es un poco difícil que la barra de herramientas vuelva a mostrarse.

¿Alguien ha tenido algo de suerte con esto?

Answer 1

Al navegar por el código fuente here, parece que hay algunas opciones posibles.

1. Sustituir el OnFadeout o función fadeout en toolbar.class.js por lo que no Fadeout la barra de herramientas basada en un ajuste que defina. Específicamente agregando una declaración basada en if en los siguientes line.

2. Anule o agregue Oyentes de eventos adicionales a los eventos OnBeforeJide u OnHide, para mostrar o detener la ocultación de la barra de herramientas.

   Para ver un ejemplo de un evento personalizado ver listner here o directamente eliminar el evento OnHide llamando Util.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler);, fuera del método dispose PhotoSwipe.

3. Agregue un controlador de eventos personalizado a los eventos OnHide o OnBeforeHide que hereda de los predeterminados pero detiene la ocultación de la barra de herramientas en función de una configuración establecida por usted.

Por lo que puedo ver

• la variable captionAndToolbarHide es falso por defecto, y cuando se define como true evita que la barra de herramientas en vez de ser creado en la función CreateComponents.
• la variable captionAndToolbarAutoHideDelay hace eso, pero eso solo impide el ocultamiento automático de los subtítulos y la barra de herramientas, pero no de las llamadas a eventos en OnHide.
• La variable preventHide impide que el usuario cierre photoSwipe pero no garantiza necesariamente que la barra de herramientas no se oculte.

Más documentación de PhoneSwipe disponible here.

Answer 2

Necesitaba evitar que PhotoSwipe ocultara las leyendas de las imágenes, pero aún así dejaba que ocultara la barra de herramientas en la parte inferior de la página de forma normal. Simplemente agregué el siguiente CSS para anular los estilos en línea que PhotoSwipe aplica para ocultar este elemento. Puede usar una forma similar para evitar ocultar la barra de herramientas también.

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

Answer 3

Añadir la siguiente línea de código para mostrar la barra de herramientas de forma permanente

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

Answer 4

Se necesitan las dos de estas etiquetas en el CSS:

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

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

Answer 5

estoy usando photoswipe sólo en modo de presentación , las fotos se cargan a través de una llamada ajax. Quería que la leyenda se fijara permanentemente en la parte inferior de la presentación de diapositivas. Esto es lo que se me ocurrió. Prestar atención a las dos últimas líneas:

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

Fuerza al subtítulo para mostrar y luego sobrescribe la función activar sin nada. No he tenido errores con esta solución.

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

Para mostrar todo el tiempo la barra de herramientas y quite los encabezado encima de la secuencia de comandos con el fin primero:

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

continuación

this.captionAndToolbar.fadeOut() 

cuidado, hay dos tratan de uno y luego el otro saber es cual. Atención modifique el enlace al sitio. Minutos la mayor parte del tiempo.