Responsive Fullscreen jQuery Image Slideshow/Gallery Plugin - Jslide

Jslide is a fashion, responsive jQuery plugin that displays a gallery of images in a fullscreen slideshow with arrows navigation and easing effects. The plugin allows you  to create an image slideshow/gallery from various types of data sources like JSON data, inline Html elements and Javascript array objects.

How to use it:

1. Add the required jquery.Jslide.css into the header of your Html page.

<link rel="stylesheet" href="jquery.Jslide.css">

2. Create a fullscreen image slideshow from a list of images.

<div id="slide" class="Jslide-container">
<ul class="Jslide-carousel">
<li><img src="img/01.jpg" height="100%" data-caption="Image 01" data-desc="Description 01" /></li>
<li><img src="img/02.jpg" height="100%" data-caption="Image 02" data-desc="Description 02" /></li>
<li><img src="img/03.jpg" height="100%" data-caption="Image 03" data-desc="Description 03" /></li>
<li><img src="img/04.jpg" height="100%" data-caption="Image 04" data-desc="Description 04" /></li>
<li><img src="img/05.jpg" height="100%" data-caption="Image 05" data-desc="Description 05" /></li>
</ul>
<div class="Jslide-nav">
<div class="Jslide-prev">&lsaquo;</div>
<div class="Jslide-next">&rsaquo;</div>
</div>
<div class="Jslide-page-wrap">
<div class="Jslide-page-container">
<div class="Jslide-page"></div>
<div class="Jslide-page"></div>
<div class="Jslide-page"></div>
<div class="Jslide-page"></div>
<div class="Jslide-page"></div>
</div>
</div>
<div class="Jslide-broad">
<h1>Title</h1>
<p>Description</p>
</div>
<div class="Jslide-close"> x </div>
</div>

3. Include jQuery library, jQuery easing plugin and jQuery Jslide plugin at the end of the Html page..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
<script src="jquery.Jslide.js"></script> 

4. Initialize the plugin and set the options.

$('#slide').Jslide({
show_broad: true,
show_nav: true,
pagination: true,
hook_slidemove_before_click: function(k, datas) {
var html = '<h1>' + datas[k].caption + '</h1>';
html += '<p>' + datas[k].desc + '</p>';
this.$broad.html(html);
}
});

5. More advanced usages.

// use json for api
/*$('#slide').Jslide({
show_broad: true,
show_nav: true,
pagination: true,
hook_slidemove_before_click: function(k, datas) {
var html = '<h1>' + datas[k].caption + '</h1>';
html += '<p>' + datas[k].desc + '</p>';
this.$broad.html(html);
},
source: 'json/json.php'
});*/

// use json obj
/*$('#slide').Jslide({
show_broad: true,
show_nav: true,
pagination: true,
hook_slidemove_before_click: function(k, datas) {
var html = '<h1>' + datas[k].caption + '</h1>';
html += '<p>' + datas[k].desc + '</p>';
this.$broad.html(html);
},
source: {
'url_1': 'img/01.jpg',
'url_2': 'img/02.jpg',
'url_3': 'img/03.jpg',
'url_4': 'img/04.jpg',
'url_5': 'img/05.jpg'
}
});*/

// use array
/*$('#slide').Jslide({
show_broad: true,
show_nav: true,
pagination: true,
hook_slidemove_before_click: function(k, datas) {
var html = '<h1>' + datas[k].caption + '</h1>';
html += '<p>' + datas[k].desc + '</p>';
this.$broad.html(html);
},
source: [
'img/01.jpg',
'img/02.jpg',
'img/03.jpg',
'img/04.jpg',
'img/05.jpg'
]
});*/

// use json in line
/*$('#slide').Jslide({
show_broad: true,
show_nav: true,
pagination: true,
hook_slidemove_before_click: function(k, datas) {
var html = '<h1>' + datas[k].caption + '</h1>';
html += '<p>' + datas[k].desc + '</p>';
this.$broad.html(html);
},
source: [
{'url': 'img/01.jpg', 'caption': 'Image 01', 'desc': 'Description 01'},
{'url': 'img/02.jpg', 'caption': 'Image 02', 'desc': 'Description 02'},
{'url': 'img/03.jpg', 'caption': 'Image 03', 'desc': 'Description 03'},
{'url': 'img/04.jpg', 'caption': 'Image 04', 'desc': 'Description 04'},
{'url': 'img/05.jpg', 'caption': 'Image 05', 'desc': 'Description 05'}
]
});*/

6. All the default options.

push: false,
loop: true,
touch: true,
autoplay: false,
pic_switch: true,
pagination: false,
show_broad: false,
show_close: false,
show_nav: false,
resize_mode: true,

win: window,
pic_wrap: '.Jslide-wrap',
pic_loading: '.Jslide-loading',
pic_bg: '.Jslide-bg',
pic_container: '.Jslide-carousel',
pics: '.Jslide-carousel > li',
pagination_con: '.Jslide-page-wrap',
page_con: '.Jslide-page-container',
pages: '.Jslide-page',
nav: '.Jslide-nav',
prev: '.Jslide-prev',
next: '.Jslide-next',
broad: '.Jslide-broad',
close_btn: '.Jslide-close',
hitarea: '.Jslide-hitarea',

pager: '',
speed: 1000,
time: 5000,
step_css: 'step',
easing: 'easeOutQuart',
visible: 1,
align: 'center',

source: false,

hook_item_pos: false,
hook_slidemove_before_click: false,
hook_init_stage_before: false,
hook_item_tween_after: false,
hook_install_after: false,
hook_close_after: false,
hook_reset_pagination: false

---

This awesome jQuery plugin is developed by lihom. For more Advanced Usages, please check the demo page or visit the official website.