Я пытаюсь создать отзывчивую галерею миниатюр с помощью лайтбоксов. Идея состоит в том, чтобы щелкнуть изображение, и это изображение будет отображаться на лайтбокс.
Я нашел этот хороший учебник, в котором объясняется, как сделать отзывчивую миниатюру. Я также нашел плагин colorbox для наличия лайтбокса.
Моя проблема прямо сейчас - это disaligment. Каждый раз, когда я добавляю текст, строки разбиваются.
Это демонстрация того, что я пытаюсь сделать. http://jsbin.com/melaz/1
заранее спасибо
Вы можете сортировать div
по height
перед показом.
var sorted = $(".container .galleryItem").sort(function(a, b) {
return $(a).height() > $(b).height() ? 1 : -1;
});
$(".container").html(sorted);
вместо использования float: left;
для .galleryItem
элементов, попробуйте использовать display: inline-block;
,
.galleryItem
одинаковую высоту, или использовать jQuery, чтобы выделить их все и установить их высоту напрямую.