Contact Us:
- Marketing Communications
- Brown Hall
- 草榴社区, PA 18510
- The 草榴社区
- cms@scranton.edu
Photos
fancybox v3.5 - Images
Examples of displaying images individually and combining into a gallery
Individual images
Add data-fancybox attribute to any link to enable fancyBox
Image gallery
Groups are created by adding the same data-fancybox attribute value
Gallery with one preview image
To show only one or a few images but have a large gallery, simply hide the rest of the links.
Optionally, use data-thumb for thumbnail image.
Data attributes
- Use
data-widthanddata-heightattributes to predefine image dimensions. It is recommended to use these attributes for SVG files. - A caption can be added using the
data-captionattribute. - It is possible to use
data-*attributes to set any option. For example,data-small-btn="true"would display small close button on top of the image and hide the toolbar.
Using trigger element
Sometimes you might need to start fancyBox from different element - simply use data-fancybox-trigger attribute with the value of fancyBox group name. This allows to avoid content duplication in the gallery. For example, show fancybox when clicking on featured image:
