Slide com photoswipe

Un usuario preguntó 👇

Hola, me gustó mucho tu versión de photoswipe. Actualmente utilizo el deslizamiento en adaptación que desarrollé. Sin embargo, mientras intentaba migrar a Photoswipe encontré su versión. Me gustaría saber si podría orientarme sobre qué archivo puedo cambiar los divs, para dejar las imágenes de estilo de presentación de diapositivas en la publicación. Todo lo que necesito es el camino para realizar los cambios. Y felicitaciones por el plugin.

(@awelzel)

Hace 2 años, 6 meses

Gracias por las felicitaciones 🙂

Pero no estoy seguro de entender su pregunta. ¿Qué quieres decir con «dejar las imágenes de la presentación de diapositivas en la publicación»? ¿Le gustaría incrustar el control deslizante PhotoSwipe en una publicación en lugar de mostrarlo en pantalla completa?

(@jeferssons)

Hace 2 años, 6 meses

De hecho, quiero que parezca como si fuera una presentación de diapositivas y cuando haces clic en la imagen, por lo general se ve así. Cuando miro, quiero cambiar, en lugar de mostrar una Galería de la verdad, que aparece como si fuera un deslizador flexible. Como hago esto ya en swibox. Solo sé la ubicación del archivo de diseño para cambiar sin romper el plugin =).

(@awelzel)

Hace 2 años, 6 meses

Lo siento, todavía no lo entiendo. ¿Qué es exactamente «debería ser visible como si fuera una diapositiva»? ¿Es «eso» una caja de luz PhotoSwipe? ¿Y qué es una «imagen normalmente visible»?

De todos modos, el marcado completo del cuadro de luz de PhotoSwipe se coloca en la parte inferior de la página, consulte el código en lightbox-photoswipe.php, función footer().

El div con la clase pswp la carpeta para todo, y pswp__scroll-wrap el contenedor de la diapositiva.

		echo '<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="pswp__bg"></div>
	<div class="pswp__scroll-wrap">
		<div class="pswp__container">
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
		</div>
		<div class="pswp__ui pswp__ui--hidden">
			<div class="pswp__top-bar">
				<div class="pswp__counter"></div>
				<button class="pswp__button pswp__button--close" title="'.__('Close (Esc)', 'lightbox-photoswipe').'"></button>
				<button class="pswp__button pswp__button--share" title="'.__('Share', 'lightbox-photoswipe').'"></button>
				<button class="pswp__button pswp__button--fs" title="'.__('Toggle fullscreen', 'lightbox-photoswipe').'"></button>
				<button class="pswp__button pswp__button--zoom" title="'.__('Zoom in/out', 'lightbox-photoswipe').'"></button>
				<div class="pswp__preloader">
					<div class="pswp__preloader__icn">
					  <div class="pswp__preloader__cut">
						<div class="pswp__preloader__donut"></div>
					  </div>
					</div>
				</div>
			</div>
			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip">
				</div> 
            </div>
			<button class="pswp__button pswp__button--arrow--left" title="'.__('Previous (arrow left)', 'lightbox-photoswipe').'"></button>
			<button class="pswp__button pswp__button--arrow--right" title="'.__('Next (arrow right)', 'lightbox-photoswipe').'"></button>
			<div class="pswp__caption">
				<div class="pswp__caption__center"></div>
			</div>
		</div>
	</div>
</div>';

(@jeferssons)

Hace 2 años, 6 meses

Con el cuadro de deslizamiento. Puedo crear un flexslider y hacer clic en la imagen para ver los efectos predeterminados. En este caso, quiero dejar la vista predeterminada de este formulario de su plugin. Y simplemente haga clic en la imagen para que suceda la magia =). Espero que lo hayas entendido en lugar de mostrar el patrón justificado.
imagen

(@awelzel)

Hace 2 años, 6 meses

Bien, ahora lo tengo. Gracias por explicarme la imagen.

Puede ser mejor proporcionar una acción de filtro para esto, de modo que pueda colocar su propio marcado dentro de SwipeBox sin la necesidad de modificar el plugin en sí.

(@jeferssons)

Hace 2 años, 6 meses

¡Gracias, Arno =)!

(@awelzel)

Hace 2 años, 6 meses

Acabo de enviar una actualización (1.61) que ahora incluye el filtro de salida para el marcado.

Puede usar esto en el siguiente ejemplo (rápido y sucio) para agregar su propio marcado a PhotoSwipe:

function my_lbwps_markup($markup)
{
	// Add some additional elements
	$markup = str_replace(
		'<div class="pswp__top-bar">',
		'<div class="pswp__top-bar"><div style="position:absolute; width:100%; text-align:center; line-height:44px; font-size:13px; color:#fff; opacity: 0.75;">Our content</div>',
		$markup );
	return $markup;
}

add_filter( 'lbwps_markup', 'my_lbwps_markup', 10, 1 );

¿Solucionó tu problema??

SíNo

0 / 0