Documentation :

WS-LiSli is a Lightbox Slider jQuery plugin created by Alexandre Buleté. Here is the premium version, if you want to access at the free version go here : free version.

The premium version have a lot of additional functionalities like a selector bar, a zoom panning, sharing buttons your media on social networks etc…

You can also place all buttons and functionalities where you want.

Pricing

19.99 €

To access of this premium version please contact me : alexandre.bulete@walkerspider.com

Demo

Getting Started

To use WS-LiSli Premium plugin in your project you have to import jquery and jquery-ui scripts

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

After this you can add the WS-LiSli script in your footer like this :

$(function() {
    $('#my-lightbox').WS_lightbox({
        // add your custom options here
    }
}

Options

Enable elements

You can enable any elements you need by using the enable array.

// example :
enable : [
    'share',
    'arrows',
    // 'dots',
    // 'playback',
    // 'zoom',
    'close',
    'caption',
    'selector',
    'wrapper',
    'count'
]

You can also enable the caption elements needed with the caption array

caption : ['title', 'description']

// example a)
enable : [
    'share',
    'arrows',
    // 'dots',
    // 'playback',
    // 'zoom',
    'close',
    'caption',
    // 'selector',
    // 'wrapper',
    // 'count'
],
caption : ['title', 'description']

// example b)
enable : [
    'share',
    'arrows',
    'dots',
    'playback',
    'zoom',
    'close',
    'caption',
    'selector',
    'wrapper',
    'count'
],
caption : ['title'],

Positioning

Element positions

Positioning of all elements can be customized with the pos_{element} options. They are arrays contening 2 strings.

• the first for positioning in space ('top_right', 'top_left', 'bottom_right', 'bottom_left')
• the second for positioning relatively to the lightbox image ('outside', 'inside', 'attached-X' ou 'attached-Y').

// example a) :
pos_shareButton       : [ 'top_right' , 'outside'],
pos_zoomButton        : [ 'top_right', 'outside'],
pos_wrapperButton     : [ 'bottom_left', 'outside'],
pos_playbackButton    : [ 'bottom_right', 'attached-X'],
pos_selector          : [ 'bottom', 'outside'],
pos_closeButton       : [ 'top_right', 'outside']

// example b) :
pos_shareButton       : [ 'top_right' , 'inside'],
pos_zoomButton        : [ 'top_right', 'inside'],
pos_wrapperButton     : [ 'bottom_right', 'outside'],
pos_playbackButton    : [ 'bottom_right', 'inside'],
pos_selector          : [ 'right', 'outside'],
pos_closeButton       : [ 'top_right', 'inside'],

Box Positions

Each possible spots are structured with boxes to accept multiples buttons. This boxes can be customized in 2 forms : 'align' or 'stack'.

• 'align' : display horizontally the buttons
• 'stack' : display vertically the buttons

// examples :
box_top_right_outside     : 'align',
box_bottom_right_outside  : 'align',
box_bottom_left_inside    : 'stack'

// a) example with align
box_top_right_outside     : 'align',

// b) example with stack
box_top_right_outside     : 'stack',

Buttons

You can customize the appearance of the buttons according to your style with the object buttons

// example a) :
buttons : {
    size : 30,
    style : 'square',
    color : 'black',
    color_icon : 'white',
    border_width : 0,
    border_color : 'white',
    opacity : .8,
    hover_opacity : 1
}

// example b) :
buttons: {
    size            : 35,
    style           : 'circle',
    color           : 'white',
    color_icon      : 'red',
    border_width    : 0,
    border_color    : '',
    opacity         : 1,
    hover_opacity   : 1
}

Arrows

You can customize the appearance of the lightbox arrows according to your style with the object arrows

// example a) :
arrows : {
    position : 'outside',
    style : 'svelt',
    icon_style : 'caret',
    icon_size : 24,
    opacity : .2,
    hover_effect : 'translate',
    hover_opacity : .5
}

// example b) :
arrows : {
    position : 'inside',
    style : 'circle',
    icon_style : 'angle',
    icon_size : 24,
    opacity : .5,
    hover_effect : 'shrink',
    hover_opacity : 1
}

Dots

You can also customize the dots of the slider.

// example a) :
dots: {
    style         : 'square',
    size          : 15,
    spacing       : 3,
    color         : 'white',
    border_width  : 0,
    border_color  : '',
    opacity       : .3,
    hover_effect  : 'zoom',
    actived       : {
        color         : 'white',
        border_color  : '',
        opacity       : 1
    }
}

// example b) :
dots: {
    style         : 'rounded',
    size          : 20,
    spacing       : 5,
    color         : 'aliceblue',
    border_width  : 0,
    border_color  : '',
    opacity       : .3,
    hover_effect  : 'zoom',
    actived       : {
        color         : 'lightblue',
        border_color  : '',
        opacity       : 1
    }
}

Selector

The selector allows you to see all the pictures present in the slider as thumbnails. When you click on one of the thumbnail it will select you directly the picture associated.

This selector is like a banner scrollable positionable at the bottom or the right of the screen.

The Banner selector

You can customize the appearance of the banner selector according to your style with the object selector

// example :
selector: {
    size          : 130,
    padding       : 5,
    margin        : 10,
    gap           : 5,
    bg_color      : 'black',
    border_color  : 'black',
    border_width  : 1,
    border_radius : 0,
    opacity       : .5,
    hover         : {
        border_color  : 'lightgrey',
        opacity       : .8
    },
    actived       : {
        border_color  : 'white',
        opacity       : 1
    }
},

The selector arrows

The banner selector have his own arrows and can be customized separately of the lightbox arrows.

selector_arrows: {
    color         : 'black',
    color_icon    : 'white',
    style         : 'svelt',
    icon_style    : 'angle',
    icon_size     : 24,
    opacity       : .2,
    hover_effect  : 'translate',
    hover_opacity : .5
}

Social networks

The social_networks object allows you to share your media on the social networks (twitter, facebook and pinterest).
This object contains an option domain to determinate your website link and 3 objects : twitter, facebook and pinterest.

This 3 objects allow you to customize the social networks buttons individually.

// example :
social_networks : {
    domain       : 'https://my-domain.com',
    twitter  : {
        username      : 'Walker Spider',
        color         : '#55acee',
        icon          : 'fab fa-twitter',
        color_icon    : 'white'
    },
    facebook : {
        color         : '',
        icon          : 'fab fa-facebook-f',
        color_icon    : '#3b5998'
    },
    pinterest : {
        color         : '',
        icon          : 'fab fa-pinterest',
        color_icon    : '#bd081c'
    }
}

Twitter (Object)

Facebook (Object)

Pinterest (Object)

Background & image

Background

You can customize the background lightbox with a filter and an opacity.

The filter option can be a color or be setted to 'image' if we want to get the current image selected as a blur background.

// example with background image :
background : {
    filter  : 'image',
    opacity : .8
}

// example with background color :
background : {
    filter  : 'aquamarine',
    opacity : 1
}

Image

The lightbox image can be customize with border options and you can set a background with the option bg.
This background will can be viewed during the transition.

// example a) :
image : {
    border_radius : 10,
    border_color  : '',
    border_width  : 0,
    bg            : ''
},

// example b) :
image : {
    border_radius : 0,
    border_color  : 'aquamarine',
    border_width  : 2,
    bg            : ''
}

Velocity

You can customize different speeds animations of the application : the display of the lightbox with the option display_velocity, the slide animation with slide_velocity and the autoplay with autoplay_velocity.

This options accept an integer value (in ms) or a string : 'low' , 'normal' or 'fast'.

// exmaple :
velocities : {
    display_velocity  : 'low',
    slide_velocity    : 'normal',
    autoplay_velocity : 'normal'
}