Slideshow com photoswipe

Thanks for the congratulations ??

But I’m not sure, if I understand your question. What do you mean with “leave the slideshow-style images in the post”? Do you want to embed the PhotoSwipe slider inside a post instead of showing it fullscreen?

In fact I want it to appear as if it were a slider and when clicking on the image it appears normally. Just looking, that I want to change, instead of appearing a Justified Gallery, appear as if it were a flexslider. As I already do this in swibox. I just need to know the location of the layout file to change without breaking the plugin =).

I’m sorry – I still don’t get it. What exactly should “appear as if it were a slider”? Is “it” the PhotoSwipe lightbox? And what is “image appear normally”?

Anyway – the whole markup of the PhotoSwipe lightbox is added at the footer of a page, just see the code in lightbox-photoswipe.php, function footer().

The div with class the pswp is the wrapper for everything, and pswp__scroll-wrap is the container for the slider.

		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>';

With the swipebox. I can create a flexslider and click on the image to see the default effects. In this case I want to leave the default view of this form of your plugin. And just clicking on the image for the magic to happen =).
Hope you have understood Instead of appearing the pattern that is justified.
image

Ok, now I got it. Thanks for the image to explain.

Maybe it’s best if I provide a filter action for this, so you can add your own markup inside the SwipeBox without the need to modify the plugin itself.

Thx, Arno =)!

I just pushed an update (1.61) which now also includes the output filter for the markup.

You can use this like in the following (quick & dirty) example to add your own markup to 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 );