Plugin : WS-LiSli - Lightbox Slider ( V. 1.0.0 )
<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>
#
LiSli is a Lightbox Slider jQuery plugin.
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 or Integer) : to set velocity when the lightbox appears.
display_velocity : 'low' // ('low', 'normal', 'fast' or integer accepted)
•
slide_velocity (String or Integer) : to set velocity of sliding animation
slide_velocity : 'normal' // ('low', 'normal', 'fast' or integer accepted)