Using Simple Light Box with WordPress Gutenberg?

Hi

How would I go about using Simple Light Box with Gutenberg? I am writing a tutorial on using lightboxes without installing a plugin and thought that this would be a fitting project to highlight. Thanks!

FYI: There is the ready-made Wordpress plugin Responsive Gallery Grid which incorporates SimpleLightBox! Maybe it suits you.

I think it just works. You can use the simplelightbox wordpress plugin or write it on your own with something like this:

in your functions.php

add_filter('the_content', [$this, 'autoexpand_rel_wlightbox'], 99);
add_filter('the_excerpt', [$this, 'autoexpand_rel_wlightbox'], 99);

public function autoexpand_rel_wlightbox ($content) {
    global $post;
    $pattern     = "/(<a(?![^>]*?rel=['\"]lightbox.*)[^>]*?href=['\"][^'\"]+?\.(?:bmp|gif|jpg|jpeg|png|webp)['\"][^\>]*)>/i";
    $replacement = '$1 class="simplelightbox" rel="lightbox['.$post->ID.']">';
    $content     = preg_replace($pattern, $replacement, $content);
    return $content;
}

and in your javascript

if(document.querySelectorAll('a.simplelightbox').length ) {
    let simplelightbox = new SimpleLightbox('a.simplelightbox',{});
}

Hi @andreknieriem Andre

I began writing a tutorial to add to this article: https://easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/

But the functions code produced an error.

/* Simple Light Box */
add_filter('the_content', [$this, 'autoexpand_rel_wlightbox'], 99);
add_filter('the_excerpt', [$this, 'autoexpand_rel_wlightbox'], 99);

public function autoexpand_rel_wlightbox ($content) {
    global $post;
    $pattern     = "/(<a(?![^>]*?rel=['\"]lightbox.*)[^>]*?href=['\"][^'\"]+?\.(?:bmp|gif|jpg|jpeg|png|webp)['\"][^\>]*)>/i";
    $replacement = '$1 class="simplelightbox" rel="lightbox['.$post->ID.']">';
    $content     = preg_replace($pattern, $replacement, $content);
    return $content;
}

Is giving this error:

Your PHP code changes were rolled back due to an error on line 15 of file wp-content/themes/blocksy-child/functions.php. Please fix and try saving again.

syntax error, unexpected 'public' (T_PUBLIC), expecting end of file

Hi @andreknieriem Andre

I began writing a tutorial to add to this article: https://easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/

But the functions code produced an error.

/* Simple Light Box */
add_filter('the_content', [$this, 'autoexpand_rel_wlightbox'], 99);
add_filter('the_excerpt', [$this, 'autoexpand_rel_wlightbox'], 99);

public function autoexpand_rel_wlightbox ($content) {
    global $post;
    $pattern     = "/(<a(?![^>]*?rel=['\"]lightbox.*)[^>]*?href=['\"][^'\"]+?\.(?:bmp|gif|jpg|jpeg|png|webp)['\"][^\>]*)>/i";
    $replacement = '$1 class="simplelightbox" rel="lightbox['.$post->ID.']">';
    $content     = preg_replace($pattern, $replacement, $content);
    return $content;
}

Is giving this error:

Your PHP code changes were rolled back due to an error on line 15 of file wp-content/themes/blocksy-child/functions.php. Please fix and try saving again.

syntax error, unexpected 'public' (T_PUBLIC), expecting end of file

I think you need to remove the public access modifier, since modifiers are needed for methods inside the class.

In your case, it's just a function

Hi @olegopro Oleg

Can you add the adjusted code example so that I can try it out?