WordPress
Training & Support at Georgia Southern

Lightbox Effect

The method described below is for Advanced Users Only (HTML knowledge required).

To open an image or video in a lightbox, add class=”lightbox” to the <a> tag. See the examples below for how to use this effect with images and videos.

Image
gsu-college-slide

Click to open in lightbox.

Here’s the sample code:

<a class=”lightbox” href=”http://example.com/image.jpg”><img src=”http://example.com/image.jpg” alt=”Image Description”></a>

Link

Click to Watch Video

Here’s the sample code:

<a class=”lightbox” href=”http://youtu.be/tR2eCj8ai2w”>Click to Watch Video</a>


Please use these effects responsibly on your site – remember that content editors have varying experience with HTML and having special code on your sites will make it harder for them to update. Also note that switching between the Text and Visual modes in the Page Editor may strip out the lightbox class.

Last updated: 5/20/2016

WordPress Training & Support provided by IT Services & Marketing and Communications