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

glasscase/
├── src_dev/  -> the un-minified version of css and js files
└── src_prod/ -> the minified version of css and js files

General structure:

glasscase/
├── css/      -> contains the css file
├── fonts/    -> contains the fonts*(Linea Iconset), that are used for creating the icons for the component
├── images/   -> contains loader.gif, that is used by the component 
└── js/       -> contains the js file(s)

*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:

<!-- GlassCase stylesheet -->                                        
<link rel="Stylesheet" type="text/css" href="../css/glasscase.min.css"/>
<!-- Modernizr a JavaScript library that detects HTML5 and CSS3 features in the user’s browser -->
<script src="../js/modernizr.custom.js" type="text/javascript"></script>
<!-- GlassCase plugin requires jQuery 1.7+ -->
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- GlassCase plugin's JS script file -->
<script src="../js/jquery.glasscase.min.js" type="text/javascript"></script>

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) and/or HTML5 Video. Use the <a> tag, to specify which type of video you want to show add 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.

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

<ul id="glasscase" class="gc-start">
    <li><img src="assets/img1.jpg" alt="Text" data-gc-caption="Your caption text" /></li>
    <li><img src="assets/img2.jpg" alt="Text" /></li>
    <li><img src="assets/img3.jpg" alt="Text" /></li>
    <li><a href="/assets/video.mp4" data-gc-type="video"</a></li>
    <li><a href="//www.youtube.com/embed/0vxOhd4qlnA" data-gc-type="iframe"</a></li>
</ul>

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

<!-- Calling the GlassCase plugin -->
<script type="text/javascript">
    $(document).ready( function () {
        //If your <ul> has the id "glasscase"
        $('#glasscase').glassCase();
    });
</script>

That's it!

The Demos you can see here.

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.


<script type="text/javascript">
    $(document).ready( function () {
        $('#glasscase').glassCase({ 'thumbsPosition': 'top' });
    });
</script>

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

Display Options

Name Type Default Description
widthDisplay number 400 The width of the Display. Value is in px.
heightDisplay number 534 The height of the Display. Value is in px.
isDownloadEnabled boolean true Enables or disables the feature of download. The feature consists in the ability to download the displayed image.
From version 1.1 the download icon will be visible(and available) only in modern browsers.
Deprecated in version 3.0
isShowAlwaysIcons boolean false If true the icons on the Display Area will always be shown. If false, the icons we'll appear only when the user hovers the Display Area.
Added in version 2.0
speedHideIcons number 3000 The spead with which the icons disappear on the Display Area. The speed is given in milliseconds.
Added in version 2.0
mouseEnterDisplayCB function function () { } Callback for the mouseenter event of Display Image.
Added in version 2.1
mouseLeaveDisplayCB function function () { } Callback for the mouseleave event of Display Image.
Added in version 2.1
isAutoPlayDisplay boolean false Enable or disables the auto play of the images.
Added in version 3.0
pauseTimeDisplay number 3000 Time between the change of images enabled by isAutoPlayDisplay. Value is in milliseconds.
Added in version 3.0
isPauseOnHoverDisplay boolean true If set to true, on hovering the display image the auto play display will pause.
Added in version 3.0

Thumbs Options

Name Type Default Description
thumbsPosition string 'bottom' The position of thumbs: it is relative to the Display Area.
Possible values: 'top'; 'bottom'; 'left'; 'right'.
Options left && right were Added in version 2.0
nrThumbsPerRow number 5 Number of thumbs per row.
isThumbsOneRow boolean true If true -> the thumbs will be shown on one row;
If false -> all thumbs will be shown. This value can be used only when the thumbsPosition is set to top or bottom.
isOneThumbShown boolean false Having only one thumb, it (the thumb) can be hidden. If the option is set to false the thumb will be hidden.
firstThumbSelected number 0 Manages the ability to set the selected thumb on component load. Thumb counting starts with 0 (zero). If the set value is outside the range the value will be set to 0.
colorActiveThumb string '-1' Sets the color of the active thumb. By default it will use the value set in the css.
To set a color use the following format: '#xxxxxx', where xxxxxx is the number of color in hex.
thumbsMargin number 4 The distance between the thumbs and display area.
The value is in px.
Added in version 1.4
isHoverShowThumbs boolean false If true, hovering a thumb will change the displayed image.
Added in version 2.0
slideType string 'slideRow' The sliding effect related to the thumbs area. Possible values: 'slideRow', 'slideElement'.
Added in version 3.0

Zoom Options

