CODEWITHSUNDEEP
jqueryhtmlsliderjssor
Dhanush Bala
Dhanush Bala

Reputation: 1132

Change onhover image instead of onclick jssor slider

Im using this slider http://www.jssor.com/demos/list-slider.html

i want to change onhover thumbnail image instead of onclick thumbnail ,

Upvotes: 1

Views: 854

Answers (2)

CJ Ramki
CJ Ramki

Reputation: 2630

from this source file,

if (_Options.$ActionMode & 1) $JssorUtils$.$AddEvent(_Wrapper, "click", OnNavigationRequest);
if (_Options.$ActionMode & 2) $JssorUtils$.$AddEvent(_Wrapper, "mouseover", OnNavigationRequest);

The event triggering based on $ActionMode.

SOLUTION:

You need to set option $ActionMode : 2 to make it work with mouseover event. By default they set $ActionMode : 1.

In $ThumbnailNavigatorOptions: {} set $ActionMode : 2. This below code is from demo file of list slider

$ThumbnailNavigatorOptions: {
    $Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
    $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always

    $Loop: 2, //[Optional] Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
    $AutoCenter: 3, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
    $Lanes: 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
    $SpacingX: 4, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
    $SpacingY: 4, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
    $Cols: 4, //[Optional] Number of pieces to display, default value is 1
    $Align: 0, //[Optional] The offset position to park thumbnail
    $Orientation: 2, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
    $DisableDrag: false, //[Optional] Disable drag or not, default value is false
    $ActionMode: 2
}

See the last line $ActionMode:2. $ActionMode is playing the role here. If you set this to 1, it will trigger on click event. If you set 2, event will trigger on mouseover.

Upvotes: 2

Namita sheth
Namita sheth

Reputation: 166

if you have downloaded the demo there is an option to change onhover of thumbnail image.

just add 

$ActionMode : 2

to the 

$ThumbnailNavigatorOptions: {
}

and it will work on the thumbnail hover image. Enjoy.

Upvotes: 3

Related Questions