How to Get a Lightbox Effect With a Single Image in Joomla!


Modal popup windows, called lightboxes, display images, links, movies or Web pages in a window after the Web page has dimmed or darkened. The Joomla! content manager does not have an easily accessible, built-in lightbox function, but relies instead on extensions provided by third-party developers. The Shadowbox Media Viewer plugin displays single images or a gallery of images within a lightbox. The plugin displays images using a link instead of the image tag and will display other types of media the same way.

  • Download the Shadowbox Media Viewer plugin extension from the Joomla! Extension Directory to your computer. Click "Install/Uninstall" from the Extensions menu in the Joomla! back-end administrator. Click "Browse," select the downloaded file, and click "Upload and Install."

  • Click on "Plugin Manager" from the Extensions menu. Find "Shadowbox Media Viewer" in the list of plugins. Click on the red circle to the right of the name to enable the plugin. It is unnecessary to modify any of the plugin parameters to display images.

  • Click on "Article Manager" from the Content menu. Find the article to add the lightbox image display to and click on it. The Article Manager opens the article for editing. Click on the "HTML" icon if you are using the TinyMCE editor to edit the HTML code for the article.

  • Insert the following line of HTML code where you want the image displayed.

    <p><a href="{image location}" rel="shadowbox"> <img src="{Image location}" /> </a></p>

    Substitute the location of the image for {image location} in both places. For example:

    <p><a href="images/stories/red-car.jpg" rel="shadowbox"> <img src="images/stories/red-car.jpg" /> </a></p>

  • Click the "Update" button if you are using the TinyMCE editor. Click on "Save" to save the article. Click the "Preview" link located above the Article Manager menu to load the website for viewing. Navigate to the article and hover the mouse pointer over the image. Click on the image and it will open in the lightbox.

Tips & Warnings

  • The Shadowbox Media Viewer plugin is a versatile extension capable of displaying a number of different kinds of media. Images are the only type of media enabled in the default configuration. You'll have to edit the plugin parameters using the Plugin Manager to enable the display of other media types.


Promoted By Zergnet



You May Also Like

Read Article

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!