AVISO
Este slider ha dejado de funcionar por razones que aun desconozco, se recomienda usar alg?n otro slider dentro de la categor?a de Slideshows.
Al igual que el TriSlider desconozco si este sea el verdadero nombre de este slider, yo lo he llamado as? porque el autor (CSS Tricks) ha dicho que usa el plugin Coda Slider, as? que ha sido m?s sencillo nombrarlo de esta forma.
Pero el nombre es lo de menos, lo que gusta de este slider, es que muestra las miniaturas de las im?genes para poder navegar desde ellas, y el efecto deslizante con el que avanzan.
Para poner este slider de im?genes necesitaremos uso de jQuery, as? como tres scripts m?s pero no te preocupes que no son tan pesados como parece.
Bien, 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'/>Ah? agrega donde se indica las URLs de los archivos que subiste previamente.
<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[
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function() {
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 3000);
};
// DOM Ready
$(function() {
$("#main-photo-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>
Ahora antes de ]]></b:skin> pega los estilos:
/* Coda SliderDespu�s entra en Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript, si usas la nueva interfaz entra en Dise?o | A?adir gadget | HTML/Javascript. Ah? pega la estructura del slider:
----------------------------------------------- */
#page-wrap {
width: 500px; /* Ancho del contenedor general */
min-height: 420px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAR5K73e-3A3NtRAPf29Nssj7kvZM7FR8EEU9Y6XTG6C6LFX9pMKqolpdrpJBHC4SX5EKi6sjyvFdkda4TpxKWdJ8Z50dk0gTtRnVNXIFRZpHMKskBP2MVzKn31zhloz8H-UrZEkY1qv8/s501/bg.png) top center no-repeat;
}
.slider-wrap {
width: 419px;
position: absolute;
top: 40px; left: 40px;
background:#DADADA;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 419px; /* Ancho del contenedor de las im?genes */
height: 285px; /* Alto del contenedor general */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.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: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6nlRyyOqNZMyuUUlgKOp4X9YAZzovLo_qEHnJfZ1UzSkkJTW9iM2zFPGAzChf_w6_BYPzv9CuriLwJvo6i4l3FYdjQ4EgGAHFcH24zvhCXZy3juFCLCYlHbAkl44-jH9sGXlaVKK3IKo/s10/transpBlack.png);
padding: 10px;
height: 40px;
margin-top: -60px;
position: relative;
z-index: 100;
color: #FFF; /* Color del texto de las descripciones */
}
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -16px; position: relative; padding-top: 10px; z-index: 100; }
.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH8fyaKsKEnvCXA7Iv8AwgOecX9LuWMxbLs-a3REmJnOluMOhV6YhyphenhyphenaDRs2jcsSy4Zqd3tHNr63s-izMWxJYgkTCSbyqZjHUqJiSaO8RQcPfNrgkHhz87A65D8o7W8F9IRfo_DIOs7FDU/s14/icon-arrow.png) top center no-repeat; }
<div id='page-wrap'>
<div class='slider-wrap'>
<div class='csw' id='main-photo-slider'>
<div class='panelContainer'>
<div class='panel' title='Panel 1'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen UNO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>
</div></div></div>
<div class='panel' title='Panel 2'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen DOS' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>
</div></div></div>
<div class='panel' title='Panel 3'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen TRES' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>
</div></div></div>
<div class='panel' title='Panel 4'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen CUATRO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>
</div></div></div>
<div class='panel' title='Panel 5'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen CINCO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>
</div></div></div>
<div class='panel' title='Panel 6'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen SEIS' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>
</div></div></div>
</div></div>
<!-- Estas son las MINIATURAS -->
<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src='URL de la imagen UNO' width='60px'/></a>
<div id='movers-row'>
<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src='URL de la imagen DOS' width='60px'/></a></div>
<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src='URL de la imagen TRES' width='60px'/></a></div>
<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src='URL de la imagen CUATRO' width='60px'/></a></div>
<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src='URL de la imagen CINCO' width='60px'/></a></div>
<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src='URL de la imagen SEIS' width='60px'/></a></div>
</div>
</div></div>
Por ?ltimo coloca las URLs de las im?genes donde se indica, as? como la URL de los enlaces.
Puedes modificar la velocidad con la que cambian las im?genes en la parte marcada en color naranja, ah? pon el n?mero en milisegundos, aunque la primera imagen siempre tardar? un poco m?s en cambiar.
Al slider le caben seis im?genes, y aunque se podr?a ampliar, la recomendaci?n es dejarlo como est?, a menos claro que quieras trabajar mucho.
Como ves es un gadget llamativo, ?til para mostrar contenido destacado o para una galer?a de im?genes, y arriba de las entradas quedar? muy bien.
No comments:
Post a Comment