Exemples

See how you can use it

Zoom - on the Right

  • image1
  • image2
  • image4
  • image5
  • image6
  • image7

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

Zoom - on the Left

  • image
  • image
  • image
  • image
  • image
  • image
  • image

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

Zoom - Different height and width

  • image
  • image
  • image
  • image
  • image
  • image
  • image

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

  • image
  • image
  • image
  • image
  • image
  • image
  • image

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

  • image
  • image
  • image
  • image
  • image
  • image
  • image

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

  • image
  • image
  • image
  • image
  • image
  • image
  • image

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

Thumbs - on the Left

  • image
  • image
  • image
  • image
  • image
  • image
  • image

Thumbs - on the Right

  • image
  • image
  • image
  • image
  • image
  • image
  • image

Fit Screen Mode

  • image
  • image
  • image
  • image
  • image
  • image
  • image

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.

Full Screen Mode

  • image
  • image
  • image
  • image
  • image
  • image
  • image

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

Type - Inside Position - Top

  • image1
  • image2
  • image3
  • image4
  • image5
  • image6
  • image7

Type - Outside Position - Bottom

  • image1
  • image2
  • image4
  • image5
  • image6
  • image7

Miscellaneous Features

  • image
  • image
  • image
  • image
  • image
  • image
  • image

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'.

One Thumb Image

  • 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.

Dynamic change of images

Select a Color: 


Image Attribution

Livrustkammaren (The Royal Armoury) / Erik Lernestål / CC BY-SA [CC-BY-SA-3.0 or Public domain], via Wikimedia Commons