¿Alguien sabe de un script que me permita mostrar resultados de imágenes de la forma en que lo hace Google Image Search (vista de cuadrícula de imágenes) con el control deslizante para ampliar y detalles? Algo que simplemente puedo "enchufar y usar", por así decirlo.Visualización de imágenes como Búsqueda de imágenes de Google
Tenga una mirada en albañilería http://masonry.desandro.com/
Esto podría ser lo que está buscando ... http://www.gethifi.com/demos/jphotogrid
CSS 3 depende? – Chad
Mira este plugin jQuery: https://github.com/brunjo/rowGrid.js
Coloca imágenes como en la búsqueda de imágenes de Google.
Dos soluciones que he encontrado hasta ahora.
$(function() {
$(window).on('resize', function() {
$('.openEntry').remove();
$('.entry').hide();
var startPosX = $('.preview:first').position().left;
console.log(startPosX);
$('.entry, .preview').removeClass("first last");
$('.entry').each(function() {
if ($(this).prev('.preview').position().left == startPosX) {
$(this).prev('.preview').addClass("first");
$(this).prevAll('.entry:first').addClass("last");
}
});
$('.entry:last').addClass("last");
});
$(window).trigger('resize');
$('.trigger').click(function() {
$('.openEntry').slideUp(800);
var preview = $(this).closest('.preview');
preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
});
$('body').on('click', '.close', function() {
$('.openEntry').slideUp(800).remove();
});
})
codrops realidad pone las ampliación de la foto/detalles en línea en lugar de como una superposición modal:
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
Extraiga el ejemplo del enlace externo. La razón por la cual esta es una buena práctica es que el enlace podría caducar algún día y luego su respuesta no será útil para otros. ¡Gracias! – Shawn
En primer lugar, es necesario poner todas las imágenes en el interior de un elemento contenedor:
<div class="parent">
<img src="">
<img src="">
<img src="">
</div>
Luego hay que asegurarse de que las imágenes se muestran en una sola línea. Esto se puede hacer, p. Ej. float: left. También debe establecer vertical-align para eliminar el pequeño espacio debajo de cada imagen:
img {
float: left;
vertical-align: top;
}
último que necesita algo de JavaScript para recorrer todas las imágenes y calcular el rowHeight ideales en función de sus dimensiones. La única cosa que hay que decir que este algoritmo es la altura máxima fila que desea (rowMaxHeight)
// Since we need to get the image width and height, this code should run after the images are loaded
var elContainer = document.querySelector('.parent');
var elItems = document.querySelector('.parent img');
var rowMaxHeight = 250; // maximum row height
var rowMaxWidth = elContainer.clientWidth;
var rowWidth = 0;
var rowRatio = 0;
var rowHeight = 0;
var rowFirstItem = 0;
var rowIsLast = false;
var itemWidth = 0;
var itemHeight = 0;
// Make grid
for (var i = 0; i < elItems.length; i++) {
itemWidth = elItems[i].clientWidth;
itemHeight = elItems[i].clientHeight;
rowWidth += itemWidth;
rowIsLast = i === elItems.length - 1;
// Check if current item is last item in row
if (rowWidth + rowGutterWidth >= gridWidth || rowIsLast) {
rowRatio = Math.min(rowMaxWidth/rowWidth, 1);
rowHeight = Math.floor(rowRatio * rowMaxHeight);
// Now that we know the perfect row height, we just
// have to loop through all items in the row and set
// width and height
for (var x = rowFirstItem; x <= i; x++) {
elItems[i].style.width = Math.floor(rowRatio * itemWidth * (rowMaxHeight/itemHeight)) + 'px';
elItems[i].style.height = rowHeight + 'px';
}
// Reset row variables for next row
rowWidth = 0;
rowFirstItem = i + 1;
}
}
Tenga en cuenta que este código no se ha probado y una versión muy simplificada de lo que este vainilla JavaScript plug-in hace: https://fld-grd.js.org
simplemente basta con repetir sus imágenes como esta:
<img style="float: left; height: 12em; margin-right: 1%; margin-bottom: 0.5em;border:1px solid lightgray" src="ImgSrc " />
esto se ve bien, estoy echarle un vistazo. – Chad