суббота, 5 марта 2016 г.

Графика во всплывающем слое

10:22 By , No comments


Многие публикации содержат помимо текста - картинки, графики всевозможные, выполненные виде превьюшек. Для более детального ознакомления с графикой придумано много способов и основном для этих целей юзается JavaScript, зачастую не мерянных оъемов.
Автор сего блога ни разу не программист и ему проще сваять нечто подобное на чистом html и css.
Рассматриваем частную задачу, а именно - есть картинка, клик по ней не отправляет посетителя на новую страницу, он открывает туже картинку (может быть иной) в этом же окне без перезагрузки браузера, клик по любой точке открывшегося слоя все возвращает в исходное состояние.
html
<div class="clicimg">
  <img tabindex="1" src="XXX.xxx">
  <dl>
    <dt></dt>
    <dd><img src="XXX.xxx"></dd>
  </dl>
</div>
css
.clicimg {margin:10px 25px 0 20px;}
.clicimg img {
  border:none;cursor:pointer;
  display:block;outline:0;width:200px;height:auto;
}
.clicimg dl {display:none;}
.clicimg dl dd {
  background:#ccc;cursor:pointer;position:fixed;
  top:5%;bottom:5%;left:20%;right:20%;z-index:100;
  vertical-align:middle;width:600px;text-align:center;
}
.clicimg dl img {
  border:#ccc 1px solid;margin:4px auto;width:470px;height:auto;
}
.clicimg dt {
  background:#000;opacity:0.4;filter:alpha(opacity=40);
  position:fixed;top:0;left:0;z-index:1;width:100%;height:100%;
}
.clicimg :focus + dl,
.clicimg :active + dl {display:block;}
.clicimg dl:hover {display:block\0/;}
Пояснений ни к html-коду, ни к стилям не предусмотрено, все достаточно очевидно и прозрачно. Настройки параметров, как в исходном состоянии, так и во всплывающем слое достаточно просты и обладают соответствующей гибкостью для любой разметки web-страницы.
Есть проблема центрирования картинки по вертикали во всплывающем слое, но предложенное решение лишь только демонстрация возможностей "Каскадных таблиц стилей", позволяющих не использовать JavaScript без необходимости и может пригодиться всем тем, кто далек от программирования или владеет им на уровне метода "научного тыка" :)
Все работоспособно в современных браузерах.
В IE8 после клика на любую точку всплывающего слоя, необходимо вынести курсор мыши за пределы рабочей области окна браузера.
IE6(7) отдыхают :)
К плюсам можно отнести отвязку от движка CMS.
Может быть актуальным для Gold Shop Lasto при оформлении лотов магазина насыщенных графикой. Простое копирование html-конструкции в тело лота и размещение стилей в основном файле стилей во многом упростит работу web-мастера по предоставлению более детальной информации о товаре.

Комментарии к этой заметке больше не принимаются.

0 коммент.:

Отправить комментарий