GlassCase - jQuery Image Zoom plugin

Display. HTML5 Video && IFrame

To add to the component the HTML5 video or IFrame content you have to use the <a> tag, adding the type of content: iframe or video.

Display. Autoplay of Display Images

By default, the isAutoPlayDisplay is disabled. To enable set it to true. The autoplay, also can be seen in overlay.

Display. Callback

At Display level we have 2 callbacks that are managed through the options: mouseEnterDisplayCB && mouseLeaveDisplayCB that have the function type.

e.g. using the Callback option: 'mouseEnterDisplayCB': function () { $('.pInstructions').text('Click to open expanded view'); }

Roll over the image to zoom in

Zoom. on the Right

By default, the Zoom Area is positioned on the right of the Display.

For images that are smaller than the Display Area, Zoom is disabled. For Zoom to appear, the images must be bigger than the Display Area. Please see the 3rd image.

Zoom. on the Left

Using zoomPosition: 'left' property you can set zoom in a different position.

Zoom. Different height and width

By default, the Zoom's width and height have the same size and are equal to the height of the Display Image.
Setting isZoomDiffWH: true, zoom's width and height will be proportional to the image's width and height. Setting zoomWidth: X or/and zoomHeight: Y will change the zoom's width and height.
Also, through: zoomAlignment: 'displayImage' property you have the option to change the zoom alignment.

Zoom. Inner

Using the zoomPosition: 'inner' property will set the zoom inside the Display Area.
In case that the zoom doesn't fit on the page, using the property autoInnerZoom: true, will set the zoom in zoomPosition: 'inner' mode.

Thumbs. on Top with Slider

Using the thumbsPosition: 'top' property you can chage the place where the thumbs are set.
Using the nrThumbsPerRow: 4 property will set the number of thumbs per row.
Setting the firstThumbSelected: 2, after loading the 3 thumb will be selected (zero-based counting).

Thumbs. on Bottom in Rows

Setting the isThumbsOneRow: false property will show all the thumbs in a grid.

Thumbs. on the Left

By default, the slideType has the value slideRow.

Thumbs. on the Right

In this example, the slideType has the value slideElement.

Fullscreen Overlay. Fit Screen Mode

Clicking on the Display Image, will open the Overlay. By default, the image is diplayed in Fit Screen Mode.
Double-clicking or pressing the Expand button will show the image in its natural size.

Fullscreen Overlay. Full Screen Mode

Using the isOverlayFullImage: true will always show the image in the Overlay in Full Screen Mode.

Caption. Type - Inside Position - Top

Caption. Type - Outside Position - Bottom

General. Miscellaneous Features

Hovering a thumb will change the display image. This feature can be enabled through: isHoverShowThumbs: true.
By default, the icons on the display area are shown only when the user hovers the area. Using the property isShowAlwaysIcons: true will always show the icons.
In case that a image wasn't loaded, in it's place will appear a holder. Its text can be customized through: textImageNotLoaded: 'NO IMAGE'.
Now you can customize the color of the loading wheel. This is done through: colorLoading: '#E0A1A9'.

General. One Thumb Image

By default, when the list has only one item, the thumb isn't shown. The prev/next buttons are disabled and not visible. Using the isOneThumbShown: true property will show the thumb.

General. Dynamic change of images

Select a Color:

GlassCase – jQuery Image Zoom plugin