Image lightbox html code

  • Resolved xelenium7000

    (@xelenium7000)


    1 year, 10 months ago

    Hello.

    Thanks for your awesome plugin! It’s really nice to have a good open source plugin in the jungle of premium and false free builder <3

    I made a plugin of my own to display a random image on a page.
    The plugin is used with a shortcode like this :
    [random_media_image]

    It outputs some html code like this :

    $output = '<figure class="wp-block-image size-large" style="margin-top: 10px;"><img class="random-media-image" src="' . $image_url . '" alt="' . esc_attr($alt_text) . '"><figcaption class="wp-element-caption" style="text-align: center;">' . esc_attr($caption) . '</figcaption></figure>';

    I want the image to open in a lightbox when clicked.
    I’ve tried to add the has-lightbox class to the <figure>. But i miss some javascript and the div containing the lightbox (I think my html is inserted in the DOM after everything).

    Is there an easy way to add the lightbox? Or do I have to make my plugin insert some js and lightbox div…etc?

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support gdandrija

    (@gdandrija)

    Hi @xelenium7000,

    First of all, thank you so much for your kind words ??

    Regarding your question, yes it is possible. That said, you would need to add some additional HTML and CSS code. Of course, it is possible to create a lightbox using JS as well, however, I believe you will find this solution a bit more lightweight.

    Here is a code snippet that you can use as an example:
    https://codepen.io/gschier/pen/kyRXVx

    I hope this helps, have a nice day,
    Andrija

    Thread Starter xelenium7000

    (@xelenium7000)

    Thanks for your reply. It was too complicated to add some css and js. As i want the same kind of lightbox as the default one.

    I opted for a “very dirty” but simple solution : i’ve add a blank pixel image on the same page. And that image block have the lightbox option activated. So i have the css and js on the page.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image lightbox html code’ is closed to new replies.

Tags