3

Необходимо, чтобы при нажатии на картинку(уменьшенную версию) на экране по центру появлялась её увеличенная версия. Проблема в том, что если картинок много и открывается картинка внизу, то по закрытии картинки происходит переход вверх страницы. Как можно это реализовать без перехода. Мне посоветовали использовать checkbox, но я не особо понимаю, как через них делать.

.pictures {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  margin-bottom: -1em;
}
a {
  display: inline-block;
}
img {
  display: block;
  width: 100%;
  margin-bottom: 1em;
}
.full {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 8%;
  background: #CCC center no-repeat;
  background: rgba(0, 0, 0, 0.5) center no-repeat;
  background-size: contain;
  background-origin: content-box;
}
.full:target {
  display: block;
}
<section class="pictures">
  <a href="#pexels-photo-46871-large.jpeg">
    <img src="https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg">
  </a>
  <a id="pexels-photo-46871-large.jpeg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg)"></a>
  <a href="#pexels-photo-60163-large.jpeg">
    <img src="https://static.pexels.com/photos/60163/pexels-photo-60163-large.jpeg">
  </a>
  <a id="pexels-photo-60163-large.jpeg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/60163/pexels-photo-60163-large.jpeg)"></a>
  <a href="#vintage-technology-music-old-large.jpg">
    <img src="https://static.pexels.com/photos/1539/vintage-technology-music-old-large.jpg">
  </a>
  <a id="vintage-technology-music-old-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/1539/vintage-technology-music-old-large.jpg)"></a>
  <a href="#pexels-photo-large.jpg">
    <img src="https://static.pexels.com/photos/36092/pexels-photo-large.jpg">
  </a>
  <a id="pexels-photo-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/36092/pexels-photo-large.jpg)"></a>
  <a href="#car-orange-retro-large.jpg">
    <img src="https://static.pexels.com/photos/9014/car-orange-retro-large.jpg">
  </a>
  <a id="car-orange-retro-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/9014/car-orange-retro-large.jpg)"></a>
  <a href="#vintage-music-closed-shop-large.jpg">
    <img src="https://static.pexels.com/photos/2017/vintage-music-closed-shop-large.jpg">
  </a>
  <a id="vintage-music-closed-shop-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/2017/vintage-music-closed-shop-large.jpg)"></a>
  <a href="#pexels-photo-64687-large.jpeg">
    <img src="https://static.pexels.com/photos/64687/pexels-photo-64687-large.jpeg">
  </a>
  <a id="pexels-photo-64687-large.jpeg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/64687/pexels-photo-64687-large.jpeg)"></a>
  <a href="#black-and-white-car-vehicle-vintage-large.jpg">
    <img src="https://static.pexels.com/photos/474/black-and-white-car-vehicle-vintage-large.jpg">
  </a>
  <a id="black-and-white-car-vehicle-vintage-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/474/black-and-white-car-vehicle-vintage-large.jpg)"></a>
  <a href="#people-vintage-photo-memories-large.jpg">
    <img src="https://static.pexels.com/photos/5842/people-vintage-photo-memories-large.jpg">
  </a>
  <a id="people-vintage-photo-memories-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/5842/people-vintage-photo-memories-large.jpg)"></a>
  <a href="#building-vintage-bike-monument-large.jpg">
    <img src="https://static.pexels.com/photos/2884/building-vintage-bike-monument-large.jpg">
  </a>
  <a id="building-vintage-bike-monument-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/2884/building-vintage-bike-monument-large.jpg)"></a>
</section>

2
  • у вас отлично работает ваш пример , но если вы хотите по круче то вот пример и не плохой fancybox.net
    – user33274
    29 мая 2016 в 7:44
  • мой пример работает неплохо, но проблему я уже описал выше: когда картинок очень много и картинка открывается на весь экран, то происходит переход к верху страницы и мне от него нужно каким-то образом избавиться. Ваш пример строится благодаря jQuery, а мне нужен чистый css 29 мая 2016 в 9:33

2 ответа 2

5

Если для вас принципиально использование CSS и структура разметки будет как в вашем примере, то вместо псевдокласса :target на самом показывающемся блоке можно использовать псевдокласс :focus на ссылке, по которой происходит клик, и делать видимой следующую за ней ссылку, будет выглядеть так:

a:focus + .full { display: block; }

Это устранит скроллирование вверх. Пример на JSFiddle

P.S. Но лучше, по-моему, для полноценных модальных окон использовать JS

1

Вы можете воспользоваться готовыми решениями, например, библиотекой highslide.js. Она имеет MIT-лицензию и написана на javascript без использования Jquery. Просто подключается:

<script src="/highslide.js" type="text/javascript"></script>
<link href="/highslide.css" rel="stylesheet" property="stylesheet" />
<script type="text/javascript">
  hs.graphicsDir = '/graphics/';
</script>

где /graphics/ - путь до графических компонентов, поставляемых в дистрибутиве.

Используется таким образом:

<a href="/images/image_big.jpg" class="highslide" onclick="return hs.expand(this)">
  <img src="/images/image_small.jpg" />
</a>

Демо

Инструкция на русском языке.

2
  • Если вы предлагаете библиотеку, то описание должно быть прямо в ответе. Одной ссылки не достаточно для развёрнутого ответа.
    – 0xdb
    31 мар 2018 в 17:00
  • @0xdb, поправил.
    – Max Olkhin
    5 апр 2018 в 6:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.