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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Библиотека LIGHTBOX (JQUERY) Свой контент в модальном окне</title>
<title>Фотогалерея  jquery lightBox</title>
<style type="text/css">
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, font, img, strong, b, u, i, sup, sub, center, dl, dt, dd, ol, ul, li, form, label, table, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
body {
line-height: 1;
background: #fff;
color: #000;
text-align: left;
font: 0.875em Arial, Helvetica, sans-serif;
}
html,body {
height: 100%;
}
.main {
min-height: 100%;
}
* html .main {
height: 100%;
}
.rasporka {
clear: both;
height: 60px;
}
.validateLinks {
border-top: 1px solid #55b05a;
padding: 20px 0 0 20px;
height: 39px;
background: #fff;
margin-top: -60px;
}
* html .validateLinks {
height: 60px;
}
.validateLinks a {
color: #365d95;
}
.topPanel{
	height: 90px;
	text-align:center;
	border-bottom: 1px solid #55b05a;
	margin-bottom: 40px;
	padding: 3px 0;
}
</style>

jQuery("li a").lightBox();

});
</script>

-->
</style>
</head>
<body>

<ul >
<li><a href="https://www.03www.ru/pic/001.jpg" title="фото 1"><img src="https://www.03www.ru/pic/001.jpg" height="113px" width="150px" alt=""/></a></li>
<li><a href="https://www.03www.ru/pic/002.jpg" title="фото 2"><img src="https://www.03www.ru/pic/002.jpg" height="113px" width="150px" alt=""/></a></li>
<li><a href="https://www.03www.ru/pic/003.jpg" title="фото 3"><img src="https://www.03www.ru/pic/003.jpg" height="113px" width="150px" alt=""/></a></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>

ТРЕБУЕТСЯ

jquery.lightbox-0.5.css (2 kB)

jquery-1.3.2.min.js (57 kB)

jquery.lightbox-0.5.pack.js (6 kB)

АРХИВ

jquery-lightbox-0.5.zip

Доступны следующие настройки:
* overlayBgColor - используется для определения цвета фона. #000 (черный) по-умолчанию.
* overlayOpacity - используется для определения степени прозрачности. 0.8 по-умолчанию.
* imageLoading - gif-анимация при загрузке картинки. images/lightbox-ico-loading.gif по-умолчанию.
* imageBtnClose - кнопка "закрыть". images/lightbox-btn-close.gif по-умолчанию.
* imageBtnPrev - кнопка "предыдущая". images/lightbox-btn-prev.gif по-умолчанию.
* imageBtnNext - кнопка "следующая". images/lightbox-btn-next.gif по-умолчанию.
* containerBorderSize - задает padding для контейнера содержащего картинку. 10 по-умолчанию.
* containerResizeSpeed - эфеект изменения размера контейнера с картинкой. 400 по-умолчанию.
* txtImage - Tекст "Image" - используется для определения заголовка картинки.
* txtOf - Текст "of" используется в заголовке картинки.
* keyToClose - "горячая" клавиша для закрытия lightBox. Буква c (close) по-умолчанию.
* keyToPrev - "горячая" клавиша для перехода к предыдущей картинке. Буква p (previous) по-умолчанию.
* keyToNext - "горячая" клавиша для перехода к следующей картинке. Буква n (next) по-умолчанию.

Например:
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox({
overlayBgColor: '#FFF',
overlayOpacity: 0.6,
imageLoading: 'http://example.com/images/loading.gif',
imageBtnClose: 'http://example.com/images/close.gif',
imageBtnPrev: 'http://example.com/images/prev.gif',
imageBtnNext: 'http://example.com/images/next.gif',
containerResizeSpeed: 350,
txtImage: 'Imagem',
txtOf: 'de'
});
});
</script>

АРХИВ

ПРИМЕРЫ