Examples

See how you can use it

Callbacks

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

Roll over the image to zoom in

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'); }

Autoplay of Display Images

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

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

HTML5 Video && IFrame

  • image1
  • image2

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.

Zoom - on the Right

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

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

  • 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

By default, the slideType has the value slideRow.

Thumbs - on the Right

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

In this example, the slideType has the value slideElement.

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