Фото с открытием большого фото на затемненном фоне На большом фото закругленное обрамление (Floatbox)

>

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

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

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

АРХИВ JAVASCRIPT + CSS АРХИВ JAVASCRIPT + CSS АРХИВ JAVASCRIPT + CSS

:: • блок • линк • меню • окно • текст • фото ::

фото 1

фото 2

фото 3

фото 4

фото 5

фото 6

фото 7

фото 8

<link href="https://www.03www.ru/floatbox/floatbox.css" rel="stylesheet" type="text/css" /> <script src="https://www.03www.ru/floatbox/floatbox.js" type="text/javascript"></script> <style type="text/css"> .xsnazzy {background: transparent; margin:1em;width:220px;float:left} .xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; overflow:hidden; font-size:0;} .xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;} .xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #FF0000; border-right:1px solid #FF0000;} .xb1 {margin:0 8px; background:#FF0000;} .xb2 {margin:0 6px; background:#FF0000;} .xb3 {margin:0 4px; background:#FF0000;} .xb4 {margin:0 3px; background:#7f7f9c; border-width:0 5px;} .xb5 {margin:0 2px; background:#7f7f9c; border-width:0 4px;} .xb6 {margin:0 2px; background:#7f7f9c; border-width:0 3px;} .xb7 {margin:0 1px; background:#7f7f9c; border-width:0 3px; height:2px;} .xboxcontent{display:block; background:#7f7f9c; border:3px solid #FF0000; border-width:0 3px;padding-left:6px} </style> </head> <body> <div style="float:left"> <div class="xsnazzy"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><div class="xboxcontent"> <a href="../pic/002.jpg" class="floatbox" data-fb-options="colorTheme:red padding:20 panelPadding:4 overlayOpacity:0 caption:'фото 1' showClose:true showOuterClose:true"><img src="../pic/002.jpg" border="0" width="200" alt="фото 1" ></a> </div><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></div> <div class="xsnazzy"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><div class="xboxcontent"> <a href="../pic/003.jpg" class="floatbox" data-fb-options="colorTheme:red padding:20 panelPadding:4 overlayOpacity:0 caption:'фото 2' showClose:true showOuterClose:true"><img src="../pic/003.jpg" border="0" width="200" alt="фото 2" ></a> </div><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></div> <div class="xsnazzy"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><div class="xboxcontent"> <a href="../pic/004.jpg" class="floatbox" data-fb-options="colorTheme:red padding:20 panelPadding:4 overlayOpacity:0 caption:'фото 3' showClose:true showOuterClose:true"><img src="../pic/004.jpg" border="0" width="200" alt="фото 3" ></a> </div><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></div> <div class="xsnazzy"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><div class="xboxcontent"> <a href="../pic/005.jpg" class="floatbox" data-fb-options="colorTheme:red padding:20 panelPadding:4 overlayOpacity:0 caption:'фото 4' showClose:true showOuterClose:true"><img src="../pic/005.jpg" border="0" width="200" alt="фото 4" ></a> </div><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></div> </div> <div style="float:left"> <div class="xsnazzy"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><div class="xboxcontent"> <a href="../pic/022.jpg" class="floatbox" data-fb-options="colorTheme:red padding:20 panelPadding:4 overlayOpacity:0 caption:'фото 5' showClose:true showOuterClose:true"><img src="../pic/022.jpg" border="0" width="200" alt="фото 5" ></a> </div><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></div> <div class="xsnazzy"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><div class="xboxcontent"> <a href="../pic/012.jpg" class="floatbox" data-fb-options="colorTheme:red padding:20 panelPadding:4 overlayOpacity:0 caption:'фото 6' showClose:true showOuterClose:true"><img src="../pic/012.jpg" border="0" width="200" alt="фото 6" ></a> </div><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></div> <div class="xsnazzy"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><div class="xboxcontent"> <a href="../pic/013.jpg" class="floatbox" data-fb-options="colorTheme:red padding:20 panelPadding:4 overlayOpacity:0 caption:'фото 7' showClose:true showOuterClose:true"><img src="../pic/013.jpg" border="0" width="200" alt="фото 7" ></a> </div><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></div> <div class="xsnazzy"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><div class="xboxcontent"> <a href="../pic/014.jpg" class="floatbox" data-fb-options="colorTheme:red padding:20 panelPadding:4 overlayOpacity:0 caption:'фото 8' showClose:true showOuterClose:true"><img src="../pic/014.jpg" border="0" width="200" alt="фото 8" ></a> </div><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></div> </div>

(распаковать архив и вставить папки в директорию, где будут файлы, использующие floatbox.js )

АРХИВ JAVASCRIPT + CSS АРХИВ JAVASCRIPT + CSS АРХИВ JAVASCRIPT + CSS

:: • до 2005 • 2007 • 2008 • 2009 • 2010 • 2011 ::

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