Galer?a de videos para el blog

En esta entrada vamos a ver c?mo crear una galer?a de videos de YouTube usando jQuery. Es una elegante galer?a a la que le caben 5 videos y que por sus dimesiones la pondremos debajo de la cabecera del blog. En realidad puedes ponerla en cualquier parte, pero se recomienda en esa ?rea por los 765px que mide de ancho la galer?a.

Puedes verla funcionando en este demo.

Para agregar este slider de videos en tu blog entra en Plantilla | Edici?n de HTML y antes de </head> agrega los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
/*hoverscroll v.0.2.4*/
(function($) {
$.fn.hoverscroll = function(params) {
if (!params) { params = {}; }
params = $.extend({}, $.fn.hoverscroll.params, params);
this.each(function() {
var $this = $(this);
if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}
if (params.fixedArrows) {
$this.wrap('<div class="fixed-listcontainer"></div>')
}
else {
$this.wrap('<div class="listcontainer"></div>');
}

$this.addClass('list');
var listctnr = $this.parent();
listctnr.wrap('<div class="ui-widget-content hoverscroll' +
(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
//listctnr.wrap('<div class="hoverscroll"></div>');

var ctnr = listctnr.parent();

var leftArrow, rightArrow, topArrow, bottomArrow;
if (params.arrows) {
if (!params.vertical) {
if (params.fixedArrows) {
leftArrow = '<div class="fixed-arrow left"></div>';
rightArrow = '<div class="fixed-arrow right"></div>';

listctnr.before(leftArrow).after(rightArrow);
}
else {
leftArrow = '<div class="arrow left"></div>';
rightArrow = '<div class="arrow right"></div>';

listctnr.append(leftArrow).append(rightArrow);
}
}
else {
if (params.fixedArrows) {
topArrow = '<div class="fixed-arrow top"></div>';
bottomArrow = '<div class="fixed-arrow bottom"></div>';

listctnr.before(topArrow).after(bottomArrow);
}
else {
topArrow = '<div class="arrow top"></div>';
bottomArrow = '<div class="arrow bottom"></div>';

listctnr.append(topArrow).append(bottomArrow);
}
}
}
ctnr.width(params.width).height(params.height);

if (params.arrows && params.fixedArrows) {
if (params.vertical) {
topArrow = listctnr.prev();
bottomArrow = listctnr.next();

listctnr.width(params.width)
.height(params.height - (topArrow.height() + bottomArrow.height()));
}
else {
leftArrow = listctnr.prev();
rightArrow = listctnr.next();

listctnr.height(params.height)
.width(params.width - (leftArrow.width() + rightArrow.width()));
}
}
else {
listctnr.width(params.width).height(params.height);
}

var size = 0;

if (!params.vertical) {
ctnr.addClass('horizontal');
$this.children().each(function() {
$(this).addClass('item');

if ($(this).outerWidth) {
size += $(this).outerWidth(true);
}
else {
size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))
+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
}
});
$this.width(size);

if (params.debug) {
$.log('[HoverScroll] Computed content width : ' + size + 'px');
}
if (ctnr.outerWidth) {
size = ctnr.outerWidth();
}
else {
size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))
+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container width : ' + size + 'px');
}
}
else {
ctnr.addClass('vertical');
$this.children().each(function() {
$(this).addClass('item')

if ($(this).outerHeight) {
size += $(this).outerHeight(true);
}
else {
size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))
+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
}
});
$this.height(size);

if (params.debug) {
$.log('[HoverScroll] Computed content height : ' + size + 'px');
}
if (ctnr.outerHeight) {
size = ctnr.outerHeight();
}
else {
size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))
+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container height : ' + size + 'px');
}
}
var zone = {
1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},
2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},
3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},
4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},
5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},
6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},
7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},
8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},
9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
function checkMouse(x, y) {
x = x - ctnr.offset().left;
y = y - ctnr.offset().top;

var pos;
if (!params.vertical) {pos = x;}
else {pos = y;}

for (i in zone) {
if (pos >= zone[i].from && pos < zone[i].to) {
if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}
else {stopMoving();}
}
}
}

function setArrowOpacity() {
if (!params.arrows || params.fixedArrows) {return;}

var maxScroll;
var scroll;

if (!params.vertical) {
maxScroll = listctnr[0].scrollWidth - listctnr.width();
scroll = listctnr[0].scrollLeft;
}
else {
maxScroll = listctnr[0].scrollHeight - listctnr.height();
scroll = listctnr[0].scrollTop;
}
var limit = params.arrowsOpacity;
var opacity = (scroll / maxScroll) * limit;

if (opacity > limit) { opacity = limit; }
if (isNaN(opacity)) { opacity = 0; }

var done = false;
if (opacity <= 0) {
$('div.arrow.left, div.arrow.top', ctnr).hide();
if(maxScroll > 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
}
done = true;
}
if (opacity >= limit || maxScroll <= 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).hide();
done = true;
}

if (!done) {
$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
}
}

function startMoving(direction, speed) {
if (ctnr[0].direction != direction) {
if (params.debug) {
$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
}

stopMoving();
ctnr[0].direction = direction;
ctnr[0].isChanging = true;
move();
}
if (ctnr[0].speed != speed) {
if (params.debug) {
$.log('[HoverScroll] Changed speed: ' + speed);
}

ctnr[0].speed = speed;
}
}

