Image in modal overlay should have a close button

Hallo,

in the past (until 2010) wordpress images were shown in a thickbox when linked and clicked in a post.

Now images are shown in a modal full screen overlay (I think this is called lightbox).

The reader is forced to use the back-button to leave the overlay (lightbox). I use the full screen overlay to show diagrams (.png) which are hard to read in a small size (e. g. Hartz 4 und Bürgergeld – statistische Daten und Fakten).

Is it possible to add a close button in the overlay or to leave the full screen overlay by clicking into the image or outside the image (instead triggering the zoom-function)? What have I got to do?

Thanks for help!

Greetings
Sönke

3 Likes

Hello, @Soenke2!

If I understand it right, there is no lightbox at your site? Clicking on an image just opens its direct URL. I mean, this is not overlay, it’s just an image file opened in browser tab (check the address):

Lightboxes are provided by plugins, as there are tons of designs, settings and preferred behaviour types.

2 Likes

Thank you very much - … I thougt the image file would be opened in front of the black background (no other browser tab is opened) and this would be called lightbox (there you can zoom by clicking). …

Then my question should be corrected - is it possible to add a close button to the opened image file? Is it possible to edit the shown background (to tell the reader that he must click the back button to return)?

(perhaps something like

…:before {content: “\X”;position: absolute;top: 10px; right: 10px;}
…:before a …

or …)

1 Like

When viewing a direct file URL in browser you deal with a source file directly, not a site page. There is no way to insert buttons and CSS-rules into a .jpg file. It’s an image (binary data), but not a HTML markup.

When you install lightboxes, links default behaviour is overriden so you don’t deal with souce files directly anymore. Clicking on a link initiates javascript that shows another piece of markup (modal window). Image data is loaded into it, but you are still viewing a site page with HTML markup, not a file directly. That’s why there are buttons, controlls, labels etc.

So. If you want a lightbox behviour, your image links should:

a) lead to an attchmetnt pages. For that you should have a proper attchment.php template in your theme and use an option “link option: Attachment page” when inserting images into posts:

or

b) inititate a lightbox plugin execute. For that you need to install and setup one of lightbox plugins. Most of them would override default image links behaviour automtically.

“B” is the most simple and suitable solution unless you develop something specific with a seprate page (URL) for each single image.

2 Likes

Thank you very much!

I thougt something could be customized - even because of the black background layer “behind the image”.

Greetings

1 Like