Name Type Default Description
zoomPosition string 'right' The position of the Zoom: it is relative to the Display Area.
Possible values: 'left'; 'right'; 'inner'.
The inner option was Added in version 2.0
autoInnerZoom boolean true If true: In case that the zoom doesn't fit on the page, the zoom will be set in inner zoom position.
Added in version 2.0
isZoomEnabled boolean true Enables or disables the zoom.
Added in version 1.1
isSlowZoom boolean false Enables the effect of "slowing" the movement of zoom.
Added in version 1.3
speedSlowZoom number 1200 Determines how long the animation will run. The speed is given in milliseconds.
Added in version 1.3
isZoomDiffWH boolean false Determines if the zoom's width and height have different values.
If false and zoomWidth == 0 and zoomHeight == 0 => width will be equal to height of the image container.
If true => height will be different from width.
Added in version 1.4
zoomWidth number 0 The width of the zoom. The value is in px.
If zoomWidth is bigger than the width of the original image then to the zoomWidth will be assigned the width of the original image.
If zoomWidth == 0 then to zoomWidth will be assigned the width of the Display Container.
Added in version 1.4
zoomHeight number 0 The height of the zoom. The value is in px.
If zoomHeight is bigger than the height of the original image then to the zoomHeight will be assigned the height of the original image.
If zoomHeight == 0 then to zoomHeight will be assigned the height of the Display Container.
Added in version 1.4
zoomAlignment string 'displayImage' Possible values: 'displayImage', 'displayArea'.
Added in version 1.4
zoomMargin number 4 The distance between the Zoom Area and Display Area.
The value is in px.
Added in version 1.4

Lens Options

Name Type Default Description
isSlowLens boolean false Enables the effect of "slowing" the movement of lens.
Added in version 1.3
speedSlowLens number 600 Determines how long the animation will run. The speed is given in milliseconds.
Added in version 1.3

Overlay Options

Name Type Default Description
isOverlayEnabled boolean true Enables or disables the overlay.
Added in version 1.1
isOverlayFullImage boolean false If true the image in overlay will be shown in full size and only.
If false the image will fit the display. On double clicking, the image size will be toggled. If the image is in fit => after double click it will be shown in full size. If the image is in full size => after double click it will fit the display.
Added in version 1.3

Caption Options

Name Type Default Description
isZCapEnabled boolean true Enables or disables captions for Zoom Area.
Added in version 2.1
capZType string 'in' The type of captions: in-side the Zoom Area or out-side the Zoom Area. If Zoom position is inner => the type of the captions will be set to in.
Possible values: 'in'; 'out'.
Added in version 2.1
capZPos string 'bottom' Position of captions in relation to the Zoom Area.
Possible values: 'bottom'; 'top'.
Added in version 2.1
capZAlign string 'center' The alignment of the caption text.
Possible values: 'center'; 'left'; 'right'.
Added in version 2.1

Video && IFrame Options

Name Type Default Description
iframeWidth number 640 The iframe width. Value is in px.
Added in version 3.0
iframeHeight number 390 The iframe height. Value is in px.
Added in version 3.0
txtImgThumbIframe string 'IFRAME' The text that is used by the image thumb holder, for the iframe thumb image.
Added in version 3.0
videoWidth number 640 The HTML5 video width. Value is in px.
Added in version 3.0
videoHeight number 390 The HTML5 video height. Value is in px.
Added in version 3.0
txtImgThumbVideo string 'VIDEO' The text that is used by the image thumb holder, for the video thumb image.
Added in version 3.0

General Options

Name Type Default Description
isKeypressEnabled boolean true If true, the option enables the keyboard navigation. If false it disables the keyboard navigation.
colorIcons string '-1' Sets the color of icons used by the component. By default, it will use the color defined in css.
To set a color use the following format: '#xxxxxx', where xxxxxx is the number of color in hex.
speed number 400 Determines how long the animation will run. The speed is given in milliseconds.
This value is used in the animation of lens; zoom; overlay; slide.
Added in version 1.3
colorLoading string '-1' Sets the color of the loading wheel used by the component. By default, it will use the color defined in css.
To set a color use the following format: '#xxxxxx', where xxxxxx is the number of color in hex.
Added in version 2.0
textImageNotLoaded string 'NO IMAGE' The text that is used by the holder, in case that the image did not load.
Added in version 2.0

Data Attributes

Name Description
data-gc-caption Enables the captions. The value of this attribute holds the text of the captions.
Captions are only available for images content type.
Added in version 2.1
data-gc-type The type of the element.
Possible values: iframe, video. When the content is an image there is no need to indicate the content type.
Added in version 3.0
data-gc-width Defines the width of the container. Overrides the value defined in the plugin's options. This data attribute affects the following type of elements: iframe, video.
Added in version 3.0
data-gc-height Defines the height of the container. Overrides the value defined in the plugin's options. This data attribute affects the following type of elements: iframe, video.
Added in version 3.0
data-gc-formats This attribute is used only by the video element type. It is used for specifying multiple source files(multiple formats) as a fallback in case the user's browser doesn't support one of them. The type of this attribute is an array of strings.
e.g.: data-gc-formats=["../../images/m1.webm"]
Added in version 3.0
data-gc-poster This attribute is used only by the video element type. Provides an image to show before the video loads.
Added in version 3.0