|
W sieci jest sporo skryptów typu lightbox (slimbox) opartych na różnych frameworkach Javy. Wszystkie tworzą atrakcyjną dla użytkownika galerię. Po kliknięciu w miniaturę prezentują grafikę na nowej warstwie, maskując "body" strony. Przedstawiany skrypt umożliwia również prezentację opisów i poruszanie się pomiędzy obrazkami w oknie na otwartej warstwie (w tym przypadku należy pogrupować obrazki w grupę i dodać dyrektywę rel="lightbox[grupa_obrazków]"). Przykład zastosowania: link pobierz przykład Sekcja <head> <link href="/arkusz.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="/mootools.js"></script>
<script type="text/javascript" src="/lightbox.js"></script> Sekcja <body> <div id="container">
<a href="/images/obrazek1.jpg" rel="lightbox[grupa]" id="obrazek1" title="obrazek 1">
<img src="/images/obrazek1m.jpg" border="0" alt="" />
</a>
<div class="opisy obrazek1">Opis 1</div>
<a href="/images/obrazek2.jpg" rel="lightbox[grupa]" id="obrazek2" title="obrazek 2">
<img src="/images/obrazek2m.jpg" border="0" alt="" />
</a>
<div class="opisy obrazek2">Opis 2</div>
<a href="/images/obrazek3.jpg" rel="lightbox[grupa]" id="obrazek3" title="obrazek 3">
<img src="/images/obrazek3m.jpg" border="0" alt="" />
</a>
<div class="opisy obrazek3">Opis 3</div>
<script type="text/javascript">
window.addEvent('domready',function(){
Lightbox.init({descriptions: '.opisy', showControls: true});
});
</script>
</div> Style w arkuszu CSS: (style skryptu -lb*) .opisy {
display: none;
}
#container {
width: 608px;
margin: 0 auto;
padding: 100px 0 100px;
}#lbOverlay {
position: absolute;
left: 0;
width: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
left: 50%;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url('/images/loading.gif') no-repeat center;
}
#lbImage {
border: 10px solid #fff;
}
#lbPrevLink, #lbNextLink {
display: block;
width: 63px;
height: 32px;
outline: none;
}
#lbPrevLink {
float: left;
background: transparent url('/images/prevlabel.gif') no-repeat left;
}
#lbPrevLink:hover {
background: transparent url('/images/prevlabel.gif') no-repeat left;
}
#lbNextLink {
float: right;
background: transparent url('/images/nextlabel.gif') no-repeat right;
}
#lbNextLink:hover {
background: transparent url('/images/nextlabel.gif') no-repeat right;
}
#lbControls {
display: block;
height: 32px;
}
#lbBottom {
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
clear: both;
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url('/images/closelabel.gif') no-repeat center;
margin: 0px;
}
#lbCaption, #lbNumber, #lbDescription {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
|
;
Logowanie 
United States 
Unknown Browser