function stopMoving() {
if (ctnr[0].isChanging) {
if (params.debug) {
$.log('[HoverScroll] Stoped moving');
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
clearTimeout(ctnr[0].timer);
}
}

function move() {
if (ctnr[0].isChanging == false) {return;}

setArrowOpacity();

var scrollSide;
if (!params.vertical) {scrollSide = 'scrollLeft';}
else {scrollSide = 'scrollTop';}

listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
ctnr[0].timer = setTimeout(function() {move();}, 50);
}

if (params.rtl && !params.vertical) {
listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
}

ctnr
.mousemove(function(e) {checkMouse(e.pageX, e.pageY);})
.bind('mouseleave', function() {stopMoving();});

this.startMoving = startMoving;
this.stopMoving = stopMoving;

if (params.arrows && !params.fixedArrows) {
// Initialise arrow opacity
setArrowOpacity();
}
else {
// Hide arrows
$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
}
});

return this;
};

if (!$.fn.offset) {
$.fn.offset = function() {
this.left = this.top = 0;

if (this[0] && this[0].offsetParent) {
var obj = this[0];
do {
this.left += obj.offsetLeft;
this.top += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return this;
}
}

$.fn.hoverscroll.params = {
vertical: false,
width: 400,
height: 50,
arrows: true,
arrowsOpacity: 0.7,
fixedArrows: false,
rtl: false,
debug: false
};
$.log = function() {
try {console.log.apply(console, arguments);}
catch (e) {
try {opera.postError.apply(opera, arguments);}
catch (e) {}
}
};
})(jQuery);

// Aplicar desde aqu? el hack de compatibilidad con Scriptaculous en caso de ser necesario

$(function(){
$("#slidervideo-tabs a").click(function(){
var container = $("#slidervideo-content");
container.html("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6FhcgNvq5xlUEumf3hw7KIJ3WoeV8N1eTCa7EeHzvT4eByf3hBLTm3nwn0zo_92lVONtAH2GN_WcojzBIWUDoYwOGPMdeEoYlxd5zS-PyhlZgfxzxsDdKfGyQk7N9P8QjP2IgOhsVAI/s400/loading.gif' class='loading-vid' />");
var id = $(this).attr("href").slice(1);
loadvideo(id);
return false;
});
$("#slidervideo-tabs").hoverscroll({vertical:true,width:300,height:330,arrows:false});
$("#slidervideo-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
loadvideo();
});

function loadvideo (hash){if(hash){hash = hash.slice(3);$("#slidervideo-content").html(video[hash]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#slidervideo-content").html(video[1]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid1]").parent().addClass("actVid");}}
//]]>
</script>

Luego agrega los estilos antes de ]]></b:skin>

/* Galer?a de videos
----------------------------------------------- */
#slidervideo {
background:#000; /* Color de fondo */
clear:both;
margin:0 auto;
padding:5px;
width:765px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#slidervideo, #slidervideo-content, #slidervideo-tabs {height:350px;overflow:hidden;}
#slidervideo-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#slidervideo-tabs {float:right;width:300px;margin:0;}
#slidervideo-tabs li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidLdkefXuCKcCxRwurzTzBi6okiERVqHwKSzRrRHxEiX3ZPmxUrDqVOxd90umdpMFOZPOzfSZCXyNrh9Ek0jaXEuvPavBiV4rvaKEFiAqi4FxAwQFQpVcz3oBjNbsp989QdX3KWGQv-Kc/s0/tab_bg.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}
#slidervideo-tabs li a {padding:0 !important;border:0 !important;}
#slidervideo-tabs li.hover {background:#333;}
#slidervideo-tabs li.actVid {background:#555;}
#slidervideo-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#slidervideo-tabs li span.vidTit {
display:block;
color:#CD332D; /* Color de los t?tulos */
font-size:14px; /* Tama?o de los t?tulos */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs li .vidDesc {
display:block;
color:#fff; /* Color de la descripci?n */
font-size:12px; /* Tama?o del texto de la descripci?n */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs a {text-decoration:none;}
#slidervideo-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#slidervideo-tabs li a:hover {background: none !important;}

Ahora en un elemento HTML/Javascript pega la estructura del slider, este gadget es el que pondr?s debajo de la cabecera:

<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="slidervideo">
<div id="slidervideo-content"></div>
<ul id="slidervideo-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/ID_video_1/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripci?n del video</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/ID_video_2/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripci?n del video</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/ID_video_3/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripci?n del video</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/ID_video_4/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripci?n del video</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/ID_video_5/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripci?n del video</span></a></li>

</ul>
</div>

Agrega los IDs de los videos, sus nombres y su descripci?n y listo. La descripci?n deber? ser muy breve para que no tengas problemas de espacios.

Si no sabes c?mo obtener la ID de un video abre el video en YouTube y mira en la barra de direcciones, los ?ltimos caracteres son la ID que necesitas.

Toma en cuenta que la ID de cada video se agrega dos veces, uno es para que muestre el video y otra para la miniatura de las pesta?as.

Es una galer?a que como funciona con jQuery deber?s cerciorarte de no repetir la versi?n del script en caso de que ya tengas jQuery, y si usas Scriptaculous deber?s aplicarle unos cambios, casi al final del primer c?digo ver?s en color azul desde d?nde deber?s aplic?rselos en caso de que lo necesites.