Slideshow de videos de YouTube

[IDRID]

Código:

<div id="videos-content">
</div>
<script type="text/javascript">
function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul>'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var img = entries[i].media$group.media$thumbnail[0].url;
    var yturl = entries[i].media$group.media$content[0].url;
    html.push("<img src='" + img + "'><a href='" + yturl + "' rel='shadowbox[HOME];width=640;height=388'><li>" + title + "</li></a></img>");
  }
  html.push('</ul>');
  document.getElementById('videos-content').innerHTML = html.join('');
}
</script>
<script src="http://gdata.youtube.com/feeds/users/IDRIDPlanet/uploads?alt=json-in-script&amp;format=5&amp;callback=showMyVideos" type="text/javascript">
</script>

Hola quiero hacer un slideshow con 2 botones (Anterior y siguente), y que cambie cada segundo y que al situar el ratón, no cambie.

¿Como puedo hacerlo?

[Naahuel]

Si lo que querés es mostrar varios videos en un slide, en mi firma tengo un script en jQuery que hice yo que permite usar cualquier contenido HTML. Podés usar videos de YouTube sin problemas (fijate en el demo) y además tiene la opción "auto" para mover automáticamente cada cierto "tiempo" y además "pausarHover" que pausa el movimiento al mover el mouse encima del slider.

Espero te sirva y cualquier duda no dudes en preguntar :P

[IDRID]

Iniciado por Naahuel

Si lo que querés es mostrar varios videos en un slide, en mi firma tengo un script en jQuery que hice yo que permite usar cualquier contenido HTML. Podés usar videos de YouTube sin problemas (fijate en el demo) y además tiene la opción "auto" para mover automáticamente cada cierto "tiempo" y además "pausarHover" que pausa el movimiento al mover el mouse encima del slider.

Espero te sirva y cualquier duda no dudes en preguntar :P

Es justo lo que busco, gracias, una duda, ¿Se puede coger la transicion elejida de Easing y añadirla a tu js con su texto de copyright? (Para reducir tiempos de carga)

Y una cosita mas, hay un error cuando pulsas los botones direccionales durante el desplazamiento de auto.

[Naahuel]

Claro, copiá la función de easing que necesites en el mismo archivo o en cualquier lado antes de cargar el plugin.

¿Cuál error? Sé de un problema que planeo arreglar porque puede resultar molesto, que es que los botones están habilitados incluso durante la animación lo que hace que presionando el botón rápidamente se mueva sin detenerse incluso si acabaron los slides :P

Yo la verdad lo considero un error menor, pues no afecta a la usabilidad gravemente.

[IDRID]

Iniciado por Naahuel

Claro, copiá la función de easing que necesites en el mismo archivo o en cualquier lado antes de cargar el plugin.

¿Cuál error? Sé de un problema que planeo arreglar porque puede resultar molesto, que es que los botones están habilitados incluso durante la animación lo que hace que presionando el botón rápidamente se mueva sin detenerse incluso si acabaron los slides :P

Yo la verdad lo considero un error menor, pues no afecta a la usabilidad gravemente.

No era un error xDD

Ahora mismo estoy usando tu plugin en el gadget que tengo de Videos, supongo que no funciona porque aun el elemento no ha sido creado, ¿como debo hacer para que a Videos y Levels se inicie el slideshow cuando el otro plugin ya ha puesto los datos? :S

Estoy usando Google API y un plugin llamado rssdisplayer.

PD: He comprimido el Easing pero ya lo probe sin comprimir.

[Naahuel]

Bueno cargando el plugin al final funciona, después de cargar el gadget.

Para estilizarlo necesitás saber un poco de CSS. Mirá este ejemplo que te hice (Asegurate de cambiar las rutas de los scripts de easing y el slider)

Código HTML:

<!-- estilos necesarios -->
<style>
*{margin:0; padding:0;} /*reset necesario*/
 
#videos-content ul,#videos-content{
    width:640px;
    height:400px;/*un poco mas de altura por el titulo*/
    position:relative;
    overflow:hidden;
}
#videos-content li {
    width:640px;
    height:400px;/*un poco mas de altura por el titulo*/
}
.botonAnterior, .botonSiguiente{
    position:absolute;
    top:50%;
}
.botonAnterior{left:0;}
.botonSiguiente{right:0;}
 
