Hola.
Mira. Yo lo hice de esta forma. Pero tengo un problema de que a veces algunas imagenes no se muestran. Y no se por que. Ya publique aca mismo preguntando, pero no tuve respuesta.
JavaScript
:
Código Javascript
:
Ver original$( document ).ready(function() {
showDiv();
fixlightbox();
});
// Show Divs
function showDiv() {
$('.photos a img').load(function(){
$(this).fadeIn(600);
$(this).next().fadeOut(0);
exe_masonry();
});
}
HTML:
Código HTML:
<div class="photos">
<a href="estudio/server/php/files/<?php echo $row['name']; ?>" data-lightbox="example-set" data-title="<?php echo $row['titulo_foto']; ?>">
<img class="photo" id="id_<?php echo $row['id_foto']; ?>" src="estudio/server/php/files/<?php echo $row['name']; ?>" />
<div id="facebookG">
<div id="blockG_1" class="facebook_blockG"></div>
<div id="blockG_2" class="facebook_blockG"></div>
<div id="blockG_3" class="facebook_blockG"></div>
</div>
</a>
</div>
Esta parte del codigo:
Código HTML:
<div id="facebookG">
<div id="blockG_1" class="facebook_blockG"></div>
<div id="blockG_2" class="facebook_blockG"></div>
<div id="blockG_3" class="facebook_blockG"></div>
</div>
Es un conjunto de divs que se animan con CSS3 para simular la imagen de carga (igual a la que se usa en facebook), y se que oculta con el js de arriba, una vez que la imagen se carga.
La funcion exe_masonry(); esta para llamar a un plugin js que acomoda las imagenes para ocupar todo el espacio disponible en la pagina. Si, no lo usas en tu web, esa linea de código, la podes borrar.
Y fixlightbox(); es una función personalizada para corregir unos detalles del lightbox que uso.
En este tema, hice la consulta sobre como solucionar el problema.
AQUI