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.

  • image1
  • image2

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.

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

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

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

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.

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

Zoom. on the Left

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

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

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.

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

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.

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

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

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

Thumbs. on Bottom in Rows

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

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

Thumbs. on the Left

By default, the slideType has the value slideRow.

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

Thumbs. on the Right

In this example, the slideType has the value slideElement.

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

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.

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

Fullscreen Overlay. Full Screen Mode

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

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

Caption. Type - Inside Position - Top

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

Caption. Type - Outside Position - Bottom

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

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

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

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.

  • image

General. Dynamic change of images

Select a Color: