Title: Image lightbox html code
Last modified: May 19, 2023

---

# Image lightbox html code

 *  Resolved [xelenium7000](https://wordpress.org/support/users/xelenium7000/)
 * (@xelenium7000)
 * [3 years ago](https://wordpress.org/support/topic/image-lightbox-html-code/)
 * 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 :
 *     ```wp-block-code
       $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](https://wordpress.org/support/users/gdandrija/)
 * (@gdandrija)
 * [3 years ago](https://wordpress.org/support/topic/image-lightbox-html-code/#post-16792297)
 * Hi [@xelenium7000](https://wordpress.org/support/users/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](https://codepen.io/gschier/pen/kyRXVx)
 * I hope this helps, have a nice day,
   Andrija
 *  Thread Starter [xelenium7000](https://wordpress.org/support/users/xelenium7000/)
 * (@xelenium7000)
 * [3 years ago](https://wordpress.org/support/topic/image-lightbox-html-code/#post-16797451)
 * 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.

 * ![](https://ps.w.org/coblocks/assets/icon-256x256.jpg?rev=2243972)
 * [Page Builder Gutenberg Blocks – CoBlocks](https://wordpress.org/plugins/coblocks/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/coblocks/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/coblocks/)
 * [Active Topics](https://wordpress.org/support/plugin/coblocks/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/coblocks/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/coblocks/reviews/)

## Tags

 * [image](https://wordpress.org/support/topic-tag/image/)

 * 2 replies
 * 2 participants
 * Last reply from: [xelenium7000](https://wordpress.org/support/users/xelenium7000/)
 * Last activity: [3 years ago](https://wordpress.org/support/topic/image-lightbox-html-code/#post-16797451)
 * Status: resolved