Jquery Image Player

Documentation

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

How to Use

1. Load jQuery and include jquery image player plugin files

To use jquery image player, you need to make sure both the jquery image player and jQuery 1.7 or higher scripts are included.

<!-- Important jquery image player 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 player 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 player initializer function and its ready.

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