How to Make Images Pop Out Via Lightboxes (And Why It’s Important to Do So)

It’s probably happened to you dozens of times: you’re browsing a website and click on an image, but the image file opens up in a new window—or worse, redirects to a new address. The image may be poorly formatted, blurry, and offer no new information…and you’ve been led away from the website you were using. Did you go back to the original site, or did you start your search over again?

If you haven’t implemented lightboxes for your images, you could be redirecting hundred or thousands of potential customers every time they click on an image on your website. Luckily for users of our Dynamic Self-Syndication™ (DSS™) marketing software, there is a simple way to keep visitors on the page when they want a closer look at your pictures and videos.

How to Add Image Lightboxes to Your Website Using DSS

Lightboxes are particularly useful if you are adding images that need to be very large to view (such as infographics), but that can cause page loading issues at the original large size. Here is a step-by-step guide to placing a large image in a lightbox:

Step 1: Resize the image into two new sizes. You will need two separate images: the smaller image will be the one that the user clicks to view the larger image. The smaller image should be about 600 pixels wide or less to fit nicely on the page, but the popout image can be as large as it needs to be for the user to see all the details. Save the images with different file names (the file names cannot be the same in DSS).

Step 2: Find the page where you would like to place the small image. Go to the Content Editor and click on the image icon in the toolbar and upload/insert the small image.

Step 3: Now, go through the same steps to add another image, but this time you are not going to save it. Click the image icon and upload the large image. After you click Send to Server, the image properties box will appear. Select the information that is in the URL field and copy it. Now, click Cancel.

Step 4: Go to the small image you added to the page and right click on it, then select the Link icon in the toolbar.

Step 5: Paste the URL you just copied into the URL field.

Step 6: Go to the Target tab. In the Target dropdown, choose popup window.

Step 7: Under popup window features, choose resizable, and scroll bars so that if the image is large, it will display scroll bars for the user to move through it. Click OK to save.

Step 8: Your image should now appear in a lightbox. Remember to check your work on the live version of the page!

Additional Tips to Make Your Website More User-Friendly

DSS was created to make communicating with your customers as easy as possible, and there are endless ways to improve that connection. Find out how to bring in clients through email using our advanced email editor, create hyperlinked thumbnail images, or visit our learning center for more ways to get the most out of DSS.