<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://kenzo.blackapplehost.com/css/shadowbox.css" />
<script type="text/javascript" src="js/yui-utilities.js"></script>
<script type="text/javascript" src="js/shadowbox-yui.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
// Shadowbox.loadSkin('classic', 'src/skin');
// Shadowbox.loadLanguage('en', 'build/lang');
// Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'build/player');
window.onload = Shadowbox.init;
</script>
</head>
<BODY>
<p style="font-family: times; font-size: 150%;font-style:bold;color:red;">All About Pictures 12.10.2008<p>
<A href="http://kenzo.blackapplehost.com/img/img1.jpg" onMouseOver="Tip" onMouseOut="UnTip()" rel="shadowbox[designs]"> <IMG src="http://kenzo.blackapplehost.com/img/img1_tmb_v.jpg" class="imglarge"></A>
<A href="http://kenzo.blackapplehost.com/img/img4.jpg" onMouseOver="Tip" onMouseOut="UnTip()" rel="shadowbox[designs]"><IMG src="http://kenzo.blackapplehost.com/img/img4_tmb_v.jpg" class="imglarge"></A>
<p style="font-family: times; font-size: 150%;font-style:bold;color:red;">All About Pictures 11.10.08<p>
<A href="http://kenzo.blackapplehost.com/img/img2.jpg" onMouseOver="Tip" onMouseOut="UnTip()" rel="shadowbox[designs1]"><IMG src="http://kenzo.blackapplehost.com/img/img2_tmb_h.jpg" class="imglarge" width="150" height="100"></A>
<A href="http://kenzo.blackapplehost.com/img/img3.jpg" onMouseOver="Tip" onMouseOut="UnTip()" rel="shadowbox[designs1]"><IMG src="http://kenzo.blackapplehost.com/img/img3_tmb_h.jpg" class="imglarge" width="150" height="100"></A>
</body>
</html>
ето и css файла, който взех в комплект със скрипта за галерията.
/**
* The CSS for Shadowbox.
*
* This file is part of Shadowbox.
*
* Shadowbox is free software: you can redistribute it and/or modify it under
* the terms of the GNU Lesser General Public License as published by the Free
* Software Foundation, either version 3 of the License, or (at your option)
* any later version.
*
* Shadowbox is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
* more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Shadowbox. If not, see <http://www.gnu.org/licenses/>.
*
* @author Michael J. I. Jackson <mjijackson@gmail.com>
* @copyright 2007 Michael J. I. Jackson
* @license http://www.gnu.org/licenses/lgpl-3.0.txt GNU LGPL 3.0
* @version SVN: $Id: shadowbox.js 150 2007-12-04 18:42:03Z michael $
*/
/*_________________________________________________________________ Overlay */
#shadowbox_overlay {
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 998;
}
/*_______________________________________________________________ Container */
#shadowbox_container {
position: fixed;
height: 0px;
width: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 999;
text-align: center; /* centers in quirks and IE */
}
/*_______________________________________________________________ Shadowbox */
#shadowbox {
display: none;
visibility: hidden;
margin: 0 auto;
position: relative;
font-family: 'Lucida Grande', Tahoma, sans-serif;
text-align: left; /* reset left alignment */
}
/*___________________________________________________________________ Title */
/*
HTML snapshot:
<div id="shadowbox_title">
<div id="shadowbox_title_inner">Title Here</div>
</div>
*/
#shadowbox_title {
height: 25px;
padding: 0;
overflow: hidden;
}
#shadowbox_title_inner {
height: 16px;
font-size: 16px;
line-height: 16px;
white-space: nowrap;
padding: 5px 0 4px 8px;
color: #fff;
}
/*____________________________________________________________________ Body */
/*
HTML snapsnot:
<div id="shadowbox_body">
<div id="shadowbox_body_inner">
<img src="my_image.jpg" id="shadowbox_content" height="350" width="580">
</div>
<div id="shadowbox_loading">
<img src="images/loading.gif" alt="loading"></div>
<span><a href="javascript:Shadowbox.close();">Cancel</a></span>
</div>
</div>
*/
#shadowbox_body {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid #fff;
background-color: #000;
}
#shadowbox_body_inner {
position: relative;
overflow: hidden;
}
#shadowbox_loading {
position: absolute;
top: 0;
left: 0;
height: 10000px; /* overflow:hidden will clip this */
width: 100%;
background-color: #222;
}
#shadowbox_loading img {
float: left;
margin: 10px 10px 0 10px;
}
#shadowbox_loading span {
float: left;
margin-top: 16px;
font-size: 10px;
}
#shadowbox_loading span a,
#shadowbox_loading span a:link,
#shadowbox_loading span a:visited {
color: #fff;
}
#shadowbox_content.html { /* make html content scrollable */
height: 100%;
width: 100%;
overflow: auto;
}
/*_________________________________________________________________ Toolbar */
/*
HTML snapshot:
<div id="shadowbox_toolbar">
<div id="shadowbox_toolbar_inner">
<div id="shadowbox_nav_close">
<a href="javascript:Shadowbox.close();"><span class="shortcut">C</span>lose</a>
</div>
<div id="shadowbox_nav_next">
<a href="javascript:Shadowbox.next();"><span class="shortcut">N</span>ext</a>
</div>
<div id="shadowbox_nav_previous">
<a href="javascript:Shadowbox.previous();"><span class="shortcut">P</span>revious</a>
</div>
<div id="shadowbox_counter">
<a href="javascript:Shadowbox.change(0);">1</a>
<a href="javascript:Shadowbox.change(1);" class="shadowbox_counter_current">2</a>
<a href="javascript:Shadowbox.change(2);">3</a>
</div>
</div>
</div>
*/
#shadowbox_toolbar {
margin: 0;
padding: 0;
height: 20px;
overflow: hidden;
}
#shadowbox_toolbar_inner {
height: 20px;
color: #fff;
}
#shadowbox_toolbar_inner div {
padding-top: 4px;
padding-bottom: 2px;
font-size: 10px;
height: 10px;
line-height: 10px;
}
#shadowbox_toolbar_inner div span.shortcut {
text-decoration: underline;
font-weight: bold;
}
#shadowbox_toolbar_inner div a {
text-decoration: none;
color: #fff;
}
#shadowbox_nav_close,
#shadowbox_nav_previous,
#shadowbox_nav_next {
float: right;
padding-right: 10px;
}
#shadowbox_counter {
float: left;
padding-left: 10px;
}
#shadowbox_counter a {
padding: 0 4px 0 0;
}
#shadowbox_counter a.shadowbox_counter_current {
text-decoration: underline;
font-weight: bold;
}
/*________________________________________________________________ Messages */
div.shadowbox_message {
text-align: center;
padding: 10px;
}
div.shadowbox_message a:link,
div.shadowbox_message a:visited {
text-decoration: none;
color: #bed333;
}
div.shadowbox_message a:hover,
div.shadowbox_message a:focus {
text-decoration: underline;
}
