Главная » Сниппеты » Организация миниатюр в галерею с помощью CSS

Организация миниатюр в галерею с помощью CSS

Организация миниатюр в галерею с помощью CSS

Предлагаю коротенький фрагмент кода CSS, с помощью которого вы легко сможете выстроить изображений в стройную сетку, привычный всем макет галереи.

Для размещения миниатюр, используем простой неупорядоченный список <ul>, который в зависимости от размера картинок, будет автоматом выстраиваться в идеально расчерченную сетку, с равными отступами между каждой картинкой.

HTML

<ul>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100"></a></li>    
  </ul>

В примере добавил легкую тень, появляющуюся у картинок в момент наведения на них, опция, как вы понимаете, не обязательная))).

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;
  width: 100px;
  height: 100px;
}

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

6 комментариев
  1. Олег:

    В IE каждое новое изображение опускается ниже предыдущего (s019.radikal.ru/i640/1501/4a/8f0accc08591.jpg) и нет эффектов. Как это исправить?

    Ответить
    • driver:

      Здравствуйте, Олег.

      Ещё раз всё проверил в разных версиях IE, демо в том виде как оно есть, отображается корректно вплоть до IE8, на версии IE7 и ниже я давно забил, выравнивание с помощью float: начинает работать с IE8. Если для вас так критично вести археологические раскопки, можете воспользоваться другими методами расстановки элементов.

      Ответить
  2. Сергей:

    Большое спасибо за полезную статью, все работает на ура. Но есть вопрос. Каким образом можно добавить текст (ссылку) внизу каждой миниатюры без разрушения строя миниатюр?

    Ответить
    • driver:

      Это всего лишь пример быстрой компоновки миниатюр, для интеграции подписей, конструкция будет несколько сложнее, можете сделать наложение подписей на картинку, или всплывающими при наведении. Что касаемо данного макета, набросал небольшой пример: Тынц, поковыряйтесь в исходниках и думаю принцип станет вам понятен

      Ответить
      • Сергей:

        Большое спасибо за пример, получилось даже лучше, чем хотелось. С нетерпением жду новых выпусков.

        Ответить
  3. Антон:

    Как раз то,что я искал!

    Спасибо!

    А можно ещё сделать,чтобы картинки не подгонялись под размер 100×100. Т.е чтобы просто показывался какой-то фрагмент от картинки размером 100×100?

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru