Jquery Image Slider

Documentation

Plug-in to create "Video Player" using jquery.

How to Use

1. Load jQuery and include Jquery Image Slider plugin files

To use Jquery Image Slider, you need to make sure both the Jquery Image Slider and jQuery 1.7 or higher scripts are included.

<!-- Important Jquery Image Slider stylesheet -->
<link rel="stylesheet" href="jquery-image-player-min.css">

<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>

<!--  jQuery 1.8+  -->
<script src="jquery-ui.min.js"></script>

<!-- Include js plugin -->
<script src="jquery-image-player-min.js"></script>

2. Set up your HTML

You need a special markup "data-duration". All you need is to wrap your li(Jquery Image Slider works with only li element) inside the container element. Any type of ID "uipg-video-player" is mandatory to apply proper styles that come from jquery-image-player-min.css file.

<div id="uipg-video-player">
	<ul>
	    <li data-duration="0">Your Content</li>
	    <li data-duration="1000">Your Content</li>
	    <li data-duration="1000">Your Content</li>
	    <li data-duration="1000">Your Content</li>
	    <li data-duration="1000">Your Content</li>
	    <li data-duration="1000">Your Content</li>
	    <li data-duration="1000">Your Content</li>
	</ul>
</div>

3. Call the plugin

Now call the Jquery Image Slider initializer function and its ready.

$(document).ready(function(){
  $("#uipg-video-player").jsVideoPlayer();
});

Customizing Options

Options available to customize:

Variable Default Type Description
showTitle true boolean This will display the icon of 'title' in the player control bar
showCurrentTime true boolean This will display the label of 'current time' in the player control bar
showTotalTime true boolean This will display the label of 'total time' in the player control bar
showSliderTime true boolean This will display the label of 'slider time' in the player control bar
onFinishGotoStart false boolean Once you finish playing the video it will redirect to start screen
playerWidth 900 int Here you can customize the 'width' of the player
playerHeight 385 int Here you can customize the 'height' of the player

Player Demos