Jlider

A jQuery plugin that help you bring slideshow into your web pages. First just simple then it will be grow and become bigger. Join if you interested!

• Demo
• Getting Started
• Configcurations
• Discussion

Slider #1 Basic Usage (Included HTML5 Video Slide)

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

    $("#jl1").jliderSlide();
	    

---

Slider #2 Custom Usage

• 
• 
• 
• 
• 
• 
• 

    $("#jl2").jliderSlide({
	    slideEffect  : "random",
	    visiTime     : 6000,
	    autoPlay     : false,
	    width        : "600px",
	    height       : "340px",
	    photoCaption : true,
	    visiProgress : true,
	    noCopy       : true,
	    hideControl  : "hover",
	    navType      : "line",
	    oaded        : function (curSlide) {
	                        console.log('Loaded...!');
	                    },
	    pressPlay    : function (curSlide) {
	                        console.log('Pressed Play button...!');
	                    },
	    pressPause   : function (curSlide) {
	                        console.log('Pressed Pause button...!');
	                    }
	});
		

---

Slider #3 Preview Thumbnail Usage

• 
• 
• 
• 
• 
• 
• 

    $("#jl3").jliderSlide({
	    slideEffect  : "random",
	    autoPlay     : false,
	    width        : "600px",
	    height       : "340px",
	    dirType      : "preview",
	});
		

---

Getting Started

Installation:

Download and extract your file then copy the "jlider" folder to your site folder.

Next!.. Drop this code right above your main stylesheet tag, in order to custom style for your slider:

<link rel="stylesheet" type="text/css" href="jlider/jlider.css"/>

Then drop this code right after your jQuery library tag:

<script type="text/javascript" src="jlider/jlider.min.js"></script>

Usage script:

Your usage script should be place after the tag above:

<script type="text/javascript">
    $("#yourSelector").jliderSlide();
</script>
    	

Basic template:

<ul class="jlider" id="yourSelector">
    <li><img src="path/to/image/1.jpg" alt="Photo caption content goes here" title="Your Image Title 1"/></li>
    <li><img src="path/to/image/2.jpg" alt="Your alt" title="Your Image Title 2"/></li>
    <li><img src="path/to/image/3.jpg" title="Your Image Title 3" poster="path/to/thumbnail.jpg"/></li>
    <li><video poster="path/to/video_thumbnail.jpg"><source src="path/to/video.ogv" type="video/ogg"/><source src="path/to/video.mp4" type="video/mp4" />Your browser does not support HTML5 video.</video></li>
    <!-- And more images -->
</ul>
    	

---

Configurations

Property	Type	Default value	Description
slideEffect	string	fade	Single slide effect. Values: [fade | slide | scaleIn | scaleOut | random]
viewEffect	string	no	Slide viewing effects. Values: [no | scaleIn | scaleOut]
visiTime	number	4000	Time between a slide(ms).
visiProgress	boolean	false	Show progress bar.
autoPlay	boolean	fade	Auto play slider
width	string	600px	Slider width (pixel or percent).
height	string	380px	Slider height (pixel or percent).
ratio	string	no	Slider ratio. Values: [no | 4:3 | 16:9 | X:Y]
responsive	boolean	false	Turn on responsive view for slider
photoCaption	boolean	false	Turn on text caption for slide
noCopy	boolean	false	Avoid people to save your photos.
hideControl	string	visible	Control buttons style. Values: [visible | hover | hide]
dirType	string	arrow	Navigation button type. Values: [arrow | preview]
fullScreen	boolean	fade	Allow fullscreen in your slider.
navType	string	dot	Navigation button type. Values: [line | dot | number]
hoverPause	boolean	false	Pause slide when hover slider
Loaded	function	function (curSlide) {}	Custom functions after all photos loaded.
pressPlay	function	function (curSlide) {}	Custom functions after press Play.
pressPause	function	function (curSlide) {}	Custom functions after press Pause.
pressNext	function	function (curSlide) {}	Custom functions after press Next.
pressPrev	function	function (curSlide) {}	Custom functions after press Prev.
beforeSlide	function	function (curSlide) {}	Custom functions before a slide.
afterSlide	function	function (curSlide) {}	Custom functions after a slide.
goFullscreen	function	function (curSlide) {}	Custom functions after enter fullscreen.
outFullscreen	function	function (curSlide) {}	Custom functions after exit fullscreen.

comments powered by Disqus