15 mai 2019 3205

Documentation :

(v.1.0.0)

A jQuery plugin for a Lightbox Slider

This version is the Free Version.
To check the premium version go => here

CDN

<link href="https://cdn.jsdelivr.net/gh/alexandrebulete/WS-lisli/dist/css/style.css">
<script src="https://cdn.jsdelivr.net/gh/alexandrebulete/WS-lisli@master/dist/js/lightbox.js" type="module"></script>

Getting Started

To use WS-LiSli 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() {
    $('#WS-LiSli').WS_lightbox_free({
        // add your custom options here
    }
}

Options

• enable

(Array) Display options you want to display.

enable : [
    'close',
    'arrows'
]

• buttons

(Object) To custom your buttons

buttons : {
    size          : 50,
    style         : 'square',
    color         : 'black',
    color_icon    : 'white',
    border_width  : 0,
    border_color  : '',
    opacity       : .5,
    hover_opacity : 1
}

• arrows

(Object) To custom you arrows buttons.

arrows : {
    position      : 'outside', // ( 'inside', 'outside', 'attached' )
    style         : 'svelt', // ('default', 'square', 'circle', 'rounded', 'svelt')
    icon_style    : 'caret', // ('default', 'caret', 'angle', 'chevron')
    icon_size     : 24,
    opacity       : .5,
    hover_effect  : 'translate', // ('zoom', 'shrink', 'translate')
    hover_opacity : .8
}

• image

(Object) To custom the image border width, color and radius

image : {
    border_radius : 0,
    border_color : '',
    border_width : 0,
    bg : 'none'
}

• background

(Object) To custom the background of the lightbox

background : {
    filter : 'image',
    opacity : .5
}

• display_velocity

(String | Integer) To set velocity when the lightbox appears.

display_velocity : 'low' // ('low', 'normal', 'fast' or integer accepted)

• slide_velocity

(String | Integer) To set velocity of sliding animation

slide_velocity : 'normal' // ('low', 'normal', 'fast' or integer accepted)