Examples of Zoom Image on hover
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.
<a>
iframe
video
By default, the isAutoPlayDisplay is disabled. To enable set it to true. The autoplay, also can be seen in overlay.
isAutoPlayDisplay
true
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'); }
mouseEnterDisplayCB
mouseLeaveDisplayCB
function
'mouseEnterDisplayCB': function () { $('.pInstructions').text('Click to open expanded view'); }
Roll over the image to zoom in
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.
Using zoomPosition: 'left' property you can set zoom in a different position.
zoomPosition: 'left'
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.
isZoomDiffWH: true
zoomWidth: X
zoomHeight: Y
zoomAlignment: 'displayImage'
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.
zoomPosition: 'inner'
autoInnerZoom: true
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).
thumbsPosition: 'top'
nrThumbsPerRow: 4
firstThumbSelected: 2
Setting the isThumbsOneRow: false property will show all the thumbs in a grid.
isThumbsOneRow: false
By default, the slideType has the value slideRow.
slideType
slideRow
In this example, the slideType has the value slideElement.
slideElement
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.
Using the isOverlayFullImage: true will always show the image in the Overlay in Full Screen Mode.
isOverlayFullImage: true
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'.
isHoverShowThumbs: true
isShowAlwaysIcons: true
textImageNotLoaded: 'NO IMAGE'
colorLoading: '#E0A1A9'
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.
isOneThumbShown: true
Select a Color: Green Red