JavaScript – podgląd obrazków
Pewien czas temu znalazłem w sieci, gdzieś na jakiejś stronie bardzo ładnie wyglądający efekt powiększania obrazka. Jest on widoczny na moim blogu od jakiegoś czasu:
Jak widać na powyższym zrzucie po kliknięciu w obrazek na blogu jesteśmy przenoszeni do pełnego wymiaru klikniętego obrazka, ale żeby to nie wyglądało tak brzydko, podczas kliknięcia uruchamiany jest plik lightbox.js i lightbox.css plus do tego trzy pliki graficzne; overlay.png, close.gif i loading.gif.
Aby zaimplementować ten ładny efekt na naszej stronie wystarczy do kodu strony dopisać w <head> następujący fragment:
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/lightbox.js"></script>U mnie skrypt i arkusz stylów znajduje się w katalogu lightbox.
Po dodaniu tegoż kodu, aby zadziałał nam skrypt i żebyśmy zobaczyli ten efekt to do odnośnika, który prowadzi do obrazka, który chcemy zobaczyć musimy dodać atrybut rel="lightbox". Powyżej pokazany jest obrazek będący odnośnikiem, a teraz kliknij zwykły odnośnik wywołujący ten efekt. Jego kod:
<a href='http://medeco.p9.pl/wordpress/wp-content/uploads/2007/02/podglad_obrazkow.png' title='Tytuł odnośnika' rel="lightbox">kliknij zwykły odnośnik</a>Oprócz atrybutu rel możemy dodać atrybut title, który zostanie wyświetlony jako tytuł naszego powiększonego obrazka.
Ok, efekt ładny i przyda Wam się na pewno. Robi wrażenie. Chciałbym Was jeszcze prosić, o to że gdyby ktoś znał autora skryptu niech poda – bo ja nie pamiętam nawet z jakiej strony to “podwędziłem” 
Całość załączam w spakowanym zipem folderze: lightbox.zip
Niestety ten ładny podgląd działa Ci tylko na głównej stronie bloga. Jak ogląda się konkretnego posta już niestety nie. Być może dlatego, że arkusz stylów i kod javascript znajdują się w katalogu http://medeco.p9.pl/wordpress/lightbox/ a nie http://medeco.p9.pl/wordpress/2007/02/17/javascript-podglad-obrazkow/lightbox/
Ale podgląd mi się podoba. Widziałem też coś podobnego z tym, że póki obrazek się nie wczytał, wyświetlał się throbber podobny nieco do Firefoksowego.
Dzięki wielkie za zauważony błąd. Poprawione – teraz już chyba wszędzie się wyświetla poprawnie.
De nada
Googla zamknęli Ptaku?
http://www.huddletogether.com/projects/lightbox/
@PablO: thx, za odnośnik do źródłowego arta o tym podglądzie obrazków. Lecz nie spotkałem się z tym na tej stronie, a w kodzie nie było nic od autora.
SUPER! DZIĘKI WIELKIE ZA TEN TUTEK!
Hehe Pozdro
szukałem czegoś takiego od dłuższego czasu, aż wreszcie!
Witam
Miło gdyż działa pozdrawiam
czesc, wykorzystuję ten skrypt, ale na mojej stronie jest baner – animacja we flash’u, no i niestety przy używaniu tego podglądu, baner jest wyswietlany, pod nim obrazek z galerii….
czy kod można uodpornić na flash ?
dzięki
Co do tego flash’a to ja bym pokombinował z z-index i ustawił wyższy parametr niż przyznawany flash’owi. Ponad 1000 ale mogę się mylić.
i wtedy pierwsza warstwa będzie ta która ma najwyższą wartość parametru.
ustaw większy z-index dla div’a ze skryptu to będzie w masce nad flash’em. Chyba ponad 1000 ale nie pamiętam na 100%