Lightbox: Różnice pomiędzy wersjami

Wersja z 12:21, 19 mar 2006

Lightbox to sprytny skrypt, który bardzo pomaga w publikacji dużych grafik lub dużej ilości grafik. Jego głównym zadaniem jest powiększanie małych obrazków do rzeczywistych rozmiarów. Oprócz efektywnego wyglądu skrypt pomaga w przekzywaniu jednocześnie treści i obrazków. Jest to spowodowane tym, że wielkie grafiki nie będą przeszkadzały w tekście, zwalniały łącza, a po powiększeniu nikt nie ucieknie z naszej strony, ponieważ grafika ukazuje się nad nią.

Aby skrypt zaczął działać musimy w sekcji head dokleić następujący kawałek kodu:

<script type="text/javascript" src="lightbox.js"></script>

Żeby obrazek się powiększał, musimy do linka, który prowadzi do normalnych rozmiarów, dopisać rel="lightbox" , co będzie wyglądało mniej więcej tak:

<a href="duzy.jpg" rel="lightbox" title="my caption"><br>
  <img src="maly.jpg alt=" " /><br>
</a>

Natomiast do CSS możemy dopisać następujący text:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}

#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}

#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

Oczywiście wszystko możemy dowolnie edytować. Natomiast jeśli chcesz dodatkowo mieć przyciemnianie się stronki do CSSa możesz dopisać np taki kod:

#overlay{ background-image: url(overlay.png); } 

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

Tutaj potrzebne pliki: Główny skrypt

Plik CSS

Obrazek "wygaszania"

Obrazek "wczytywanie się"

Obrazek [X]

Jest to Polski opis tego skryptu. Oryginał znajduje się tutaj.