If you have any problems, looking for some specific solution, or have a suggestion, please contact us: tinycomp@outlook.com
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
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.
<head>
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:
<img>
<a>
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.
data-gc-caption
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.
gc-start
3. After the HTML setup, you can call the plugin.
4. Go See Demos
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.
bottom
top
thumbsPosition
Options are grouped by area to which they pertain or affect.