Contact Us:
- Marketing Communications
- Brown Hall
- Scranton, 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-width
anddata-height
attributes to predefine image dimensions. It is recommended to use these attributes for SVG files. - A caption can be added using the
data-caption
attribute. - 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: