Jquery Image Slider

All In 1 Animation

Here we will show how to use all the effects in "Jquery Image Slider" with minimum coding and settings

  • Welcome to 'Jquery Image Slider'
    Click here to PLAY
  • Why
  • Why
    Jquery Image Slider?
  • Why
    Jquery Image Slider?
  • Why
    Jquery Image Slider?
  • Animation Controls similar to those of a Video Player

  • Animation controls similar to those of a Video Player

  • Animation controls similar to those of a Video Player

    Play

  • Animation controls similar to those of a Video Player

    Play

  • Animation controls similar to those of a Video Player

    Pause

  • Animation controls similar to those of a Video Player

    Resume

  • Animation controls similar to those of a Video Player

    Resume

  • Animation controls similar to those of a Video Player

    Seek bar for advance control

  • Animation controls similar to those of a Video Player

    Seek bar for advance control

  • Animation controls similar to those of a Video Player

    Seek bar for advance control

  • Animation controls similar to those of a Video Player

    Seek bar for advance control

  • Jquery Image Slider

    An image based player with customizable animation effects.
    Click here to know more.

    Download for FREE!

    Version 1.0
    CHECK IT OUT!

  • Jquery Image Slider

    An image based player with customizable animation effects.
    Click here to know more.

    Download for FREE!

    Version 1.0 download; CHECK IT OUT!

    Replay
Download the Library NOW!

Setup

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 type="text/javascript" src="jquery-1.9.1.min.js"></script>

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

<!-- Include js plugin -->
<script type="text/javascript" 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.

You need a new markup "data-effect / data-effect-steps / data-effect-animate", using this attribute you can animate your section.

Note: You can only have "data-duration" markup on the main LI and in "data-effect-animate" markup all the elements should be in "PX"

Expand
<div id="demo3">
	<ul>
        <li data-duration="0">
			<div class="line0">Welcome to 'Jquery Image Slider'</div>
			<a href="javascript:;" class="clicktoplay">Click here to <span>PLAY</span></a>
        </li>
        <li data-duration="20">
			<div class="line1" data-effect="animate" data-effect-steps="20" data-effect-animate="margin-left:0; opacity:1">Why</div>
        </li>
        <li data-duration="20">
			<div class="line1 active">Why</div>
			<div class="line2" data-effect="animate" data-effect-steps="20" data-effect-animate="margin-left:0; opacity:1">Jquery Image Slider?</div>
        </li>
        <li data-duration="2000">
			<div class="line1 active">Why</div>
			<div class="line2 active">Jquery Image Slider?</div>
        </li>
        <li data-duration="20">
        	<div data-effect="fadeOut">
				<div class="line1 active">Why</div>
				<div class="line2 active">Jquery Image Slider?</div>
			</div>
        </li>
        <li data-duration="20">
			<p class="line3" data-effect="animate" data-effect-steps="20" data-effect-animate="top:130px; opacity:1">Control your animation just like a Video Player</p>
        </li>
        <li data-duration="2000">
			<p class="line3 active">Control your animation just like a Video Player</p>
        </li>
        <li data-duration="20">
			<p class="line3 active">Control your animation just like a Video Player</p>
			<p class="btn btn1" data-effect="animate" data-effect-steps="20" data-effect-animate="margin-left:380px; opacity:1">Play</p>
        </li>
        <li data-duration="2000">
			<p class="line3 active">Control your animation just like a Video Player</p>
			<p class="btn btn1 active">Play</p>
        </li>
        <li data-duration="2000">
			<p class="line3 active">Control your animation just like a Video Player</p>
			<p class="btn btn2">Pause</p>
        </li>
        <li data-duration="500">
			<p class="line3 active">Control your animation just like a Video Player</p>
			<p class="btn btn3">Resume</p>
        </li>
        <li data-duration="20">
			<p class="line3 active">Control your animation just like a Video Player</p>
			<p class="btn btn3" data-effect="animate" data-effect-steps="20" data-effect-animate="margin-left:1000px; opacity:0">Resume</p>
        </li>
        <li data-duration="30">
			<p class="line3 active">Control your animation just like a Video Player</p>
			<p class="line4" data-effect="fadeIn">Seek bar for advance control</p>
        </li>
        <li data-duration="20">
			<p class="line3 active">Control your animation just like a Video Player</p>
			<p class="line4 active">Seek bar for advance control</p>
			<img src="images/arrow.png" class="arrow" data-effect="fadeIn" />
        </li>
        <li data-duration="2000">
			<p class="line3 active">Control your animation just like a Video Player</p>
			<p class="line4 active">Seek bar for advance control</p>
			<img src="images/arrow.png" class="arrow" />
        </li>
        <li data-duration="20">
			<div data-effect="fadeOut">
				<p class="line3 active">Control your animation just like a Video Player</p>
				<p class="line4 active">Seek bar for advance control</p>
			</div>
        </li>
        <li data-duration="2000">
        	<div class="lastScreen">
        		<p class="t1">Jquery Image Slider</p>
        		<p class="t2">An image based player with customizable effects/animation <a href="demos.html">click here</a> for more.</p>
        		<a href="javascript:;" class="downloadNow">Download for FREE</a>
        		<p class="t3">This is version 1.0 download and check it</p>
			</div>
        </li>
        <li data-duration="20">
        	<div class="lastScreen">
        		<p class="t1">Jquery Image Slider</p>
        		<p class="t2">An image based player with customizable effects/animation <a href="demos.html">click here</a> for more.</p>
        		<a href="javascript:;" class="downloadNow">Download for FREE</a>
        		<p class="t3">This is version 1.0 download and check it</p>
				<a href="javascript:;" class="clicktoreplay">Replay</a>
			</div>
        </li>
	</ul>
