Skip to main content
OCLC Support

Clickable preview image to expand

  1. Last updated
  2. Save as PDF

 Link:  See a live example.

 View:  View source code in CONTENTdm Cookbook Demo Site.

On the item-detail page, there is an Expand button on the upper-right corner of the preview image which brings up the image or PDF viewer. This recipe is developed based on the request to make the Expand button more intuitive and convenient to use.

This CSS recipe stretches the Expand button so that it covers the entire preview image, and then sets the button to be transparent. As a result, you have a big invisible Expand button, and it will feel like you are clicking on the preview image to open the image or PDF viewer.

This recipe can be applied either at global or collection level, but global level is recommended for consistent user experience.