Categories
Plugins

@staaky/fresco

Fresco
A Beautiful Responsive Lightbox.
Fresco comes with thumbnail support, fullscreen zoom, Youtube and Vimeo integration for HTML5 video and a powerful Javascript API.

Fresco

Usage

Installation
Basic usage
Setting Options
Groups
User Interface
Overflow
Thumbnails
Performance, best practices

Media types

Image
Youtube
Vimeo

Javascript API

Groups
Position
Links

Options
Callbacks

Skins

Adding a new skin
Custom CSS
Changing the default skin

Usage

Installation
Download Fresco and include it below the latest 3.x release of jQuery:

Alternatively Fresco can be installed using npm or yarn:
npm i @staaky/fresco
yarn add @staaky/fresco

Basic usage
The easiest way to use Fresco is by adding the class fresco to a link.
Show image
The alternative is using the Javascript API. For more on this see the API docs.
Fresco.show(“image.jpg”);
Caption

Setting Options
Extra Options and Callbacks can be added using the data-fresco-options attribute.
Caption on top

Groups
Create groups by giving links a data-fresco-group attribute. Each group should have a unique name. Groups can contain multiple types of content, images can be mixed with Youtube videos for example:
This group
has shared
options

User Interface
There are two types of user interface settings, outside and inside. outside is the default and will put user interface elements outside of the window.
data-fresco-group-options=”ui: ‘outside'”
The alternative is inside, it puts the elements inside the window:
data-fresco-group-options=”ui: ‘inside'”
On small screens Fresco will switch to an alternative UI mode to optimize use of the viewport. This mode uses the entire screen for navigation and doesn’t close Fresco when clicking the overlay.
Note: Touch devices will always use ui: ‘outside’ no matter which ui option is selected.
Important: ui: ‘outside’ will be forced whenever a group contains more than images. The reason for this is that interaction with content like Youtube videos would be impossible if it had overlapping user interface elements.

Overflow
Overflow can be used to create a zoom-like effect. By default the overflow options is set to false, which resizes images to fit within the viewport. Using overflow true will allow overflow along the y-axis.
Here’s a popular usecase of overflow combined with vertical thumbnails:
Overflow
2
Note: Overflow is not supported on touch based devices.

Thumbnails
Thumbnails are enabled by default and are automatically generated for images and Youtube videos. They can also be disabled by setting the thumbnails option to false:
data-fresco-group-options=”thumbnails: false”
By default the thumbnails option is set to horizontal, the alternative is vertical:
data-fresco-group-options=”thumbnails: ‘vertical'”

Performance, best practices
To improve performance it’s recommended to create your own thumbnails. This avoids having to load entire source images to generate them on the fly. Providing thumbnails using the thumbnail option speeds up load times and saves bandwidth, especially noticeable with groups containing large images.
Generated Thumbnails
2
Note: The thumbnail generated is set to 240x240px because the maximum dimensions of a thumbnail are 120x120px. Having double the size available will make sure the thumbnails look good on Retina displays.

Media types
Fresco attempts to automatically detect the media type using the given url. The type can also be set to one of the following values using the data-fresco-type attribute: image, youtube or vimeo.

Image
Most of the time setting the type will not be required for images, it will be required in cases where Fresco cannot detect it based on the url:
Image

Youtube
Links to Youtube videos will be embedded using the Youtube