En este tutorial os voy a mostrar cómo crear una galería de imágenes responsive a ancho completo con CSS y Masonry (es una librería de diseño de grids en JavaScript). En este caso veremos cómo crear una galería de imágenes, pero puedes aplicar lo mismo para mostrar artículos, perfiles de usuario, vídeos...
Crea un grid y añade imágenes de distintos tamaños.
<div id="container">
<div class="grid-sizer"></div>
<div class="item">
<img src="http://placekitten.com/650/450" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/650/750" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/1650/1250" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/850/450" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/900/700" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/700/1400" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/1200/1300" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/750/650" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/1600/900" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/700/400" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/1100/1200" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/800/1100" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/600/400" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/1100/900" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/1320/1200" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
<div class="item">
<img src="http://placekitten.com/1024/768" class="image">
<a class="onhandover" href="#">
<h3 class="title">Your Image Title</h3>
<div class="description">
<p>
Description Goes here!!
</p>
</div>
</a>
</div>
</div>
Como puedes ver en el código anterior, en cada uno de los grids irá nuestro elemento, que constará de un título y una descripción, acompañada de una imagen. Las imágenes las he obtenido de un banco de imágenes gratuito llamado placekitten.com. Es un servicio muy útil para cuando creas diseños y quieres poner imágenes de ejemplo típicas de mockups, pero con imágenes de gatitos que siempre viene bien.
Este será el CSS para organizar tu galería:
.item {
float: left;
position: relative;
line-height: 1em;
}
.grid-sizer { width: 20%; }
.item { width: 20%; }
@media screen and (max-width: 1224px) {
/* 10 columns for larger screens */
.grid-sizer { width: 33.33%; }
.item { width: 33.33%; }
}
@media screen and (max-width: 720px) {
/* 10 columns for larger screens */
.grid-sizer { width: 50%; }
.item { width: 50%; }
}
@media screen and (max-width: 480px) {
/* 10 columns for larger screens */
.grid-sizer { width: 100%; }
.item { width: 100%; }
}
.image{
max-width: 100%;
margin: 0;
display: block;
}
.image:after {
clear:both;
}
.onhandover {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
text-decoration: none;
color: #fff;
display: none;
}
.onhandover .title {
text-align: center;
font-size: 30px;
}
.onhandover .description {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.80);
width: 100%;
margin: 0;
}
.onhandover .description p {
text-align: center;
}
.item:hover .onhandover {
display: block;
}
Usamos @media para diferentes resoluciones de pantalla y así hacer nuestra galería responsive. Con la clase .onhandover mostramos el título y la descripción mediante un evento onhandover.
Archivos jQuery a incluir
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://demo.phpgang.com/full-screen-image-gallery-css-masonry/masonry.pkgd.min.js"></script>
Iniciamos Masonry utilizando lo siguiente:
<script type="text/javascript">
$(window).load( function() {
$("#container").masonry({
"itemSelector": ".item",
"columnWidth": ".grid-sizer",
});
});
</script>
Fuente: phpgang.com