Source Code Structure

Once you've downloaded the component, you'll get a zip file containing 2 folders:


General structure:

* Linea Iconset is released for free under the license CC BY 4.0 LICENSE

Getting Started

1. Add the files to your project. To use GlassCase on a web page include the following files:

Drop the script tags of Modernizr in the <head> of your HTML. For a better performance, you should have them follow after your stylesheet references.

Add the fonts directory to your project. These files are used by the plugin to generate the icons.

2. Once you've included the necessary files, you can add 1 or more GlassCases to your page. The necessary HTML setup for the GlassCase consists of an unordered list of content.

The content can be:

  • Images: the default content type. Use the <img> tag.
  • Video:
    • IFrame (Youtube, Vimeo);
    • HTML5 Video.
    Use the <a> tag. Specify which type of video you want to show by adding the data attribute data-gc-type.

Images will be resized to be shown as thumbs and also will be used as display images. In case of video content: for the thumb images the plugin will generate an image including text that it's descriptive of the content it holds. The text can be changed through options.

Optionally, you can add captions to the Zoom Area. It is sufficient to add to the image tag the attribute data-gc-caption with the caption text.

Captions are available only for the image content type.

It is very important that you add the class gc-start to the list of images.


3. After the HTML setup, you can call the plugin.


4.  Go See Demos

Customizing

The GlassCase plugin can be customized through options. The plugin has a default configuration which is catered to the most basic and common use case. But if you want the plugin to behave different from its default configuration, you can override each of its default settings using the options.

For example, to change the plugin's thumbs position, from bottom to top, set the option thumbsPosition to top.

Options are grouped by area to which they pertain or affect.