Lightbox

[dapunkt]

I'm looking for a minimal lightbox solution, so i can skip my paid plugins, any advice?

[jeffreyvr]

Hi @dapunkt,

If it's very simple, I will sometimes write a lightbox myself. Not sure what the requirements for your lightbox are, but below you'll find an example. Note that it only looks for image links within elements that are within a .wp-block-image class.

/**
 * Lightbox.
 *
 * @return void
 */
function tailpress_lightbox_footer() {
    ?>
    <div class="lightbox fixed left-0 w-full hidden top-0 z-20 h-full" style="<?php echo is_admin_bar_showing() ? 'margin-top: 32px;' : null; ?>">
        <div class="flex justify-center items-center h-full">
            <div class="content bg-white p-8 shadow-md">
                <!-- Content is inserted here -->
            </div>
        </div>
        <button type="button" class="rounded-full z-30 rounded-r-none px-5 py-4 close-lightbox fixed top-0 right-0 text-white">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 inline ml-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <div class="overlay hidden w-full h-full bg-black opacity-75 fixed top-0 right-0 z-10"></div>
    <?php
}
add_action( 'wp_footer', 'tailpress_lightbox_footer' );

And then some JS (with jQuery):

jQuery(function ($) {
    var lightbox = $('.lightbox');
    var overlay = $('.overlay');

    $('.wp-block-image a').click(function (e) {
        e.preventDefault();

        let image_url = $(this).attr('href');

        lightbox.toggleClass('hidden');
        overlay.toggleClass('hidden');

        lightbox.find('.content').html('<img src="' + image_url + '">');
    });

    $('.close-lightbox').click(function (e) {
        tailpress_close_lightbox(lightbox);
    });

    $(document).keyup(function (e) {
        if (e.keyCode === 27) {
            tailpress_close_lightbox(lightbox);
        }
    });

    function tailpress_close_lightbox(lightbox) {
        lightbox.addClass('hidden');
        overlay.addClass('hidden');
    }
});

Example HTML:

<div class="wp-block-image">
    <a href="https://github.com/jeffreyvr/tailpress/raw/master/screenshot.png"><img src="https://github.com/jeffreyvr/tailpress/raw/master/screenshot.png" class="w-48"></a>
</div>

[dapunkt]

thx Jeffrey, I 'll give it a try!

[JonasBrandit]

Morning!

As @jeffreyvr wrote if you are going to have simple a "lightbox" I would go for a modal + Apline.js
This is really simple and you can then skip jQuery