Lightboxes: How to Create a Thumbnail Icon That Links to a Larger Image Using DSS

There may be times when you want to add an image to your website, but the image needs to be very large in order to view all the details. Because so large an image might cause page loading issues, it’s better to display that image in a pop-up window. For example, this might be helpful if you need to display a detailed infographic, but sizing it to fit your webpage causes the detail of that graphic to be lost.

Creating a thumbnail—a small image representation of a larger image—and linking it to the larger image can help manage the size of a particularly large photo, graphic, or picture. By placing the image in a pop-up window, the image doesn’t take up too much real estate on your webpage, and it doesn’t cause problems or crash your site because of its size.

Create a Thumbnail Image That Links to the Larger Image

Step 1: Resize the original image you want to use, so that it’s two different sizes. The small image will be the thumbnail icon the user clicks in order to see the larger-sized version of the image in a pop-up window. Because you want the smaller image to fit nicely on the page, resize it to approximately 600 pixels wide or less. The larger version of that image, to be placed in the pop-up window, should be large enough for users to see the necessary and critical details. If you need help with resizing, read through our instructions on this process.
 

Step 2: Once you’ve sized both images, save them with different filenames. DSS does not allow files to have the same names.
 

Step 3: Log into DSS, and display the content where you want the thumbnail image to be added.

Tip: You can use the Search and Edit option under any of the Site content topics to find the content you’re looking for. Or you can use the orange Search Items magnifying glass icon at the left side of the screen.

Step 4: Once the desired content displays, click the location where you want to insert the image. In the example below, the cursor is placed at the end of the first sentence. This is where the image will be placed.

Step 5: To select the image you want to place, under the Rich Content Editor heading click the Image icon. This icon is designated by a picture of a mountain. If you mouse over the icon, the word “Image” displays.

Step 6: Click the Browse Server button next to the URL field.

Step 7: Click the Upload icon at the top of the window.

Step 8: Navigate to the location of the smaller saved image you want to use, and double-click it.

Step 9: Once the image uploads into the DSS Image Library, double-click it again. This places the image into the Image Properties dialog box.

Step 10: If you’re satisfied with the size of the image, click the orange OK button. Your image is placed in the specified location within the content.

Step 12: In the Image Properties dialog box, select the information in the URL field and copy it, and then click the CANCEL button. You’re not trying to place this image on your webpage.

Step 14: Under the Rich Content Editor, click the Link icon.

Step 15: In the Link dialog box, paste the copied URL information into the URL field.

Step 17: Under the Target section, click the down arrow, choose popup window, and click OK. The larger image is now linked to the thumbnail image.

Step 19: Click the orange SAVE button at the top right of the DSS screen.

Step 20: Click the page URL to test your thumbnail image. Double-click the image to ensure that the larger image pops up in a separate window.

Notice that the user can now see the larger image that includes the complete landscape after clicking the thumbnail image of the palm tree.

Are You A Lawyer Or podiatrist Who Wants To Learn How Solid Content Can Earn You More Clients?

If you are seeking a trusted, authoriative partner to help you write content that not only attracts but actually converts into clients, Foster Web Marketing is here to help. Contact us online or call our office directly at 888.886.0939 to schedule your free consultation. We have been helping clients throughout the United States and internationally since 1998 are confident we can help you not only reach, but exceed your goals.