</div>

3. Do the Styling

Now call the styling codes for styling.

Expand
<style>
	#demo3 .jsvp-ul{color:#fff; background-color:#36c4f3;}
	#demo3 .clicktoplay{font-size:2em; line-height:50px; color:#fff; text-decoration:none; text-align:center; width:100%; display:block; margin:190px auto 0;}
	#demo3 .clicktoplay span{font-size:1em; line-height:50px;}
	#demo3 .clicktoreplay{font-size:1.4em; color:#fff; text-decoration:underline; text-align:center; width:100%; display:block; margin:205px auto 0;}
	#demo3 .line0{font-size:3em; width:100%; display:block; position:absolute; top:125px; left:0; text-align:center;}
	#demo3 .line1{font-size:3em; opacity:0; margin-left:800px; width:250px; display:block; position:absolute; top:165px; left:0; text-align:right;}
	#demo3 .line2{font-size:5em; opacity:0; margin-left:800px; width:600px; display:block; position:absolute; top:150px; left:265px; text-align:left; font-weight:400;}
	#demo3 .line3{font-size:3em; opacity:0; width:100%; display:block; position:absolute; top:0; left:0; text-align:center;}
	#demo3 .line4{font-size:3em; width:100%; display:block; position:absolute; top:185px; left:0; text-align:center;}
	#demo3 .arrow{display:block; position:absolute; top:245px; left:442px;}
	#demo3 .btn{width:140px; height:45px; line-height:45px; display:block; text-align:center; border:3px #fff solid; position:absolute; top:190px; left:380px; border-radius:10px; font-size:3em; text-transform:uppercase;}
	#demo3 .btn1{left:0;}
	#demo3 .btn2{left:380px; color:#333; border-color:#333;}
	#demo3 .btn3{left:380px;}
	#demo3 .active{opacity:1; margin-left:0; }
	#demo3 .line3.active{opacity:1; top:130px; }
	#demo3 .btn1.active{opacity:1; left:380px;}
	#demo3 .lastScreen{display:block; position:absolute; top:80px; left:450px; margin-left:-160px; width:320px; text-align:center;}
	#demo3 .lastScreen .t1{font-size:3em; width:100%; display:block; float: left; padding-bottom:10px; }
	#demo3 .lastScreen .t2{font-size:1.6em; width:100%; display:block; float: left;}
	#demo3 .lastScreen .t2 a{font-size:1em; color:#333; text-decoration:none; }
	#demo3 .lastScreen .t2 a:hover{text-decoration:underline;}
	#demo3 .lastScreen .t3{font-size:1.4em; width:100%; display:block; float: left;}
	#demo3 .lastScreen .downloadNow{float: left; clear:both; margin:10px 70px; padding:0; height:45px; line-height:45px; }
</style>

4. Call the plugin

Now call the styling codes for styling.

$(document).ready(function(){
	$('#demo3').jsVideoPlayer({
		showTitle:false,
		showVolumeControl:false
	});
	$('.clicktoplay, .clicktoreplay').click(function(){
		$('#homepageDemo .jsvp-control-play').click();
	});
});

Player Demos

comments powered by Disqus