Flex es un plugin para jQuery para la creación de galerías asimétricas de imágenes, de manera muy simple y con un resultado visualmente impactante.
Todos sabemos que uno de los grandes problemas a la hora de generar una galería de imágenes es el de normalizar el tamaño de las mismas, algo que dependiendo de la cantidad no es siempre sencillo ni tampoco queda bien estéticamente. Para solventar este problema podemos utilizar Flex, que mediante algunos cálculos y animaciones permite generar un set de imágenes con distintos tamaños, obteniendo un resultado muy agradable y funcional.
Visiten la demostración online.
Ejemplo de uso:
Inclusión de las bibliotecas a nuestro proyecto:
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.flex.js"></script>
Estructura HTML:
<div class="flex">
<a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="325"
height="175">A</a>
<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250"
height="175">B</a>
<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125"
height="350">C</a>
<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175"
height="150">D</a>
<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200"
height="250">E</a>
<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150"
height="225">F</a>
<a bg="g" style="left:0px;height:100px;top:135px;width:75px;"
width="305" height="150">G</a>
<a bg="h" style="left:260px;height:75px;top:110px;width:125px;"
width="200" height="200">H</a>
<a bg="i" style="left:85px;height:140px;top:135px;width:165px;"
width="200" height="140">I</a>
<a bg="j" style="left:565px;height:150px;top:135px;width:75px;"
width="125" height="275">J</a>
<a bg="k" style="left:650px;height:75px;top:135px;width:75px;"
width="75" height="200">K</a>
</div>
CSS:
<style>
.flex {position:relative;width:850px;min-height:300px;margin:0 auto;
border:0px solid red;margin-top:10px;}
.flex a {background-color:white;display:block;width:100px;height:100px;
border-radius:8px;position:absolute;background-repeat:no-repeat;
background-position:center;border:3px solid white;cursor:pointer;
text-align:left;text-shadow:1px 1px 20px #000;color:white;
font-size:18px;font-weight:bold;text-indent:10px;
line-height:30px;}
[bg=a] {background-image:url(1.jpg);}
[bg=b] {background-image:url(2.jpg);background-size:300px auto;}
[bg=c] {background-image:url(3.jpg);}
[bg=d] {background-image:url(4.jpg);}
[bg=e] {background-image:url(5.jpg);background-size:auto 280px;}
[bg=f] {background-image:url(6.jpg);background-size:auto 280px;}
[bg=g] {background-image:url(7.jpg);background-size:auto 200px;}
[bg=h] {background-image:url(8.jpg);}
[bg=i] {background-image:url(9.jpg);background-size:auto 200px;}
[bg=j] {background-image:url(10.jpg);background-size:auto 280px;}
[bg=k] {background-image:url(11.jpg);background-size:auto 280px;}
</style>
Inicialización del plugin:
<script type="text/javascript">
$(function() {
$(".flex").flex();
});
</script>
