How to activate Lightbox?

Hi, I have exactly the same issue as the OP
Thanks

I too would really like an option to keep lightbox enabled! I am trying to use a gallery to open other pages in an iframe (so that the user stays on a single page throughout their experience). I’m using Easy Fancybox so I would need the ability to 1) remove the “.no-lightbox” class, and 2) add a custom class of my own to the link element (e.g. “.lightbox-iframe”). It seems like 7 or 8 other people have also come here looking for the same thing so I am hopeful that this makes it onto your list of feature requests ??

• This reply was modified 4 years, 2 months ago by ethanjrt.

Haha, no worries, I am listening to everything here ?? I am actually also thinking carefully about the next update and how to make it better.

So, wait, it seems like what everyone would like here is:

The possibility of opening an image in a lightbox, which is different from the thumbnail or the image in the gallery.

Is that right? So it’s not to disable the Lightbox really, but to feed the Lightbox with a different image.

Guys, that’s… definitely not easy. Every lightbox works differently. I could make it work with the Pro Version of the Meow Lightbox, as this is the kind of features we would like to support.

Adding a checkbox to enable the Lightbox wouldn’t really work; the Lightbox would need to recognize this plugin and this specific behavior in order to really load the right image. There is one trick that I could use, and maybe some lightbox will fall into it (and it will appear to work), but it’s still a trick. And to be honest, I am not really into tricks, I prefer to build stable plugins, and avoid option or features if they push the code in a weird direction. My priority is strong architecture, that is built to last ??

Any idea is also very, very welcome! Feel free to play with the code and find a solution that works with your Lightbox and share it with everyone here.

Thank you for the detailed response, Jordy! I really appreciate the thought you put into this. I have more of a “mess with it until it works” approach, so, while I don’t actually know PHP, I ended up tweaking the plugin earlier today to do what I needed.

Basically I went into the mgcl_linker.php file, found every instance where the image classes are set, and replaced “no-lightbox” with the $rel variable (since I wasn’t using rel for anything else). So now I use the rel= field in each media file to specify the class required by Fancybox for my custom URL to launch properly in a lightbox (e.g. “fancybox-iframe” and “fancybox-image” — depends on what I’m trying to launch). It is working so far… though I realize I can now never update this plugin without reversing these changes. These are the consequences of using “tricks” and I accept them :-p

I’ve pasted the modified mgcl_linker.php file below for reference. (Hopefully this is okay because this is a free plugin? If not, I apologize, and feel free to delete!)

<?php

class Meow_Gallery_Custom_Links_Linker {

	public function __construct( $core ) {
    $this->core = $core;
    //add_filter( 'mgcl_linkers', array( $this, 'linker' ), 100, 6 );
	}

	// XXXX: Custom code with $aria, Christoph Letmaier, 14.01.2020
	function linker( $element, $parent, $mediaId, $url, $rel, $aria, $target ) {
    // Let's look for the closest link tag enclosing the image
    $media = get_post( $mediaId );
    $title = the_title_attribute(  array( 'echo' => false, 'post' => $media )  );
    $potentialLinkNode = $parent;
    $maxDepth = 5;
    do {
      if ( !empty( $potentialLinkNode ) && $potentialLinkNode->tag === 'a' ) {

        if ( $this->core->enableLogs ) {
          error_log( 'Linker: The current link (' . $potentialLinkNode->{'href'} . ') will be replaced.' );
        }

        if ( $this->core->parsingEngine === 'HtmlDomParser' ) {
          $potentialLinkNode->{'href'} = $url;
          $class = $potentialLinkNode->{'class'};
          $class = empty( $class ) ? ( $rel . ' custom-link' ) : ( $class . $rel . ' custom-link' );
          $potentialLinkNode->{'class'} = $class;
          $potentialLinkNode->{'title'} = $title;
          $potentialLinkNode->{'onclick'} = 'event.stopPropagation()';
          if ( !empty( $target ) )
            $potentialLinkNode->{'target'} = $target;
          if ( !empty( $rel ) )
            $potentialLinkNode->{'rel'} = $rel;
          if ( !empty( $aria ) )
            $potentialLinkNode->{'aria-label'} = $aria;
        }
        else {
          $potentialLinkNode->attr( 'href', $url );
          $class = $potentialLinkNode->attr( 'class' );
          $class = empty( $class ) ? ( $rel . ' custom-link' ) : ( $class . $rel . ' custom-link' );
          $potentialLinkNode->attr( 'class', $class );
          $potentialLinkNode->attr( 'title', $title );
          $potentialLinkNode->attr( 'onclick', 'event.stopPropagation()' );
          if ( !empty( $target ) )
            $potentialLinkNode->attr( 'target', $target );
          if ( !empty( $rel ) )
            $potentialLinkNode->attr( 'rel', $rel );
          if ( !empty( $aria ) )
            $potentialLinkNode->attr['aria-label'] = $aria;
        }
        return true;
      }
      if ( method_exists( $potentialLinkNode, 'parent' ) )
        $potentialLinkNode = $potentialLinkNode->parent();
      else
        break;
    }
    while ( $potentialLinkNode && $maxDepth-- >= 0 );

    // There is no link tag, so we add one and move the image under it
    if ( $this->core->enableLogs ) {
      error_log( 'Linker: Will embed the IMG tag.' );
    }
    if ( $this->core->parsingEngine === 'HtmlDomParser' ) {
	// XXXX: Custom code with $aria, Christoph Letmaier, 22.01.2020
	$element->outertext = '<a href="' . $url . '" class="' . $rel . ' custom-link" title="' . $title . '" aria-label="' . $aria . '" onclick="event.stopPropagation()" target="' . $target . '" rel="' . $rel . '">' . $element . '</a>';
    }
    else {
      if ( $parent->tag === 'figure' )
      $parent = $parent->parent();
      $a = new DiDom\Element('a');
      $a->attr( 'href', $url );
      $a->attr( 'class', ( $rel . ' custom-link' ) );
      $a->attr( 'onclick', 'event.stopPropagation()' );
      $a->attr( 'target', $target );
      $a->attr( 'rel', $rel );
	  // XXXX: Custom code with $aria, Christoph Letmaier, 22.01.2020
      $a->attr( 'aria-label', $aria );
      $a->appendChild( $parent->children() );
	  
      foreach( $parent->children() as $img ) {
        $img->remove();
      }
      $parent->appendChild( $a );
    }
    return true;
	}
}

?>

• This reply was modified 4 years, 2 months ago by ethanjrt.

Hello,

thanks @tigroumeow and @ethanjrt .

I’m doing it with the basic Elementor gallery, and for it to work I have removed the onClick event.

File: mgcl_linker.php

Replace the following line:
$element->outertext = '<a href="' . $url . '" class="' . $rel . ' custom-link" title="' . $title . '" aria-label="' . $aria . '" onclick="event.stopPropagation()" target="' . $target . '" rel="' . $rel . '">' . $element . '</a>';

… for this:
$element->outertext = '<a href="' . $url . '" class="' . $rel . ' custom-link" title="' . $title . '" aria-label="' . $aria . '" target="' . $target . '" rel="' . $rel . '">' . $element . '</a>';

I also commented on the following lines:
//$potentialLinkNode->{'onclick'} = 'event.stopPropagation()';

//$potentialLinkNode->attr( 'onclick', 'event.stopPropagation()' );

//$a->attr( 'onclick', 'event.stopPropagation()' );

I hope it helps you.

• This reply was modified 4 years ago by JordiRC.