Adding a Popup Lightbox Effect on an Image

Why you would use Lightbox effects?

  • Lightbox effects can be very useful, especially on the thumbnail, single or gallery images that are too small to view.
  • This module can help view and maximise the image using the modal popup view for a better resolution and display.

How to add lightbox effects on images in WebEd CMS editor

This documentation will teach a non-technical user to add lightbox effects to the images.

Uploading your Image

STEP-BY-STEP
  • 1
    Open your WedEd editor on the page you want to insert the image
  • 2
    Upload your image using the image icon
    Resizing Images
  • 3
    Select the image you just uploaded
    Resizing Images
  • 4
    Select the image path then use ctrl-c to copy the URL of the image
  • 5
    Click OK to close the image window and insert the image
    Resizing Images
  • 6
    Select the image you recently upload
    Resizing Images

Adding the Hyperlink

STEP-BY-STEP
  • 1
    Select the link icon on the text editor
    popup lightbox
  • 2
    Paste the URL you copied on step #3 on the Link Info > URL
    popup lightbox

Adding the Style Classes

STEP-BY-STEP
  • 1
    Click on the Advanced Tab
  • 2
    Under Stylesheet Classes enter "grouped_elements"
  • 3
    Under Relationship enter "group1"
    popup lightbox
  • 4
    Click OK then save
f