Lightbox - wygodniejsze wyświetlanie zdjęć na stronach www
Znalazłem świetny skrypt do wyświętlania zdjęć/grafik na stronach www. Jak działa można się przekonać klikająć na obrazek obok. Prawda, że świetne? ;) Wyświetla zdjęcie "nad stroną", która zosteje przyciemniona. Kliknięcie na zdjęcie powiekszone zdjecie powoduje powrót do przeglądania strony.
A co trzeba zrobić aby działało? Należy mieć zdjęcie (i jego miniaturkę - ale działa też dla normalnych linków).
Najpierw wrzucamy na swój serwer plik lightbox.js (można także wrzucić 2 obrazki: overlay.png oraz loading.gif). A do kodu html dopisujemy w części HEAD:
<script type="text/javascript" src="lightbox.js"></script>
Do pliku stylów css dorzucamy troszkę kodu z lightbox.css. Aby zdjęcia się wyświetlały tak jak powinny do odnośnika do zdjęcia należy dopisać rel="lightbox". Czyli:
<a href="adres obrazka" rel="lightbox" title="jakiś tytuł">
Tekst albo obrazek miniaturki
</a>
Tytuł zostanie wyświetlony pod powiększonym zdjęciem. Działa w Operze 9 i Firefoksie 1.5 (tylko takie przeglądarki obecnie posiadam). W IE też nie powinno być problemów. No i to wszystko. Jeżeli pliki (skrypt i te 2 obrazki) będą wrzucone do podkatalogu to w pliku lightbox.js należy dostosować ścieżkę var loadingImage = 'loading.gif';. Tak trzeba np. na joggerze.
Lightbox - więcej informacji
Komentarze:
Warum? # | dnia 14 stycznia 2006, o godzinie 12:59:32
W Operze 8.50 kliknąłem na zdjęcie środkowym przyciskiem mysz (ten co otwiera w nowej karcie) i obrazek uległ zmniejszeniu. Aczkolwiek nie potrafię tego powtórzyć...
MiB # |
dnia 14 stycznia 2006, o godzinie 13:02:19
@Warum: Opera 8.5 - śpm -> nowe okno + powiększona grafika.
Żadnego innego efektu nie udało mi się uzyskać ;)
Zdravim
MiB
Hoppke # |
dnia 14 stycznia 2006, o godzinie 17:43:16
O, jakie fajne! Spróbuję to u siebie zaimplementować :)
kowwoj # | dnia 14 stycznia 2006, o godzinie 22:02:07
IE /sp2/ - nie działa (przechodzi do adresu obrazka).
Ooooj, jaka szkoda ;-) Oby więcej takich skryptów [z odpowiednim dopiskiem a'la "chcesz nowoczesnych stron - wybierz nowoczesną przeglądarką" ] ;-]
blah # | dnia 15 stycznia 2006, o godzinie 00:02:43
a może ktoś by zrobił z tego userjs do opery :P
Hoppke # |
dnia 15 stycznia 2006, o godzinie 00:35:51
O, coś zauważyłem - w firefoksie 1.5 (Mandriva) cały bajer działa mi tylko na głównej stronie, przestaje działać po wejściu w widok komentarzy... wtedy po prostu otwiera się normalnie plik .jpg.
hmm, dziwne.
Azrael Nightwalker # |
dnia 15 stycznia 2006, o godzinie 14:07:10
Potwierdzam. Ubuntu, Deer Park build by Marcoos.
U Byte'a skrypt ten działa normalnie.
http://byte.livenet.pl/?p=387#comments
ultrazbig # | dnia 29 stycznia 2006, o godzinie 19:01:09
Fajny skryp ... czekam aż go dopracują.
Na razie mogliby pod IE dać przyciemnienie przy pomocy obrazka gif http://www.ultra.aplus.pl/test/Lightbox_JS/blank.gif efekt jest taki http://www.ultra.aplus.pl/test/Lightbox_JS/screen.png
Jeżeli ktoś zechciałby w tym jakże trudnym jezyku nie ojczystym im przekazać ... Nie wiem czemu tego nie użyli ... chyba że poprostu nie lubią IE ;-)
Pozdrawiam
Zbyszek
ultrazbig # | dnia 01 lutego 2006, o godzinie 20:59:41
Heh ... w kwestii wyjaśnienia ...
Wygląda na to że przyciemnienie pojawia się w IE/SP2
a wIE/bez SP wyskakuje samo okienko. No i właśnie dla tej drugiej opcji jest rozwiązanie z GIF-em półprzezroczystym.
Zeebe # | dnia 08 listopada 2006, o godzinie 18:28:06
A u mnie w Operze ZADNE zdjecia te ani nawet w Onecie nie wyswietlaja sie. Mam Wlaczczone pokazywanie grafiki.. Co moze byc powodem?
Monika # | dnia 01 lipca 2007, o godzinie 16:00:40
a mnie to, czyli lightbox w ogóle nie działa, a wszytko zrobiłam wg przepisu, podejrzewam, że to przez to, że do robienia stron używam front page, zamiast bardziej zaawansowanego programu… dałam sobie spokój z bawieniem się lightbox-em, bo moja praca [1,5 h na marne] nie przynosiła efektów, zdjęcie się otwiera, co prawda w tym samym oknie, ale bez innych efektów….. na całej stronie jest tylko ono :(:( takie coś to potrafiłam zrobić, ale bez takiego wysiłku ;[
Lewy # | dnia 30 lipca 2007, o godzinie 22:02:53
Jestem szczęsliwym użytkownikiem skrypty (wersja 1) Serdecznie polecam
Kola # | dnia 26 lutego 2008, o godzinie 15:29:12
Chciałbym zauważyć, że ten efekt jest chroniony prawem autorskim i warto by było podać autora tego projektu lub chociaż link do jego strony. A tak nawiasem mówiąc to super efekt.
Pytanie # | dnia 04 marca 2008, o godzinie 21:53:36
prototype.js
effects.js
scriptaculous.js
lightbox.css
Czy w tych plikach trzeba zmieniać jakieś adresy itp jesli zainstalowałem na swoim serwerze ftp. Nie działa u mnie . W skryptach w częsci head zmieniłem adresy do plików z mojego serwera. Co źle zrobiłem ?
Pytanie # | dnia 05 marca 2008, o godzinie 13:34:50
Zrobiłem super działa :)
Kniaź # | dnia 12 marca 2008, o godzinie 21:21:05
No proszę, wrzuciłem w google’a „Lightbox” i jeden z pierwszych linków był do Ciebie :-) Pozdrawiam
Yma # | dnia 07 kwietnia 2008, o godzinie 21:00:11
mam pytanie.. bo swoja droga skrypt super i dziala i wszystko.. ale galerie obrazkow mam na stronie podzielonej FRAME’mami i lightbox otwiera mi obrazek tylko w jednym FRAME’mie, w ktorym znajduje sie ow odnosnik. Macie jakis pomysl na otwieranie na calej stronie?
JK # | dnia 18 kwietnia 2008, o godzinie 02:59:31
Wszystko fajnie super skrypt ale pod ie mi nie dziala… wysypuje sie przed zaladowaniem…
eee # | dnia 18 czerwca 2008, o godzinie 01:25:33
co to są style css?
eee # | dnia 18 czerwca 2008, o godzinie 01:33:36
wow, super. nadal nie wiem, co to te style ale działa!!!
nowy123 # | dnia 22 września 2008, o godzinie 16:02:50
mam problem z tym skryptem wszystko dziala jak otwieram pod strone bezposrednio w ie jesli jednak wkladam pod strone (target „rama3” )do glównej strony to obrazy otwieraja sie w „rama3” a nie na calej stronie głównej. Wie ktos jak to rozwiazac.
Z góry dzieki
get_montananeiro # | dnia 18 kwietnia 2009, o godzinie 12:25:52
widze ze wszyscy maja jakis problem z Lightboxem…. ja rowniez. zdjecie otwiera sie w nowym oknie(pracuje w MF) niestety zadnen autor bloga tlumaczacy instalacje Lightboxa nie odpowiada na pytania jak sprostowac te wszystkie problemy :/ szkoda
linki sponsorowane # | dnia 29 kwietnia 2009, o godzinie 13:56:43
super skrypt :) Przydalo by sie ew zamieszczenie paczki z calym lightboxem, np w zipie :)
marteqc # | dnia 30 kwietnia 2009, o godzinie 09:08:00
Bardzo użyteczny skrypt. Na portfolio jak znalazł
Linek # | dnia 04 sierpnia 2009, o godzinie 18:44:26
IE8 nie dziala niestety.
olo # | dnia 04 września 2009, o godzinie 18:54:48
Głupoty opowiadasz, działa na IE6...IE8
Nikoś # | dnia 06 września 2009, o godzinie 17:15:17
Niestety lightbox NIE obsługuje narazie IFRAME , żeby można było wyciągnąć obrazek z ramki należy zastosować np. lytebox i po sprawie . Niestety lytebox działa dużo gorzej ( moim zdaniem )
Marian # | dnia 17 września 2009, o godzinie 22:21:15
A gdzie zmienic pozycje np jak chcemy miec na dole albo u góry strony obrazek?
latino # | dnia 25 września 2009, o godzinie 14:28:09
Ok a jak to sie ma z galeria na jednym obrazie. Korzystam z kodu area shape... strona mi sie przyciemnia jednak nie pojawia sie wlasciwa grafika... w sumie to nic sie nie pojawia poza ciemnoscia ;P`
latino # | dnia 25 września 2009, o godzinie 14:39:15
Do pliku stylów css dorzucamy troszkę kodu z lightbox.css. czyli gdzie w przypadku fusiona?
regeszege # | dnia 21 października 2009, o godzinie 11:23:37
Skrypt jest świetny, tego szukałem. Dziękuję
Robert # | dnia 01 grudnia 2009, o godzinie 23:51:53
jak zmienić położenie wyskakującego ona? chce je wycentrować bardziej
Kolisz e3g@o2.pl # | dnia 30 grudnia 2009, o godzinie 12:56:49
Niestety u mnie nie działa ;/ Odrazu przechodzi do obrazka jak przez hiperłącze
Zenek # | dnia 24 stycznia 2010, o godzinie 11:00:24
Włącz uruchamianie skryptów na stronie.
hercus # | dnia 23 września 2010, o godzinie 19:33:55
byłbym w pełni szczęścia gdyby ktoś dołożył poruszenia się po zdjęciach przez naciśnięcie klawiszy strzałek prawo lewo następne/poprzednie .... ale DZIAŁA SUPER
no i zamieniłem sobie wyłączenie zamiast x to spacja żeby użytkownik nie musiał szukać ....
Pozdrawiam
wiola # | dnia 28 listopada 2011, o godzinie 21:54:51
Mnie zdjęcie otwiera się w nowym oknie.A na dysku u mnie jest dobrze.Co mam zrobić?
Dodaj swój komentarz:
W komentarzach działa formatowanie tekstu Markdown. Dowiedz się jak z tego korzystać.
*To jest tekst z emfazą* - To jest tekst z emfazą (<em>To jest tekst z emfazą</em>)
**To jest tekst z większą emfazą ('wykrzyczany')** - To jest tekst z większą emfazą ('wykrzyczany') (<strong>To jest tekst z większą emfazą ('wykrzyczany')</strong>)
* To jest lista
* Kilku elementów
- To jest lista
- Kilku elementów
Fajna sprawa, zwłaszcza, że po wyłączeniu obsługi JS grafiki nadal się ładują ]:)
(BTW: Opera 8.5 i FF 1.0.7 obsługują toto poprawnie, niestety - Konqueror 3.4.3 zmienia tło, ale nie wyświetla grafiki :( ).
Zdravim
MiB