</style>
 
<div id="videos-content">
</div>
<script type="text/javascript">
function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul>'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var img = entries[i].media$group.media$thumbnail[0].url;
    var yturl = entries[i].media$group.media$content[0].url;
    //cambio en esta línea
    html.push("<li><img src='" + img + "' /><p><a class='video-titulo' href='" + yturl + "' rel='shadowbox[HOME];width=640;height=388'>" + title + "</a></p></li>");
  }
  html.push('</ul>');
  document.getElementById('videos-content').innerHTML = html.join('');
}
</script>
<script src="http://gdata.youtube.com/feeds/users/IDRIDPlanet/uploads?alt=json-in-script&amp;format=5&amp;callback=showMyVideos" type="text/javascript">
</script>
 
<!--jquery + easing-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>
<!--el plugin-->
<script src="sliderFacil2000.v2.js"></script>
<script>
$(function(){
    $('#videos-content').sliderFacil2000({
        easing : 'easeOutExpo',
        auto: true,
    });
});
</script>
 

Observá que cambié un poco el enmarcado que estás generando con tu gadget para optimizarlo un poco :)

[IDRID]

Sorry por no especificar, con Videos me refiero al de la pagina principal (El que esta al lado de Featured Video) , si miras el codigo de fuente aparece la llamada a tu script. ;)

[Naahuel]

Em, ¿dónde?

[IDRID]

Iniciado por Naahuel

Em, ¿dónde?

En http://idridplanet.blogspot.com#rvideos , busca rvideos en el codigo de fuente. ;)

[Naahuel]

Esto es lo que me dice la consola de Chrome:


sliderFacil2000.v2 > Failed to load resource: the server responded with a status of 404 (Not Found)
http://idridplanet.blogspot.com/:1
Uncaught SyntaxError: Unexpected token <
/#rvideos:46Uncaught TypeError: Object [object Object] has no method 'sliderFacil2000'

Es decir, no has cargado el archivo del plugin y tenés un error de sintaxis (un "<" olvidado por ahí).

[Naahuel]

Aparentemente pusiste "sliderFacil2000.v2" y no "sliderFacil2000.v2.js" en la ruta al archivo.

[IDRID]

Iniciado por Naahuel

Aparentemente pusiste "sliderFacil2000.v2" y no "sliderFacil2000.v2.js" en la ruta al archivo.

Ya esta, y es perfecto, solo me queda poner un pcoo de estilo, el unico problema esque lo estoy llamando cuando carga la pagina, ya que el script tarda en cargar.

Código:

google.load("feeds", "1") //Load Google Ajax Feed API (version 1)

function rssdisplayer(divid, url, feedlimit, showoptions,callback){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description")
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed...</div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}


rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}


rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="<a href=\"" + thefeeds[i].link + "\"target='_blank'>" + thefeeds[i].title + "</a>"
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : /snippet/i.test(this.showoptions)? "<br />"+thefeeds[i].contentSnippet  : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}

//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
//new rssdisplayer("adiv", "http://www.cssdrive.com/index.php/news/rss_2.0/", 5, "date, description")

He estado mirando callback.call pero nada

[Naahuel]

Mmm. Intentá usando:

Código Javascript:

$(window).load(function(){
    $('#home-videos').sliderFacil2000();
});
 

No te olvides que en el slider, la función "auto" no está activada por defecto.

[IDRID]

Iniciado por Naahuel

Mmm. Intentá usando:

Código Javascript:

$(window).load(function(){
    $('#home-videos').sliderFacil2000();
});
 

No te olvides que en el slider, la función "auto" no está activada por defecto.

Muchas gracias, ya funciona ;)

Si esque al final no la voy a usar.

[Naahuel]

Si :)

Ahora te queda estilizarlo. Cosas que tenés que tener en cuenta:

Necesitás estilizar los <li> de forma que todos tengan las mismas dimensiones.
Necesitás dar al contenedor un position relative de forma de poder posicionar los botones de siguiente y anterior.

Cualquier cosa que necesites preguntá :)

[JulianArts]

Estimado Naahuel:

Es posible que subas de nuevo a este hilo tu solución a este problema. Quisiera reproducir videos en mi web pero la tuya aun no esta disponible. Desde ya muchas gracias por la ayuda!!