GlassCase jQuery Product Image Zoom plugin

CodeCanyon GlassCase jQuery Product Image Zoom plugin 7843419
Script \ JavaScript \ Images and Media
Display \ Option \ Thumbs \ Product \ Overlay \ Images \ Plugin \ Height \ Component

JavaScript - GlassCase jQuery Product Image Zoom plugin 7843419 by tinyComp @ CodeCanyon

Script \ JavaScript \ Images and Media

GlassCase is a versatile, time saving jQuery Product Image
Zoom plugin . It has been well designed, built from scratch and packed
with some unique features.

GlassCase is a component well suited to display Product Images
on e-commerce sites to give users a better customer experience. Also
it offers a great way to display Photos and Collections of
Images with Zoom .

It is simple to setup and customize. It can be easily integrated in your main product
to provide an unique display and viewing style.

Features.
Responsive and Touch enabled

GlassCase is responsive and it has been built to be adaptive and to display well on any screen size. GlassCase is ready to be used on touch enabled devices.

Different Image Sizes

No restriction on the size of the images.

Fullscreen Overlay

By one click on the image display. the user can view the image in overlay. The overlay has 2 modes of displaying the images.

- Fit display mode;

- Full screen mode.

When the overlay is in fit display mode, with a double click on the image the user can view it in full screen mode.

Also, through options, the overlay can be disabled.

Download Feature

With one click the user can download the displayed image. This option is available
through the control shown on the display. It can be enabled / disabled.

Disclaimer : This feature is available only in modern browsers.

Thumbs

- Only one set of images is needed. No need for thumbnail images;

- Automatic generation, sizing and positioning of thumbs;

- Thumbs can be shown on one row with a slider or can be shown all at once;

- The number of thumbs per row is customizable;

- Thumbs positioning: top, bottom, left and right of the component;

- Having only one thumb, it (the thumb) can be hidden.

Zoom

- Zoom can be positioned on the right , left and inside the Image Display

- Zoom and Lens are automatically disabled when is shown an image smaller than the
display;

- The zoom’s width and height can be customized. It can be aligned to the image container or the image area;

- Through options it can be enabled the effect of slow down movement for zoom and/or lens.

General

- Different types of navigation controls;

- Keyboard navigation;

- Multiple instances per page;

- Easy setup and customization through many options;

- Works well with Bootstrap;

- Compatible with all major modern browsers (including IE9 to IE11, Chrome, Firefox, Safari
and Opera);

- Detailed documentation with many demos;

- Free full technical support;

- Regular updates and continuous improvements.

Take a minute to look at our demos to see and
TRY IT by yourself

Have a pre-purchase question to be sure that it’s suitable for you? Then please
send us a quick message via our profile contact form.

Change Log.
2.0 – 30 October 2014
New .

- The component was made touch friendly;

- Were added the options to set the thumbs on left or right side of the Display Image;

- The icons were changed to another set;

- Was changed the loading wheel(it uses CSS3)

- New option: isHoverShowThumbs – on hovering a thumb it will change the Display Image;

- Was added a new Zoom position: Inner – The Zoom will be shown inside the Display;

- New option: autoInnerZoom If the Display and Zoom do not fit on the page, Zoom will be shown in inner position;

- Was handled the case when an image is not loaded: in this case it will appear a holder.

1.4 – 16 September 2014

- New :The zoom’s width and height can be customized. It can be aligned to the image container or the image area;

- New option : isZoomDiffWH – Determines if the zoom’s width and height have different values;

- New option : zoomWidth – The width of the zoom. The value is in px;

- New option : zoomHeight – The height of the zoom. The value is in px;

- New option : zoomAlignment – Possible values: ‘displayImage’, ‘displayArea’.

- New option : zoomMargin – The distance between the zoom and display area;

- New option : thumbsMargin – The distance between the thumbs and display area;

- Fix : the opacity of the image in the overlay, in ie8;

- Fix : the issue related to: clicking on a selected thumb, it disables the selection of another image;

1.3 – 5 September 2014

- New option : isOverlayFullImage – 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;

- New : In overlay, clicking outside the image will close it;

- New option : isSlowZoom – Enables the effect of “slowing” the movement of zoom;

- New option : speedSlowZoom – Determines how long the animation will run. The speed is given in milliseconds;

- New option : isSlowLens – Enables the effect of “slowing” the movement of lens;

- New option : speedSlowLens – Determines how long the animation will run. The speed is given in milliseconds;

- New option : speed – 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;

- New : Added to the selector ”.gc-zoom-container img”: “max-width: none !important;”.

1.2.1 – 24 August 2014

- Fix : If firstThumbSelected will be greater than the total number of thumbs then to firstThumbSelected will be assigned it’s default value.

1.2 – 31 July 2014

- New : the GlassCase component was made responsive;

- Fix : corrected the height of the component when it has no thumbs and only the display is used.

1.1.1 – 12 July 2014

- Fix : bug related to the case when the number of images is one more than the number of thumbs per row.

1.1 – 09 July 2014

- Fixed the script so it could properly work in IE8;

- New option : isZoomEnabled – Enables or disables the zoom;

- New option : isOverlayEnabled – Enables or disables the overlay.

Last Update: 30 October 14; High Resolution: Yes; Compatible Browsers: IE9, IE10, IE11, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS, CSS; Software Version: jQuery.

Keywords: different size image zoom, ecommerce image zoom, ecommerce product display, ecommerce product image zoom, ecommerce product zoom, full-screen image zoom, image zoom, jquery image zoom plugin, jquery plugin, jquery product zoom gallery, jquery product zoom plugin, product image zoom, product zoom, touch, zoom plugin.


Create CodeCanyon GlassCase jQuery Product Image Zoom plugin 7843419 style with After Effect, Cinema 4D, 3DS Max, Apple Motion or PhotoShop. CodeCanyon GlassCase jQuery Product Image Zoom plugin 7843419 from creative professional designers. Full details of CodeCanyon GlassCase jQuery Product Image Zoom plugin 7843419 for digital design and education. CodeCanyon GlassCase jQuery Product Image Zoom plugin 7843419 desigen style information or anything related.

Comments:

Name:*
E-Mail:*
Add Comments:
Enter Code: *