Support » Theme: OnePress » 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="http://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 1 year, 4 months ago by ChrisFo.
Viewing 4 replies - 1 through 4 (of 4 total)
    • This reply was modified 1 year, 4 months ago by Long Nguyen.
    Thread Starter ChrisFo

    (@chrisfo)

    @longnguyen your post seems (accidentally) empty?

    Hi @chrisfo

    At first, the theme OnePress that you are using has an older version please update the latest version 2.2.4 to get the new features, bug fixing …

    Then you can simply use other plugins lightbox image to show on the posts/pages
    https://wordpress.org/plugins/responsive-lightbox/

    Regards.

    Thread Starter ChrisFo

    (@chrisfo)

    Hi @longnguyen
    I’m using Onepress Version 2.2.4 – the included lightgallery seems to be v1.3.9

    I would like to avoid using other lightbox image plugins to work on galleries/images in posts/pages because of:
    a) consistency of the lightbox (not having two in one webpage)
    b) avoidance of a basically unnecessary additional plugin (necessity updating, possible troubles compatibility)
    c) avoidance of a more heavy footprint (loading of additional scripts etc.)

    Probably also coding custom Gutenberg Blocks for Image and Gallery would be a personal solution (as said I’m not able to code from scratch).
    However the best solution certainly would be if Onepress could support lightbox for images/galleries (as an option) 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘lightbox for any Gallery and Image (LightGallery)’ is closed to new replies.