HTML5 Тег figure Фотогалерея (inline-block + его эмуляция + библиотека highslide)

1997

Библиотека JAVASCRIPT SE@RCHER

Javascript + CSS ::• блок • текст • линк • меню • фото • окно • кнопка • фон • видео • таблица

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ФЕВРАЛЬ >>>

HTML ↴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>HTML5 Тег figure Фотогалерея  (inline-block + его эмуляция + библиотека highslide) </title>
<style media="all" type="text/css">
/* Рамки у изображений нам не нужны */
.image-gallery a img {border: none;}
.image-gallery {/* Центруем блоки внутри галереи */text-align: left;}
.image-gallery li {margin: 5px;/* Выравниваем по вертикали */vertical-align: middle;/* Понадобится, если не нужна центровка блоков *//*text-align: center;*//* inline-block для ff */display:-moz-inline-stack;/* для современных браузеров */display:inline-block;/* IE6 */_overflow:hidden;/* hasLayout */zoom:1;/* hasLayout + IE + inline = inline-block */*display:inline;}
.image-gallery li img {/* Занимаем 100% по ширине */display: block;}
figure{width:200px;height:320px;border:4px solid red;border-radius: 8px;margin:12px;}
figcaption{text-align:center;width:200px;color:red}
.highslide-html {background-color: white;}
.highslide-maincontent {display: none;}
.highslide-loading{display: block;color: black;font-weight: bold;text-decoration: none;padding: 2px;border:1px solid black; background-color:white; padding-left:22px;background-image:url(http://www.semenagrad.ru/highslide/graphics/loader.white.gif);background-repeat: no-repeat;background-position: 3px 1px;}
a.highslide-credits,a.highslide-credits i {padding: 2px;color:#CC6600;text-decoration: none;font-size: 11px;}
a.highslide-credits:hover,a.highslide-credits:hover i {color:white;background-color: #CC6600;}
.highslide-wrapper, .rounded-white {background-color: white;}
.highslide-wrapper .highslide-html-content {width: 800px;padding: 0 5px 5px 5px;}
.highslide-wrapper .highslide-header {padding-bottom: 5px;}
.highslide-wrapper .highslide-header ul {margin: 0;padding: 0;text-align: right;}
.highslide-wrapper .highslide-header ul li {display: inline;padding-left: 1em;}
.highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next {display: none;}
.highslide-wrapper .highslide-header a {font-weight: bold;color: #CC6600;text-transform: uppercase;text-decoration: none;}
.highslide-wrapper .highslide-header a:hover {color: black;}
.highslide-wrapper .highslide-header .highslide-move a {cursor: move;}
.highslide-wrapper .highslide-footer {height: 11px;}
.highslide-wrapper .highslide-footer .highslide-resiz {float:right;height: 11px;width:11px;}
.highslide-move {cursor: move;}
.highslide-resize {cursor: nw-resize;}
.highslide-caption {color:green;display: none;border-bottom: 1px solid white;font-family: Verdana, Helvetica; font-size: 11px;  font-weight: bold;   padding: 5px;    background-color: #FFFFC4;}
</style>
<script type="text/javascript" src="https://www.03www.ru/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript"> 
hs.graphicsDir = 'https://www.03www.ru/highslide/graphics/'; 
hs.showCredits = false;
</script> 
</head>
<body>
<ul class="image-gallery">
<li>
<figure>
  <figcaption>Описание фото</figcaption>
<A class=highslide id=t1 onclick="return hs.expand(this)" href="../2013-03/001.jpg">
 <img src="../2013-03/001.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
</figure>
<DIV class=highslide-caption id=caption-for-t1>Фото 1</div>
</li>
<li>
<figure>
  <figcaption>Описание фото</figcaption>
<A class=highslide id=t2   onclick="return hs.expand(this)" href="../2013-03/002.jpg">
 <img src="../2013-03/002.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
</figure>
<DIV class=highslide-caption id=caption-for-t2>Фото 2</div>
</li>
<li>
<figure>
  <figcaption>Описание фото</figcaption>
<A class=highslide  id=t3  onclick="return hs.expand(this)" href="../2013-03/003.jpg">
 <img src="../2013-03/003.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
</figure>
<DIV class=highslide-caption id=caption-for-t3>Фото 3</div>
</li>
<li>
<figure>
  <figcaption>Описание фото</figcaption>
<A class=highslide  id=t4  onclick="return hs.expand(this)" href="../2013-03/004.jpg">
 <img src="../2013-03/004.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
</figure>
<DIV class=highslide-caption id=caption-for-t4>Фото 4</div>
</li>
</ul>
<ul class="image-gallery">
<li>
<figure>
<A class=highslide  id=t5  onclick="return hs.expand(this)" href="../2013-03/001.jpg">
   <img src="../2013-03/001.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
<figcaption>Описание фото</figcaption>
</figure>
<DIV class=highslide-caption id=caption-for-t5>Фото 5</div>
</li>
<li>
<figure>
<A class=highslide  id=t6  onclick="return hs.expand(this)" href="../2013-03/002.jpg">
 <img src="../2013-03/002.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
<figcaption>Описание фото</figcaption>
</figure>
<DIV class=highslide-caption id=caption-for-t6>Фото 6</div>
</li>
<li>
<figure>
<A class=highslide  id=t7  onclick="return hs.expand(this)" href="../2013-03/003.jpg">
 <img src="../2013-03/003.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
<figcaption>Описание фото</figcaption>
</figure>
<DIV class=highslide-caption id=caption-for-t7>Фото 7</div>
</li>
<li>
<figure>
<A class=highslide  id=t8  onclick="return hs.expand(this)" href="../2013-03/004.jpg">
 <img src="../2013-03/004.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
<figcaption>Описание фото</figcaption>
</figure>
<DIV class=highslide-caption id=caption-for-t8>Фото 8</div>
</li>
</ul>
<ul class="image-gallery">
<li>
<figure>
  <figcaption>Описание фото</figcaption>
<A class=highslide  id=t9  onclick="return hs.expand(this)" href="../2013-03/001.jpg">
 <img src="../2013-03/001.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
</figure>
<DIV class=highslide-caption id=caption-for-t9>Фото 9</div>
</li>
<li>
<figure>
  <figcaption>Описание фото</figcaption>
<A class=highslide  id=t10  onclick="return hs.expand(this)" href="../2013-03/002.jpg">
 <img src="../2013-03/002.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
</figure>
<DIV class=highslide-caption id=caption-for-t10>Фото 10</div>
</li>
<li>
<figure>
  <figcaption>Описание фото</figcaption>
<A class=highslide  id=t11  onclick="return hs.expand(this)" href="../2013-03/003.jpg">
 <img src="../2013-03/003.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
</figure>
<DIV class=highslide-caption id=caption-for-t11>Фото 11</div>
</li>
<li>
<figure>
  <figcaption>Описание фото</figcaption>
<A class=highslide  id=t12  onclick="return hs.expand(this)" href="../2013-03/004.jpg">
 <img src="../2013-03/004.jpg" width="200" height="300" alt="ALT к фото" title="TITLE к фото"/></a>
</figure>
<DIV class=highslide-caption id=caption-for-t12>Фото 12</div>
</li>
</ul>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне