Lightbox: Różnice pomiędzy wersjami

Z JoggerWiki
Skocz do: nawigacji, wyszukiwania
 
m (dodanie linku do informacji o v2)
 
(Nie pokazano 9 wersji utworzonych przez 5 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:
  
{| ''<script type="text/javascript" src="/files/lightbox.js"></script>''
+
<pre>&lt;script type="text/javascript" src="/files/lightbox.js"&gt;&lt;/script&gt;</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:
  
 +
<pre>&lt;a href="duzy.jpg" rel="lightbox" title="my caption"&gt;<br>
 +
&nbsp;&lt;img src="maly.jpg" alt=" " /&gt;<br>
 +
&lt;/a&gt;</pre>
  
 +
Natomiast do CSS możemy dopisać następujący text:
 +
<pre>#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; }</pre>
  
 +
Oczywiście wszystko możemy dowolnie edytować. Natomiast jeśli chcesz dodatkowo mieć przyciemnianie się stronki do CSSa możesz dopisać np taki kod:
 +
<pre>
 +
#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");
 +
}
 +
 +
</pre>
 +
 +
Tutaj potrzebne pliki:
 +
* [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]]
  
 
Jest to Polski opis tego skryptu. Oryginał znajduje się [http://www.huddletogether.com/projects/lightbox/ tutaj].
 
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.