Простая фотогалерея для сайта | CSS

31.03.14 NMitra


<div id="gallery">
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <div></div>
</div>


<div id="gallery1">
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <img src="" alt="" tabindex="0" />
  <div></div>
</div>

в f t

наверх ↑

47 комментариев:

Штиф Васлер: Класс! Клёво реализовано! Забираем в избранное!)
Штиф Васлер: Правда IE как всегда не корректно отображает...когда же люди перестанут пользоваться этим отвратительным выкидышем майкрософта.. ведь от стольких интересных решений изза него приходиться зачастую отказываться!
NMitra: В IE10 норм. IE бы выжил, если бы автоматически обновлял версии, он не намного хуже Хрома. Да, сейчас он это делает, но ряд пользователей так и застряла на 6.
Юлия Нечкина: Не могли бы вы более подробно написать, как реализовать это в сообщении? Где прописывать стиль
NMitra: Юлия, весь код и добавляйте в Сообщение, вместе со стилями. Только предварительно перейдите на вкладку "HTML". Вместо
src=""
пишите адрес своего изображения
src="http://3.bp.blogspot.com/-YCl2TeCCZUY/UyhDb1RouwI/AAAAAAAAEQw/LQ8c6TU2NC4/s00/belka-strelka.jpg"
@web_xaser: А как же "cursor: pointer;" при наведении?
NMitra: Мне показалось, что cursor: zoom-in; будет более подходящим. Для Хрома, Оперы и Safari допишите cursor: -webkit-zoom-in;
Дмитрий: Клик по картинке - она увеличивается. Повторный клик по увеличенной картинке - она возращается в исходное положение. Реализуемо без javascript?
NMitra: Только CSS. tabindex позволяет прописывать :focus для любого элемента, в том числе для картинки. pointer-events: none; делает картинку при фокусе как бы прозрачной, то есть при нажатии на неё повторно фокус снимается.
Дмитрий: Может модернизируете один из примеров выше? Видя код, будет понятнее.
NMitra: http://jsfiddle.net/NMitra/ZfLtY/
Я думала и про модальное окно http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html Но смущают два обстоятельства:
1) картинка меняет position и следовательно выпрыгивает из потока и вся страница съезжает.
2) нужен всё же нижний пустой div. Иначе картинка становится прозрачной, а что за ней не видно. Можно случайно щёлкнуть по ссылке и перейти неведомо куда. У человека будет полная дезориентация. Формат фотогалереи полностью подходит.
Zaur Hure: и как это в dle на отдельную страницу добавить...??
NMitra: Предполагаю, что должна быть какая-нибудь кнопка при написании статьи, по которой можно было бы переходить в режим HTML
Анонимный: А как с помощью этого стиля сделать одиночную картинку с увеличением по центру страницы?
NMitra: См. http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html
Анонимный: Класс
Анонимный: круто
inna kos: у меня не работает :( куда вставить этот div, внутрь кода или так и оставить в конце кода, после style? и кнопка для pinterest не загружается. Что я сделала не так? спасибо
NMitra: Какая страница сайта? Прямо в статью можно добавлять код, не важно до или после.
Анонимный: Можно только 8 фото?
NMitra: А вам сколько нужно?
Анонимный: Мне нужно было 40, решил вопрос) Но проблема, с телефона не закрываются фотки (уменьшаются)
NMitra: pointer-events вероятно не поддерживается. Попробуйте так ( http://jsfiddle.net/NMitra/s65vje47/ ):

добавить ещё один div

<div id="zakryt"></div>

добавить CSS

#gallery img:focus ~ #zakryt {
z-index: 2;
background: transparent;
}
Анонимный: Попробовал, к сожалению, всё осталось также.После cоздал отдельную страницу, и вставил ( http://jsfiddle.net/NMitra/s65vje47/ ) , на компьютере хорошо, на телефоне также((
Анонимный: Может есть еще варианты, очень не хочу менять галерею))
NMitra: Я, к сожалению, не могу посмотреть-попробовать, у меня на телефоне норм. Так что вам придётся реализовать мои идеи. Я могу лишь сделать предположение что не поддерживается. Если сделать так http://jsfiddle.net/NMitra/s65vje47/1/ , то серый фон виден? Он должен накрывать картинку, что в фокусе. Плюс, давайте и div дадим tabindex.
Jamshid Qamarov: а как сделать чтоб изначально показывались превьюшки, чтобы страница быстрее грузилась,
NMitra: Скриптом можно http://jsfiddle.net/NMitra/jwnsj5fq/
См. обсуждение http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html#c2991970016407377905
Штиф Васлер: С 8 марта, Наташа !:) Счастья вам, любви и весеннего настроения ;)

