lytebox

Single Image:
pic 1

Grouped Images:
pic 1
pic 2
pic 3

Lyteframe:
• 03skazki.ru
1. 03pressa.ru
2. 09stroy.ru
3. 03www.su

ДРУГИЕ ПРИМЕРЫ

Библиотека LIGHTBOX (JQUERY) Свой контент в модальном окне

Библиотека LIGHTBOX (JQUERY) Открытие большого фото в модальном окне

Библиотека LIGHTBOX (JQUERY) Видео ()SWF) в модальном окне

Библиотека LIGHTBOX (JQUERY) Блок с кодом внутри файла открывается от клика с анимацией

Библиотека LIGHTBOX (JQUERY) Файл открывается от клика с анимацией

Библиотека LIGHTBOX (JQUERY) Файл открывается с анимацией в большом окне переход между файлами вверху большого окна

Библиотека LIGHTBOX (JQUERY) Минимизированный скрипт Файл открывается с анимацией в большом окне переход между файлами вверху большого окна

Библиотека LIGHTBOX (JQUERY) Оптимизированный (http://www.bananascript.com/index.php?compress) скрипт Файл открывается с анимацией в большом окне переход между файлами вверху большого окна

Библиотека LIGHTBOX (JQUERY) Фотогалерея (PDF) с переходом между файлами через меню

Библиотека LIGHTBOX (JQUERY) Видеогалерея (MOV) с переходом между видео через меню

Библиотека LIGHTBOX (JQUERY) Файл видео (MOV) открывается с анимацией в большом окне

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Открытие большого фото (lytebox)</title>
<script type="text/javascript" src="lytebox_.js"></script>
<link rel="stylesheet" href="lytebox1.css" type="text/css" media="screen" />
<style type="text/css">
body { font-family: "Trebuchet MS", Trebuchet; margin: 0 auto; background-color: #999999; font-size: 14px; }
p { margin: 0.5em; }
a:link, a:visited {
color: #0000FF;
margin: 1px;
}
a:hover, a:active {
color: #0099FF;
}
</style>
</head>
<body>
<h1>lytebox</h1>
<p>
<b>Single Image:</b><br />
<a href="https://www.03www.ru/pic/001.jpg" class="lytebox" data-title="pic 1">pic 1</a><br /><br />
<b>Grouped Images:</b><br />
<a href="https://www.03www.ru/pic/002.jpg" class="lytebox" data-lyte-options="group:orion3" data-title="pic 2">pic 1</a><br />
<a href="https://www.03www.ru/pic/003.jpg" class="lytebox" data-lyte-options="group:orion3" data-title="pic 2">pic 2</a><br />
<a href="https://www.03www.ru/pic/004.jpg" class="lytebox" data-lyte-options="group:orion3" data-title="pic 3">pic 3</a>
</p>
<p>
<br /><b>Lyteframe:</b><br />            
 • <a href="http://www.03skazki.ru/" class="lyteframe" data-lyte-options="height:100% scrolling:no" data-title="03skazkiru">03skazki.ru</a><br />
1. <a href="http://www.03pressa.ru/" class="lyteframe" data-title="03pressaru" data-lyte-options="group:galaxy1 width:85% height:95%">03pressa.ru</a><br />
2. <a href="http://www.09stroy.ru" class="lyteframe" data-title="09stroyru" data-lyte-options="group:galaxy1 width:85% height:95%">09stroy.ru</a><br />
3.  <a href="http://www.03www.su" class="lyteframe" data-title="03wwwsu" data-lyte-options="group:galaxy1 width:85% height:95%">03www.su</a>
</p>
 <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>

lytebox1.css (13 kB)

lytebox_.js (109 kB)

images.zip (187 kB)