How to: Open text image link in a Lightbox
Below is an extract from our ‘Tips & Tricks‘ page.
The default behavior of a link to an image that is added to a text module (including a blog) is that it opens in the existing browser tab or, if set to target=”_blank”, in a new tab.
Example 1 <a href=”https://www.iconnik.co.uk/iconnik/wp-content/uploads/2018/02/Gravityscan.png”>Opens in existing tab</a> e.g. Opens in existing tab
Example 2 <a href=”https://www.iconnik.co.uk/iconnik/wp-content/uploads/2018/02/Gravityscan.png” target=”_blank” rel=”noopener”>Opens in new tab</a> e.g. Opens in new tab
Note: The rel=”noopener” is a security amendment added in WP 4.7.4. See more info here
However, it is also possible to open the image in the default Divi lightbox. A Lightbox is a method that displays images in full size (or as large as the screen size allows) and centred while dimming and disabling the rest of the web page until the Lightbox is closed by either clicking the close ‘X‘ or by clicking away from the image. For the image used in the above two examples, the effect is:
This is, in my opinion, superior to Examples 1 & 2 because it does not require a user to either hit the browser back button after clicking the link, to switch tabs to view the image or to close the new tab after viewing. Simply click the ‘X‘ or click away from the lightbox and its gone, leaving you to continue reading. A user still retains the option to open the image in a new tab if desired by right clicking the link and selecting ‘Open link in new tab’ or indeed to open it in a new window.
So, to use this method, copy the code below to the text module in text mode (not visual editor) editing the image URL and text as required
Obviously replace the full path to your image in the above example.
Note: you can enter a title between the “” (e.g. title=”Gravityscan Image”) if required. This places a ‘title’ when hovering over the text link AND below the lightbox image.