И интересная задачка в качестве вопроса :) Смотрите, если галерею поместить в блок с overflow: hidden; (или auto) размеры которого будут меньше, чем размеры увеличивающегося фото, то получим обрезанное изображение как результат. А как бы сделать так, что бы фото при увеличении, выходило за пределы блока и не обрезалось?

На практике: блок с фиксированными размерами и overflow:auto; , в котором множество миниатюр фото и скролл, и вот проблема, что при клике фото не появляется на весь экран, как хотелось бы а скрывается частично.
NMitra: Спасибо!
position: relative; нужно задать родителю, у которого дочерний элемент overflow: hidden; При этому внутри элемента с overflow: hidden; не должно быть элементов с position: relative;
См. http://shpargalkablog.ru/2012/01/css-overflow-word-wrap-text-overflow.html#overflow
Штиф Васлер: Господи, получилось! Нет слов кроме как восхищения !) Вчера два часа над этим думал, гуглил, не получилось, и в сети дельных советов не нашел. Спасибо, Наташа! вы настоящий специалист.
Анонимный: Подскажите пожалуйста,как загрузить более 8 фото,но чтобы они отображались внутри блока и не портили разметку?заранее спасибо)
NMitra: 16 фото:

#gallery img {
position: absolute;
top: 12.5%;
left: 12.5%;
max-width: 24.5%;
max-height: 24.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: zoom-in;
transition: .2s;
}
#gallery img:nth-child(4n-2) {left: 37.5%;}
#gallery img:nth-child(4n-1) {left: 62.5%;}
#gallery img:nth-child(4n) {left: 87.5%;}
#gallery img:nth-child(n+5) {top: 37.5%;}
#gallery img:nth-child(n+9) {top: 62.5%;}
#gallery img:nth-child(n+13) {top: 87.5%;}
Анонимный: Большое спасибо)
Штиф Васлер: А возможно ли сделать так, что бы фото бОльших размеров, чем родительский блок, выравнивалось в нем по центру? Конструкция:

http://cssdeck.com/labs/pxnue9lm
NMitra: Есть новое свойство object-position ( https://hacks.mozilla.org/2015/02/exploring-object-fit/ ), действует как background-position. Или скриптом рассчитывать центр.
Штиф Васлер: А получится сделать что бы когда фото увеличено, были стрелки для просмотра следующей-предыдущей фотографии?
NMitra: Вёрстка должна быть несколько другая
Штиф Васлер: Совсем другая? Даже кнопочку next со скриптом не повесить? например
NMitra: Можно сделать, к тому же идея хорошая. Но нужно время, к сожалению, у меня этого ресурса мало. Если появится минутка, то реализую, но не в ближайшее время http://shpargalkablog.ru/p/comments-blog.html
Посмотрите тут
http://shpargalkablog.ru/2013/07/slayder-dlya-sayta.html
http://shpargalkablog.ru/2014/12/slider.html
Штиф Васлер: Спасибо, попробую что нибудь придумать, может получиться, тогда поделюсь решением)
NMitra: Хорошо :)
Нил Муталлапов: спасибо)
Нил Муталлапов: Спасибо, у вас интересно)
NMitra: Рада помочь!
Анонимный: Здравствуйте! Есть такая тема: http://jsfiddle.net/nkhf249L/1/
Теперь хотелось бы добавить кнопки управления рисунками, чтобы можно было открыть одну и нажав кнопку "право" перейти к следующей фотографии. Можете помочь?
NMitra: Здравствуйте, извините, не в данный момент. Идея понятна.