Jquery Image Player

Documentation

We have developed a plugin to create "Video Player" using jquery.

Normally we make a video of any kind of demos where we explain the flow of any application(like: online internet banking demo, car interior, etc), but we find it very heavy here you can use "jquery image player"

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();
});