Un player con jQuery Image player para imágenes secuenciales

DESCARGA : jQuery Image Player

Un player con jQuery Image player para imágenes secuenciales, este plugin sirve simplemente para crear un player a partir de una colección de imágenes, el plugin se centra en implementar configuraciones por imagen como lo son: data-duration=“0-1000”  que indica el tiempo de duración de cada imagen, este plugin lo puedes implementar para mostrar publicidad en algún sitio, o simplemente mostrar una serie de pasos para hacer algo sin la necesidad de generar un vídeo, la implementación no tiene limite alguno, puedes ver un ejemplo en la siguiente dirección: http://uiplayground.in/jquery-image-player/demo-basic.html

Este plugin maneja varios efectos durante la reproducción, a continuación tienes una lista de efectos que te puedes encontrar en la url del plugin.

  • Basic Show/Hide
  • Effect Fade In/Out
  • Image Effect Slide Image
  • Effect Fade & Slide
  • Effects Custom
  • Text All in One

Vamos a implementar este plugin de la siguiente forma:

1.- Incluimos las referencias en la siguiente dirección:


<!-- Important jquery image player 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.- Elementos a implementar:



<div id="demo3">

<ul>

<li data-duration="0">

<div class="line0">Welcome to 'Jquery Image Player'</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 player?</div>

</li>


<li data-duration="2000">

<div class="line1 active">Why</div>


<div class="line2 active">Jquery Image Player?</div>

</li>


<li data-duration="20">

<div data-effect="fadeOut">

<div class="line1 active">Why</div>


<div class="line2 active">Jquery Image Player?</div>

</div>

</li>


<li data-duration="20">


Control your animation just like a Video Player

</li>


<li data-duration="2000">


Control your animation just like a Video Player

</li>


<li data-duration="20">


Control your animation just like a Video Player



Play

</li>


<li data-duration="2000">


Control your animation just like a Video Player



Play

</li>


<li data-duration="2000">


Control your animation just like a Video Player



Pause

</li>


<li data-duration="500">


Control your animation just like a Video Player



Resume

</li>


<li data-duration="20">


Control your animation just like a Video Player



Resume

</li>


<li data-duration="30">


Control your animation just like a Video Player



Seek bar for advance control

</li>


<li data-duration="20">


Control your animation just like a Video Player



Seek bar for advance control

<img src="images/arrow.png" class="arrow" data-effect="fadeIn" />
</li>


<li data-duration="2000">


Control your animation just like a Video Player



Seek bar for advance control

<img src="images/arrow.png" class="arrow" />
</li>


<li data-duration="20">

<div data-effect="fadeOut">


Control your animation just like a Video Player



Seek bar for advance control

</div>

</li>


<li data-duration="2000">

<div class="lastScreen">


Jquery Image Player



An image based player with customizable effects/animation <a href="demos.html">click here</a> for more.

<a href="javascript:;" class="downloadNow">Download for FREE</a>


This is version 1.0 download and check it

</div>

</li>


<li data-duration="20">

<div class="lastScreen">


Jquery Image Player



An image based player with customizable effects/animation <a href="demos.html">click here</a> for more.

<a href="javascript:;" class="downloadNow">Download for FREE</a>


This is version 1.0 download and check it

<a href="javascript:;" class="clicktoreplay">Replay</a>
</div>

</li>

</ul>

</div>


3.- Puedes agregar estilos:



<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.- Llamando al plugin para crear el efecto del player:


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

Puede interesarte