Product:
Tutorial:
In the lightbox created with Wonder Lightbox, there is a close button on the top right corner of the popup.
But in some cases, if you use the lightbox to open a div, you may want to add an extra close lightbox link to the div content, or you may want to add the link to the title if you open an image lightbox or video lightbox.
To add a close link to the div content, you just need to add the following HTML code to your div HTML code:
<a href="#" onclick="JavaScript:jQuery('#html5-close').click();return false;">Close Lightbox</a>
An online demo is as follows:
Open a Div in Lightbox with Close Lightbox link
If you use the lightbox to open an image or video, you can add the link to the lightbox title.
When adding the code to the lightbox title, the HTML entities in the code must be encoded. You can use the following online tool to encode the HTML entities: Online HTML Entities Encode and Decoder.
After encoding, the HTML code is as follows:
<a href="#" onclick="JavaScript:jQuery('#html5-close').click();return false;">Close Lightbox</a>
You can then add the code to the lightbox title attribute:
<a class="wplightbox" href="https://www.youtube.com/watch?v=pFaGie0xmbo" title="<a href="#" onclick="JavaScript:jQuery('#html5-close').click();return false;">Close Lightbox</a>">YouTube Lightbox</a>
An online demo is as follows:
