MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Galería de videos en tu blog

Hola.
Ahora estoy felizmente compartiendo un reproductor de video para colocar en la página.
Tiene espacio para 5 videos.
No es recomendable aumentar más videos por el peso del blog, pero con 5 se puede uno acomodar bastante bien.
Sigue los pasos tal y como se indica. Cuida de no borrar ningún elemento al pegar los códigos tanto en la plantilla como en el gadget de html.
Recuerda también guardar antes de hacer cualquier cambio tu código de plantilla. Puedes utilizar para ello una nota en el Block  de notas.

También recuerda que para buscar cualquier código dentro de tu plantilla puedes utilizar las teclas "ctrl" y "f" al mismo tiempo. Puede aparecer un recuadro en la parte sup. derecha o en la parte inferior izquierda de tu pantalla dependiendo del navegador que utilices.

Espero te sirva y lo disfrutes tanto como yo.
Laura.

Te comparto el post tal y como lo puso el Potro en Ciudad Blogger


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 mi página de videos 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='http://3.bp.blogspot.com/-IbCgBm3kukw/UI3nvBbvtUI/AAAAAAAADL0/lfqoLXFkhfU/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(http://4.bp.blogspot.com/-qgLr9azZ3kk/UI3nvtqmjBI/AAAAAAAADMA/ASkdnSf4SWA/s000/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.

Los cambios que necesitas aplicar si tienes scriptaculous son:

Para aplicar esta variable necesitamos hacer uso del comando jQuery.noConflict();
Por ejemplo, un código que use jQuery se vería similar a este:
<script src="URL del archivo jQuery" type="text/javascript" />
<script src="URL de algún script que necesita jQuery" type="text/javascript" />

<script type="text/javascript">
$(document).ready(function(){
$("div").hide();
});
</script>

Lo que hacemos ahora es agregar antes de las instrucciones del script el comando jQuery.noConflict(); y además cambiaremos todos los $ que encontremos por la palabra jQuery
Por ejemplo:
<script src="URL del archivo jQuery" type="text/javascript" />
<script src="URL de algún script que necesita jQuery" type="text/javascript" />
<script src="" type="text/javascript" />

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div").hide();
});
</script>

Y habiendo hecho eso jQuery podrá usarse sin problemas aun cuando tengamos otra librería de scripts en el blog.
En resumen, agregamos la función jQuery.noConflict(); y cambiamos todos los $ por jQuery
De esta forma en la gran mayoría de los casos podrás usar jQuery y Scriptaculous al mismo tiempo sin resignarte a elegir uno u otro.

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者