Создание отзывчивой галереи миниатюр

0

Я пытаюсь создать отзывчивую галерею миниатюр с помощью лайтбоксов. Идея состоит в том, чтобы щелкнуть изображение, и это изображение будет отображаться на лайтбокс.

Я нашел этот хороший учебник, в котором объясняется, как сделать отзывчивую миниатюру. Я также нашел плагин colorbox для наличия лайтбокса.

Моя проблема прямо сейчас - это disaligment. Каждый раз, когда я добавляю текст, строки разбиваются. Изображение 174551

Это демонстрация того, что я пытаюсь сделать. http://jsbin.com/melaz/1

заранее спасибо

  • 1
    Я думаю, что вам лучше пойти с масонством: masonry.desandro.com
  • 0
    +1 для масонства. Вы могли бы почти реализовать то, что вы пытаетесь сделать с помощью столбцов CSS3, но есть несколько проблем с этим.
Теги:
image

2 ответа

1
Лучший ответ

Вы можете сортировать div по height перед показом.

var sorted = $(".container .galleryItem").sort(function(a, b) {               
  return $(a).height() > $(b).height() ? 1 : -1;
});   

$(".container").html(sorted);

http://jsbin.com/zawexubu/1

0

вместо использования float: left; для .galleryItem элементов, попробуйте использовать display: inline-block; ,

  • 0
    Это работает отчасти. Оставив пустое пространство сверху, будет лучше.
  • 0
    «пустое место» не было частью вашего первоначального вопроса. Вероятно, вы можете внести дополнительные изменения в CSS, чтобы установить для каждого элемента .galleryItem одинаковую высоту, или использовать jQuery, чтобы выделить их все и установить их высоту напрямую.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню