lightbox for any Gallery and Image (LightGallery)

I looked into possible custom solutions for what I basically asked also here: onepress lightbox for WordPress galleries

in the Onepress theme.js using lightgallery – v1.3.9 – 2017-02-05

		if ($.fn.lightGallery) {
			var wrap_tag = $(".enable-lightbox", $context).find('.g-item').first();
			var tag_selector = 'a';
			if( wrap_tag.is( 'div' ) ){
				tag_selector = 'div';
			}
			
			$(".enable-lightbox", $context).lightGallery({
				mode: "lg-fade",
				selector: tag_selector
				//cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)'
			});
		}

Onepress output code sample on the front homepage:

<div class="gallery-content">
	<div class="gallery-grid g-zoom-in enable-lightbox g-col-3">
		<a class="g-item" title="A" href="/wp-content/uploads/a.jpg">
			<span class="inner">
				<span class="inner-content">
					<img src="/wp-content/uploads/a-480x300.jpg" alt="a" />
				</span>
			</span>
		</a>
		<a class="g-item" title="b" href="/wp-content/uploads/b.jpg">
			<span class="inner">
				<span class="inner-content">
					<img src="/wp-content/uploads/b-480x300.jpg" alt="b" />
				</span>
			</span>
		</a>
	</div>
</div>

Wordpress Block Gallery sample output code

<figure class="wp-block-gallery columns-3 is-cropped">
	<ul class="blocks-gallery-grid">
		<li class="blocks-gallery-item">
			<figure>
				<a href="/wp-content/uploads/a.jpg">
					<img class="wp-image-117" src="/wp-content/uploads/a.jpg-1024x682.jpg" alt="a" data-id="117" data-full-url="/wp-content/uploads/a.jpg" data-link="/wp-content/uploads/a.jpg" />
					
				</a>
				<figcaption class="blocks-gallery-item__caption">
					a
				</figcaption>
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<a href="/wp-content/uploads/b.jpg">
					<img class="wp-image-124" src="/wp-content/uploads/b-1024x640.jpg" sizes="(max-width: 1024px) 100vw, 1024px" srcset="/wp-content/uploads/b-1024x640.jpg 1024w, /wp-content/uploads/b-300x188.jpg 300w, /wp-content/uploads/b-768x480.jpg 768w, /wp-content/uploads/b-1536x960.jpg 1536w, /wp-content/uploads/b-480x300.jpg 480w, /wp-content/uploads/b-640x400.jpg 640w, /wp-content/uploads/b.jpg 1800w" alt="b" data-id="124" data-full-url="/wp-content/uploads/b" data-link="/gallery/b/" />
				</a>
				<figcaption class="blocks-gallery-item__caption">
					b
				</figcaption>
			</figure>
		</li>
	</ul>
</figure>

WP 5.2+ Gutenberg Block Image sample output code
<figure class="wp-block-image size-large"><a href="https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280.jpg"><img src="https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280-1024x576.jpg" alt="" class="wp-image-8" srcset="https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280-1024x576.jpg 1024w, https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280-300x169.jpg 300w, https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280-768x432.jpg 768w, https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>

I have not the skills to code php or js myself from scratch so I looked for possible solutions to achieve lightbox working for galleries and images in posts and pages.

A1) Wrapper around Gallery and Images:
<div class=”gallery-content”> … </div> + “enable-lightbox” CSS class to the gallery and image block.
See Simple: isitwp.com/automatically-wrap-images-in-the_content-with-custom-html, StartEnd: wordpress.stackexchange.com/questions/279861/wrap-a-span-tag-around-authors-post-count
I was unable to find a sample which adressed the begin and end of tag, since this code will select all FIGURE endings:

function filter_figure($content){
    return preg_replace('<figure class="wp-block-gallery', '<div class="gallery-content"><figure class="wp-block-gallery enable-lightbox', $content);
    return preg_replace('figure class="wp-block-image', '<div class="gallery-content">figure class="wp-block-image enable-lightbox', $content);
    return preg_replace('</figure>', '</figure></div>', $content);
}
add_filter('the_content', 'filter_figure');

A2) Wrapper Block – see github.com/liip/wrapper-block-example-wp-plugin
I did not try this since it relies on manually adding this element for every gallery/image – using Custom HTML code could achieve the same (more manual coding necessary)

B) Theme Child Script – see sachinchoolur.github.io/lightGallery/demos/html-markup.html
functions.php

function my_themechild_js() {
    wp_enqueue_script( 'themechild-js', get_stylesheet_directory_uri() . '/scripts.js', array( 'jquery' ),'1.0',true );
}
add_action( 'wp_enqueue_scripts', 'my_themechild_js' );

scripts.js

$('.wp-block-gallery').lightGallery({
	selector: 'a'
});
$('.wp-block-image').lightGallery({
	selector: 'a'
});

Seems to not work.

If anyone could help me to apply the Onepress lightbox on post/page galleries/images that would be great! IMHO way B) JS seems more clean (less code, servertime) and easy

• This topic was modified 5 years, 2 months ago by ChrisFo.