Para realizar un slider de imágenes seguiremos unos sencillos pasos, basándonos en códigos libres de la plataforma codepen.io
1. Primero debemos asegurarnos de tener la librería JQuery en la plantilla que estemos usando, para esto debemos entrar a "plantilla-->editar HTML" CRTL+F y buscamos la linea
Justo despues de esta linea pegamos el siguiente código
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
2. Para el estilo, es decir el código CSS podremos ponerlo en la plantilla o en un gadget, si decidimos ponerlo en la plantilla debemos ponerlo entre ]]></b:skin> y </head>
si decidimos usar un gadget simplemente debemos agregar uno tipo HTML/Javascript donde copiaremos el siguiente código
<style>
ul.obgaleria{width: 100%;height:0;overflow:hidden;margin: 30px auto;list-style: none;background:transparent;font-size:0;line-height:0;}
ul.obgaleria li{position: relative;display:inline-block;height:0;margin:0;list-style:none;cursor:pointer;vertical-align:top;overflow:hidden;}
ul.obgaleria li img {position: absolute;top: -150%;bottom: -150%;left: -150%;right: -150%;width: auto;max-width: none;height: 150%;margin: auto;padding:0;border:0;}
ul.obgaleria li:last-child img {top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100%;height: auto;}
ul.obgaleria li {border-left: 3px solid transparent;border-bottom: 3px solid transparent;box-sizing: border-box;}
ul.obgaleria li:first-child, ul.obgaleria li:last-child {border-left:0;}
</style>
3. Para el código javascript copiaremos las siguientes lineas, si decidimos ponerlo en la plantilla deben ir en este mismo orden, primero css luego javascript, el valor prop = 60.00 es la proporción del alto/ancho multiplicada por 100 de la imagen principal
<script type='text/javascript'>//<![CDATA[
var prop = 60.00;
$(document).ready(function() {
$("ul.obgaleria").each(function() {
var id = "#" + $(this).attr("id");
var ancho = 100 / $(id + " li").length;
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>");
$(id + " li:first-child").clone().appendTo(id);
$(id + " li:last-child").css({
"width": "100%"
});
$(id + " li").click(function() {
$(id + " li:last-child").remove()
$(this).clone().appendTo(id).animate({
width: "100%"
}, 200);
});
});
});
//]]>
</script>
4. Ahora crearemos la lista de imágenes con un simple código
<ul class="obgaleria" id="galeria_imagenes">
<ul class="obgaleria" id="galeria_imagenes">
<li><img src="link_img1.jpg"/></li>
<li><img src="link_img2.jpg"/></li>
<li><img src="link_img3.jpg"/></li>
</ul>
La clase "obgaleria" no se puede cambiar, ya que es por la cual tenemos conexión al código CSS.
Si deseas hacerla con las imágenes abajo, dejamos los códigos en la plataforma codepen.io, solo se debe reemplazar los mismos códigos, HTML, CSS y JS, esta plataforma permite ver los cambios en tiempo real, antes de pasar el código a nuestro blog
0 comentarios: