Lightbox: Różnice pomiędzy wersjami
m (dodanie linku do informacji o v2) |
|||
| (Nie pokazano 5 wersji utworzonych przez 4 użytkowników) | |||
| Linia 1: | Linia 1: | ||
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ą. | 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ą. | ||
| + | |||
| + | '''Ważne: informacje o Lightbox2 (nowsza wersja) dostępne pod [http://ziaja.name/2008/02/22/lightbox2/ tym linkiem]!''' | ||
| + | |||
| + | Lightbox v1: | ||
Aby skrypt zaczął działać musimy w sekcji head dokleić następujący kawałek kodu: | Aby skrypt zaczął działać musimy w sekcji head dokleić następujący kawałek kodu: | ||
| − | <pre><script type="text/javascript" src="lightbox.js"></script></pre> | + | <pre><script type="text/javascript" src="/files/lightbox.js"></script></pre> |
Żeby obrazek się powiększał, musimy do linka, który prowadzi do normalnych rozmiarów, dopisać <code>rel="lightbox"</code> , co będzie wyglądało mniej więcej tak: | Żeby obrazek się powiększał, musimy do linka, który prowadzi do normalnych rozmiarów, dopisać <code>rel="lightbox"</code> , co będzie wyglądało mniej więcej tak: | ||
<pre><a href="duzy.jpg" rel="lightbox" title="my caption"><br> | <pre><a href="duzy.jpg" rel="lightbox" title="my caption"><br> | ||
| − | <img src="maly.jpg alt=" " /><br> | + | <img src="maly.jpg" alt=" " /><br> |
</a></pre> | </a></pre> | ||
| Linia 44: | Linia 48: | ||
Tutaj potrzebne pliki: | Tutaj potrzebne pliki: | ||
| − | [http://www.huddletogether.com/projects/lightbox/lightbox.js Główny skrypt] | + | * [http://www.huddletogether.com/projects/lightbox/lightbox.js Główny skrypt] |
| + | * [http://www.huddletogether.com/projects/lightbox/lightbox.css Plik CSS] | ||
| + | * [http://www.huddletogether.com/projects/lightbox/overlay.png Obrazek "wygaszania"] | ||
| + | * [http://www.huddletogether.com/projects/lightbox/loading.gif Obrazek "wczytywanie się"] | ||
| + | * [http://www.huddletogether.com/projects/lightbox/close.gif Obrazek [X]] | ||
| − | [http://www.huddletogether.com/projects/lightbox/ | + | Jest to Polski opis tego skryptu. Oryginał znajduje się [http://www.huddletogether.com/projects/lightbox/ tutaj]. |
| − | + | '''Ważne: Aby skrypt poprawnie działał trzeba wpierw edytować pliki css, js i dostosować je do działania we własnym Joggerze.''' | |
| − | [ | + | [[Kategoria:Pomoc]] |
| − | + | ||
| − | [ | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
Aktualna wersja na dzień 18:04, 22 lut 2008
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ą.
Ważne: informacje o Lightbox2 (nowsza wersja) dostępne pod tym linkiem!
Lightbox v1:
Aby skrypt zaczął działać musimy w sekcji head dokleić następujący kawałek kodu:
<script type="text/javascript" src="/files/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:
Jest to Polski opis tego skryptu. Oryginał znajduje się tutaj.
Ważne: Aby skrypt poprawnie działał trzeba wpierw edytować pliki css, js i dostosować je do działania we własnym Joggerze.
