Galer??a de Videos con Coda Slider

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(http://lh5.googleusercontent.com/-G4VkOTiq72Y/TroR_ySL7-I/AAAAAAAAB54/Kg92zbZvd80/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>

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.


Fuente