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

glasscase/
├── documentation/          -> the offline version of the plugin documentation
├── glasscase_development/  -> the un-minified version of css and js files
└── glasscase_production/   -> 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.

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 images. The images will be resized to be shown as thumbs and also will be used as display images.

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="images/img1.jpg" alt="Text" data-gc-caption="Your caption text" /></li>
    <li><img src="images/img2.jpg" alt="Text" /></li>
    <li><img src="images/img3.jpg" alt="Text" /></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
isShowNavIcons boolean true Shows or hides the prev/next icons from the Display Area.
Added in version 3.0
hasDisplayBorder boolean true Shows or hides the border on the Display Area.
Added in version 3.0
hasCustomDisplayCursor boolean false If true for Display Area it will be used the custom cursor from /images/custom.cur
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.
The 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.
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 3 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
isImageThumbs boolean true If true, the thumbs will preview the image, else the thumbs will be shown as squares. Hovering a square thumb will preview the image.
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 3 The distance between the Zoom Area and Display Area.
The value is in px.
Added in version 1.4
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

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 true 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

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