Creighton Students
Manual Home  >  Typo3 assistance  >  Help working with content  >  Types of Content  >  Special content   >  Adding a photo gallery  >  Adding a lightbox
Adding a lightbox

What can this do for me?

A lightbox offers a way that users can view a larger version of an image or illustration without leaving your page. 

Pros

  • Users do not have to leave your page to view larger images, images display in an overlay.
  • If there is more than one image rsers do not have to close the lightbox, there are next/previous buttons.
  • The page still functions if a user clicks an image too soon (page doesn't fully load).   They are taken to the image without the lightbox effect.  They will have to click the back button to get back to your page though.

Cons

  • Users do have to have Javascript turned on.  However, even if they do not have it on, users can click on the image to view the larger image without the lightbox effect.
  • You have to add a small section of HTML to the link to create the popup.
  • Users do have to wait for the page to fully load for the lightbox to work.

NOTE ---- Do not expect the lightbox to work while inside Typo3 using the View Module.  It also may not work in "preview" mode.  You will probably need to view it on your site.  This will leave the land of probable to absolute when Creighton upgrades Typo3 to the next version.

Examples

Image Example :

Click image for full size:

Live examples (wait for page to fully load):

Examples of styling the lightbox.

Your lightbox need not be like our lightbox.  The styling can be changed easily to suit your needs.

We can change the opacity of the overlay

(images are already full size) Opacity less opaque
 

Changing the opacity to more opaque.

The styling is quite flexible, you can change fonts (not shown) and colors:

Advanced use of the light box.

The lightbox can also be used to open a page.  On the Aesop's Fables Artifacts Landing page, The "Abbreviations Used" shows an example of this.

Creighton University