AVISO
Esta galer?a de videos ya no funciona, se recomienda buscar otra opci?n.
La otra vez ve?amos c?mo poner una
galer?a de im?genes con Coda Slider, y dado a las posibilidades que tiene el script pens� que podr?amos hacer una galer?a de videos con este mismo slider s?lo haciendo unas peque?as modificaciones.
El resultado es una galer?a de videos con jQuery que permite pasar de un video a otro de forma deslizante haciendo click en las miniaturas que se encuentran debajo. A esta galer?a podemos a?adirle hasta 7 videos con las medidas actuales que posee.
El procedimiento es similar al otro slider, primero
descarga este archivo, descompr?melo, sube los archivos a un hosting y luego pega este c?digo antes de
</head><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='URL del archivo jquery-easing-1.3.pack.js'/>
<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>
<script src='URL del archivo coda-slider.1.1.1.pack.js'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$("#main-video-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
//]]>
</script>
Ah? coloca donde se indica las URLs de los archivos que subiste previamente.
Luego antes de
]]></b:skin> coloca los estilos de la galer?a:
/* Coda Slider (Video)
----------------------------------------------- */
#page-wrap {
width: 490px; /* Ancho del contenedor general */
min-height: 354px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6REXR7D4_7caCWaTWDXMxTlrrK4TfQNoUZUmxMfOsLEsOYqQghsVatxaAe2ytnxoB8xLlKXzIrcF9u5FmNbzZD6HGobjEV0FnB2y8ith8LkL3aP9lETecKlUe-eXVgbk3pFd1E9F3yaQ/s490/vid-bg.png) top center no-repeat;
}
.slider-wrap {
width: 450px;
position: absolute;
top: 20px;
left: 20px;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 450px; /* Ancho del contenedor de los videos */
height: 274px; /* Alto del contenedor de los videos */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 450px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px;}
#movers-row { margin: -39px 0 0 62px; }
#movers-row div { width: 16.6%; float: left; }
#movers-row div a.cross-link { float: right; }
.cross-link { display: block; width: 58px; margin-top: -10px; position: relative; padding-top: 3px; z-index: 100; }
El tercer paso es entrar en
Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript (para la interfaz antigua), o
Dise?o | A?adir gadget | HTML/Javascript (para la interfaz nueva). Ah? pega este c?digo:
<div id="page-wrap">
<div class="slider-wrap">
<div class="csw" id="main-video-slider">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_UNO" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_DOS" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_TRES" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CUATRO" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CINCO" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SEIS" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="panel" title="Panel 7">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SIETE" frameborder="0" allowfullscreen></iframe>
</div></div>
</div></div>
<!-- Estas son las MINIATURAS de los videos -->
<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_UNO/1.jpg" width='58px'/></a>
<div id='movers-row'>
<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_DOS/1.jpg" width='58px'/></a></div>
<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_TRES/1.jpg" width='58px'/></a></div>
<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CUATRO/1.jpg" width='58px'/></a></div>
<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CINCO/1.jpg" width='58px'/></a></div>
<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SEIS/1.jpg" width='58px'/></a></div>
<div><a class='cross-link' href='#7'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SIETE/1.jpg" width='58px'/></a></div>
</div>
</div></div>
Coloca donde se indica la ID del video de YouTube. La ID del video es toda esa serie de caracteres que aparecen al final de la URL del video, por ejemplo:
Como puedes ver, la ID del video debes colocarla dos veces, una es para el video, y otra para la imagen en miniatura del video.
Tambi�n puedes poner videos de otros servicios, s?lo debes eliminar un c?digo como este:
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE" frameborder="0" allowfullscreen></iframe>
Y en su lugar deber?s poner el c?digo de tu video, que deber? medir 450px de ancho y 274px de alto. Tambi�n deber?s cambiar la URL de la imagen de la miniatura:
<img class='nav-thumb' height='40px' src="URL de la imagen" width='58px'/>
Es una galer?a de videos sencilla pero que puede verse muy bien arriba de las entradas del blog, y si la usamos s?lo para videos de YouTube entonces ser? menos complicado.
