publikacja: 6 października 2008, 20:18; autor: Szymon Skulimowski http://wpninja.pl/artykuly/zabawy-z-lightboksem-1-instalacja-skryptu/

Zabawy z „lightboksem” #1: instalacja skryptu

Lightbox to mieszanka JavaScriptu i CSS, za pomocą której w elegancki i przyjemny dla oka sposób możemy wyświetlić zdjęcia. Na pewno ją kojarzysz - po kliknięciu na miniaturkę ekran zostaje przyciemniony a na środku płynnie rozwija się okienko, do którego następnie ładowana jest grafika.

Lightboksowe wtyczki do WordPressa

Najszybszym sposobem integracji lightboksa z naszym ukochanym systemem do prowadzenia bloga jest aktywacja odpowiednich wtyczek (których jest od groma):

Niepotrzebne zwiększanie wagi strony

Niestety (a może na szczęście? :-)) najszybciej wcale nie oznacza najlepiej.

Praktycznie wszystkie wtyczki są przeciążone niepotrzebnymi funkcjami lub załączają dodatkowe JavaScriptowe biblioteki. W rezultacie strona waży dużo więcej przez co wolniej się wczytuje.

Spójrzmy na obrazek po prawej stronie. Przedstawia on rozkład objętości przykładowego bloga na poszczególne pliki. Żółtym markerem zaznaczyłem te pliki JavaScript, które zostały załączone po aktywacji jednej z powyższych, lightboksowych wtyczek. Ważą one łącznie 187 KB (o zgrozo!).

Ręczna implementacja lightboksa

Jako zagorzały zwolennik ręcznych robótek pragnę się z Wami podzielić swoim sposobem takiej implementacji lightboksa, która po skompresowaniu i z pominięciem biblioteki jQuery waży zaledwie 3KB (z jQuery 33KB).

Pobieramy gotowy skrypt
Skrypt ten (autorstwa Leandro Vieira Pinho) wykorzystuje do działania bibliotekę jQuery.
Usuwamy niepotrzebne pliki
Z rozpakowanego katalogu kasujemy katalog photos, pliki index.htm, js/jquery.js, js/jquery.lightbox-0.x.js oraz js/jquery.lightbox-0.x.pack.js.
Zmieniamy odnośniki do grafiki na bezwzględne
Otwieramy plik js/jquery.lightbox-0.x.min.js i szukamy (CTRL+F) odwołań do plików znajdujących się w katalogu images (czyli lightbox-blank.gif, lightbox-btn-close.gif, lightbox-btn-next.gif, lightbox-btn-prev.gif i lightbox-ico-loading.gif).
Zmieniamy odwołania do plików ze schematu:
images/nazwa-pliku.gif
na:
http://bezwzgledny-adres-do-katalogu-z-grafika/nazwa-pliku.gif.
Przegrywamy katalog na serwer
Ładujemy bibliotekę jQuery
Otwieramy plik header.php (katalog skórki) i przed funkcją <?php wp_head(); ?> dodajemy:
```
<?php wp_enqueue_script('jquery') ?>
```
Dodajemy odwołanie do nowego pliku CSS i JS
Otwieramy plik header.php (katalog skórki) i zaraz za funkcją <?php wp_head(); ?> dodajemy dwie linijki:
```
<link href="(...)" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="(...)"></script>
```
W miejsce (…) powinieneś wpisać bezwzględną ścieżkę do pliku CSS oraz JS lightboksa.

Uruchamiamy skrypt
W dalszym ciągu edytujemy plik header.php i tuż przed znacznikiem </head> dodajemy:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=lightbox]').lightBox()
})
</script>

W punkcie 7. określiliśmy sposób w jaki JavaScript ma rozpoznawać odnośniki. Powyższy zapis oznacza, że odnośnik taki powinien mieć parametr rel="lightbox". Możemy wstawić go ręcznie poprzez edytor HTML lub klikając na wstawioną miniaturkę, następnie ikonę „edytuj obrazek” i uzupełniając w zakładce „ustawienia zaawansowane” rubrykę „Rel pliku” wartością „lightbox”.

Oczywiście możemy to zmienić i przykładowo edytując 3. linijkę z 7. punktu:

$('#gallery a').lightBox();
Wszystkie odnośniki znajdujące się w boksie #gallery będą otwierały się lightboksem.
$('a.lightbox').lightBox();
Wszystkie odnośniki z klasą „lightbox” będą otwierały się lightboksem.
$('a').lightBox();
Wszystkie odnośniki na stronie będą otwierały się lightboksem.

Podobał się artykuł? Dodaj kanał RSS / Atom do swojego czytnika lub zapisz się na bezpłatny newsletter i dołącz do grona stałych czytelników.

Podobne artykuły

Komentarze (103)

Nigatsu 1323 dni temu:
Brawo, takie artykuły są najlepsze. Bez owijania w bawełnę, prosto i klarownie.Jeśli chodzi o gotowe wtyczki do WordPressa to jest jedna ciekawa, o nazwie slimbox-plugin (http://wordpress.org/extend/plugins/slimbox-plugin). Oczywiście waży troszkę więcej niż wtyczka tu zaprezentowana (dwa pliczki js po 45kb i 4,2kb), ale jeśli ktoś nie ma zamiaru grzebać w swojej skórce to jest idealna. O wiele lżejsza niż wtyczki z Lightboxa.
odpowiedz
Tomek 1322 dni temu:
A ja na swoim blogu do ładowania obrazków korzystam z lekkiej wtyczki http://www.longren.org/wordpress/thumbnail-viewer/
odpowiedz
Ravicious 1322 dni temu:
A co, jeśli inna wtyczka używa jQuery?
odpowiedz
Lanooz 1322 dni temu:
Chciałabym jednak jakieś porównanie skryptów lightboksowych. Czym się róznią i które się opłacają.
Już tyle odmian, że głowa boli ;)
odpowiedz
Szymon Skulimowski 1322 dni temu:
@Ravicious,
A co, jeśli inna wtyczka używa jQuery?
Wtedy możemy pominąć krok 5. (choć w niczym ten zapis nie przeszkadza - WordPress sam wykryje czy jQuery został już załadowany). :-)
Generalnie trzeba dążyć właśnie do tego, żeby na stronie wykorzystywana była tylko jedna biblioteka (jQuery, mooTools, Prototype, script.aculo.us itp.). Im więcej wtyczek będzie korzystało z jednej biblioteki tym lepiej (w końcu została ona już pobrana więc czemu nie korzystać z jej możliwości?).
odpowiedz
Szymon Skulimowski 1322 dni temu:
@Lanooz,
Chciałabym jednak jakieś porównanie skryptów lightboksowych. Czym się róznią i które się opłacają. Już tyle odmian, że głowa boli ;)
Główna różnicą pomiędzy wszystkimi skryptami tego rodzaju jest biblioteka z jakiej korzystają. Resztę rzeczy (np. szybkość pojawiania się boksa, obrazek postępu czy dodatkowe podpisy pod obrazkami) można już samemu skonfigurować (co pokażę w kolejnej części).
odpowiedz
Lanooz 1322 dni temu:
Nie każdy się orientuje w bibliotekach. Więc dla takiego człowieka nie wiadomo jak z wydajnością skryptów.
odpowiedz
Szymon Skulimowski 1322 dni temu:
Moim zdaniem najlepszym wyborem będzie jQuery.
Szybka, lekka, popularna, z mnóstwem gotowych skryptów i, co dla nas ważne, najczęściej wykorzystywana przy pisaniu wtyczek pod WP.
odpowiedz
Ravicious 1321 dni temu:
A czy da się skonfigurować wszystko tak, by w wszystkie odnośniki z klasą „lightbox” _lub_ rel=„lightbox” otwierały się lightboksem?
odpowiedz
m1chu 1321 dni temu:
A czy da się skonfigurować wszystko tak, by w wszystkie odnośniki z klasą „lightbox” _lub_ rel=”lightbox” otwierały się lightboksem?
Czy w siódmym punkcie nie jest to czasami opisane? :>
Główna różnicą pomiędzy wszystkimi skryptami tego rodzaju jest biblioteka z jakiej korzystają. Resztę rzeczy (np. szybkość pojawiania się boksa, obrazek postępu czy dodatkowe podpisy pod obrazkami) można już samemu skonfigurować (co pokażę w kolejnej części).
Nie każdy tym dodatku istnieje jednak w aktualnie przez nas używanym frameworku lub nie zawsze takowy nam odpowiada. W czysto hobbistycznych tworach łatwiej jest użyć innego rozwiązania niż bawić się w przepisywanie poszczególnych. Przydatne jest wtedy ominięcie kolizji dwóch różnych wtyczek (z jQuery w tle), a że nie każdy zna rozwiązanie podaję opis: http://m1chu.eu/wordpress/kolizje-wspoldzialania-bibliotek-javascript-na-podstawie-wtyczek-wordpress
odpowiedz
m1chu 1321 dni temu:
Nie każdy tym dodatku
„Nie każdy dodatek” - tak miało być. Przepraszam za pomyłkę :]
odpowiedz
Ravicious 1321 dni temu:
Nie. Chodzi mi o to, by skrypt sprawdzał, czy element ma ustawioną odpowiednią wartość w rel lub należy do odpowiedniej klasy.
odpowiedz
Szymon Skulimowski 1321 dni temu:
@Ravicious,
A czy da się skonfigurować wszystko tak, by w wszystkie odnośniki z klasą „lightbox” _lub_ rel=”lightbox” otwierały się lightboksem?
Jasne. W tym konkretnym przypadku wystarczy zapisać to tak:
```
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=lightbox]').lightBox();
$('a.lightbox').lightBox()
})
</script>
```
@m1chu,
Mieszanie ze sobą bibliotek to masakra. Nie dość, że zajmuje to niemiłosiernie dużo miejsca to, jak zauważyłeś w swoim artykule, może powodować konflikty.
odpowiedz
Kamil 1320 dni temu:
A możesz powiedzieć jak sie nazywa ta wtyczke, za pomocą ktorej stworzyles ta ladną sonde w sidebarze ;) ?
odpowiedz
Tomek 1319 dni temu:
To ta http://lesterchan.net/portfolio/programming/php/#wp-polls :)
odpowiedz
Szymon Skulimowski 1319 dni temu:
Potwierdzam. :-)
odpowiedz
Ravicious 1319 dni temu:
Dzięki za pomoc, taki lekki lightbox to o wiele lepsze rozwiązanie, niż używanie wtyczki NextGEN Gallery, z której zresztą za często nie korzystałem.
odpowiedz
Szymon Skulimowski 1319 dni temu:
Właśnie o to chodzi! W trzeciej części (tak, nie opublikowałem jeszcze drugiej :-P) pokażę, że wtyczkę NextGEN Gallery można spokojnie wyrzucić do śmieci :-).
odpowiedz
Papajek 1318 dni temu:
Przyznam szczerze że za pierwszym razem nie udało mi się i musiałem szukać błędów które popełniłem.… Ale jednak działa !!! Genialne :D
odpowiedz
Papajek 1318 dni temu:
Niestety pojawił mi się jeden błąd .… mianowicie przy walidacji CSS na http://jigsaw.w3.org/css-validator wyświetla się błąd !!!
62 #lightbox-nav-btnPrev, #lightbox-nav-btnNext Właściwość zoom nie istnieje : 1
Czy da się coś z tym zrobić ??? Pomocy :)
odpowiedz
Papajek 1318 dni temu:
W Validatorze http://jigsaw.w3.org/css-validator/ po dodaniu Lightboxa tym sposobem pojawiają się błędy zarówno CSS jak i xHTML … jak to naprawić ??? Proszę o pomoc bo jestem początkujący
odpowiedz
Ravicious 1318 dni temu:
Nie wiem, jakie to przyniesie skutki, ale możesz po prostu z pliku jquery.lightbox-0.x.css wywalić linijkę z zoom: 1;.
odpowiedz
Papajek 1318 dni temu:
Wywaliłem i jest wszystko okej. Dzięki :)
odpowiedz
Szymon Skulimowski 1318 dni temu:
Z tego co pamiętam to zoom to jakiś css-hack dla Internet Explorera poniżej wersji 6.0. Możesz więc, tak jak napisał Ravicoius, to usunąć.
odpowiedz
SpeX 1311 dni temu:
Witam, kiedy można się spodziewać 2 części wpisu? Bo akurat korzystam z NextGEN Gallery. Choć planowałem go wykorzystać do tworzenia galerii na stronie na razie otwiera tylko miniaturki w wpisach :/
odpowiedz
Szymon Skulimowski 1309 dni temu:
Witam, kiedy można się spodziewać 2 części wpisu?
Drugą część planuję opublikować jeszcze w tym tygodniu.
odpowiedz
Maciej Płoński 1291 dni temu:
Nie polecam ustawiania lightboksa dla wszystkich linków - trochę można się zdziwić klikając na odnośnik do innej strony ;)
odpowiedz
Livio 1254 dni temu:
Mógłbym prosić o taki wpis, ale dotyczący thickboksa, lżejszej alternatywy oryginalnego lightboksa, też w jQ?
Mam zmodyfikowany kawałek thickboksa, konkretnie selektor, ale nie radzę sobie jakoś ze spolszczeniem go ;) .
odpowiedz
Szymon Skulimowski 1254 dni temu:
Mógłbym prosić o taki wpis, ale dotyczący thickboksa, lżejszej alternatywy oryginalnego lightboksa, też w jQ?
W jakim sensie lżejszego? Mogę się mylić ale z tego co patrzyłem to ważą one praktycznie tyle samo przy czym wygląd ThickBoxa jest dosyć archaiczny.
odpowiedz
Bielack 1223 dni temu:
Próbuję właśnie uruchomić ręcznie Lightbox wg Twojego przepisu, ale coś nie idzie. Myślałem, że to najprawdopodobniej przez wtyczkę optymalizacyjną PHP Speedy WP o jakiej wspomniał Paweł, ale gdy ją wyłączę, nadal zdjęcia otwierają się normalnie (czyli w nowym oknie, lub tym samym zamiast strony). Masz może jakiś pomysł, gdzie mogę sprawdzać, czy nie popełniłem błędu?
odpowiedz
Szymon Skulimowski 1223 dni temu:
W kodzie Twojej strony widać, że przy załączaniu skryptu jquery.lightbox-0.5.min.js adres masz podany w.. nawiasie. :-)
Całkiem możliwe, że to jedyna przyczyna.
odpowiedz
Bielack 1223 dni temu:
Szymon, bardzo Ci dziękuję za zwrócenie uwagi na ten „szczegół”. Najpierw zbyt dosłownie potraktowałem Twoją wskazówkę z src=”(…)”, a potem już o tym zapomniałem :-).
Po prawidłowej instalacji wg, Twojego przepisu ten lekki lightbox działa świetnie, dodatkowo oferując przeglądanie obrazków (jeśli na danej stronie mamy więcej niż jeden obrazek, to kliknięcie po prawej stronie obrazka powoduje pokazanie kolejnego - nie zawsze ma to sens, ale generalnie jest przydatne).
Problem pojawia się, gdy włączę PHP Speddy - lightbox przestaje działać. Jednak, można to obejść, gdyż wtyczka ta oferuje pominięcie wskazanych plików: do Ignore List dopisałem: jquery.js,jquery.lightbox-0.5.min.js
Po tym wszystkim, włączyłem jeszcze SuperCache i wygląda na to, że można oglądać galerie i cieszyć się pewną dozą optymalizacji.
Jeszcze raz dzięki za konkretną pomoc.
odpowiedz
Szymon Skulimowski 1223 dni temu:
Jeszcze raz dzięki za konkretną pomoc.
Proszę bardzo. Piwo się należy na następnym spotkaniu w ramach NetDay ;-).
odpowiedz
Tomek 1223 dni temu:
Hmm a jak podałeś ścieżki to tych plików? Sama nazwa czy … ?
odpowiedz
Bielack 1223 dni temu:
@Szymon: o, to niespodzianka! Jesteś z Lublina? Będziesz na kolejnym NetDay? Koniecznie musimy się razem napić!
@Tomek: podałem pełne ścieżki do katalogu, łącznie z http://www.pajmon.com/
odpowiedz
Szymon Skulimowski 1223 dni temu:
Tak, jestem z Lublina i będę na kolejnym NetDay’u. Jak już ustalą datę to pewnie się jakoś zgadamy :-).
odpowiedz
Suchy 1215 dni temu:
Witam,
Zainstalowałem lightBox zgodnie z instrukcją, wszystko fajnie działa z wyjątkiem
$(‘#gallery a’).lightBox();
Czy ktoś ma jakiś pomysł jak to uruchomić
Pozdrawiam i proszę o pomoc
odpowiedz
Szymon Skulimowski 1215 dni temu:
@Suchy,
WordPress tworzy galerię w bloku o klasie (class) „gallery” a nie identyfikatorze (id). Powinieneś więc spróbować z $(’.gallery a’).lightBox();.
odpowiedz
Suchy 1215 dni temu:
Chyle głowę
$(‘.gallery a’).lightBox();
działa idealnie, Wielkie dzięki
odpowiedz
Tomek 1175 dni temu:
Od wpisu trochę wody upłynęło ale wpadłem ostatnio na bardzo przydatną stronę:
http://planetozh.com/projects/lightbox-clones/
Na pewno komuś się przyda takie porównanie :) Można znaleźć sporo „lżejszych” zamienników :)
odpowiedz
Szymon Skulimowski 1174 dni temu:
@Tomek,
Świetna strona - dzięki za zamieszczenie odnośnika.
odpowiedz
Tomek 1174 dni temu:
Nie ma sprawy :) Nawet wpis szykuję o tym :)
odpowiedz
wojTrek 1155 dni temu:
Dwa przypadki:
[gallery]
KPICASA_GALLERY
To juz trzeci dzien jak rwe wlosy z glowy.
Jakbym nie podchodzil to nie mam zielonego pojecia jak uskutecznic Lightboksa. Obecnie na stanie: lightbox-plus
WP 2.7.1, czy to moze byc problemem? Szczerze pisze, to moje pierwsze podejscie do WP.
No ale ze zdjeciami to prawdziwa zagwozdka dla mnie.
Moglby ktos wkleic mi tu kod, ktory uruchomilby Lightboksa z powyzszymi parametrami?
odpowiedz
Tomek 1155 dni temu:
Możesz dodać wtyczkę http://mdkart.fr/blog/plugin-add-lightbox-pour-wordpress/ i w ustawieniach ustawić na dodawania kodu lightbox do wszystkich obrazków na blogu. Powinno pomóc :)
odpowiedz
wojTrek 1155 dni temu:
Co chcesz w zamian, za te cenna informacje?
Wszysko piknie dziala:-)
odpowiedz
Tomek 1155 dni temu:
A załatw mi 100 czytelników RSS ekstra i będziemy kwita ;)
odpowiedz
wojTrek 1155 dni temu:
Sam zmuszam ludzi, zeby na swoich stronach chcieli pisac. Tlumacze ze im sie oplaci…
A ja juz abonuje:-) Wiec jeszcze 99
odpowiedz
Tomek 1155 dni temu:
Kryzys udziela się nawet piszącym / komentującym ;)
odpowiedz
wojTrek 1154 dni temu:
Ja robię strony dla przedsiębiorców. Więc jeśli ktoś jest aktywny w swojej pracy, to kładąc kafelki na pewno może coś raz w tygodniu napisać. Jeśli nie o nowym zleceniu to choć o nowym, wypróbowanym kleju czy nowej kolekcji kafelków.
Wiadomo, że nic na siłę! Ale rytm trzeba sobie wypracować, tak myślę.
Ok, kończę, bo właśnie jestem podczas pracy nad dwiema nowymi stronami.
Pozdrawiam serdecznie!
odpowiedz
Czekaj Jakub 1127 dni temu:
Mam problem. Postąpiłem według instrukcji i niestety lightbox nadal nie działa… Co dziwne udało mi się zainstalować na starym wordpressie na 2.7 już niestety nie :/
odpowiedz
amistad18 1126 dni temu:
Czy komuś się udało to zrobić wedle tych wskazówek na WP 2.7? Osobiście mam najnowszego WP 2.7.1, próbowałem tym sposobem uaktywnić lightboxa, oraz nawet instalować polecane ‘lekkie’ wtyczki, slimbox-plugin.1.3, thumbnail-viewer.1.2, niestety nic nie chce działać, oczywiście wedle instrukcji dodaję do linków rel=„lightbox’ czy też rel=„thumbnail” …
odpowiedz
Szymon Skulimowski 1126 dni temu:
@Czekaj Jakub,
Jeśli podasz adres strony to będę mógł Ci podpowiedzieć dlaczego nie działa.
@amistad18,
Instrukcja jest uniwersalna i nie zależy od wersji WP (używam tego od 2.6.x aż po 2.8).
odpowiedz
amistad18 1126 dni temu:
Drogi Szymonie - odpowiedzi w tempie zaiste ekspresowym ;)
Adres mojego dzieła z którym mam przyjemność się już bawić jakiś czas … *podałem w polu adres strony*
Na stronie głównej wszystkie okładki teoretycznie powinny być otwierane za pomocą lightboxa, w pewnym momencie myślałem że może dziwny adres miniaturek/obrazków, tworzony poprzez wtyczkę Post Gallery na to wpływa, ale nie, gdyż w pojedynczym wpisie dodałem statyczny obrazek, olinkowałem go i także nadałem atrybut rel=„lightbox” … adres strony / ?p=591
hmm, mam jakiś problem z napisaniem komentarza, domyślam się że to przez linki ;)
odpowiedz
Szymon Skulimowski 1126 dni temu:
@amistad18,
A punkt 5.? Nie masz załadowanej biblioteki jQuery.
odpowiedz

amistad18 1126 dni temu:

No właśnie mam:

<code>
<title><?php bloginfo('name');
if ( is_single() ) {
_e('&raquo; Blog Archive', 'kubrick');
}
wp_title(); ?></title>
 
<?php wp_enqueue_script('jquery') ?>
 
<link href="adres-strony/wp-content/
themes/dw24/css/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="adres-strony/wp-content/themes/dw24/js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=lightbox]').lightBox()
})
</script>
</head>
<body>
</code>

Tak wygląda mój kod … w źródle strony nic nie wyświetla, nawet czytałem trochę o tym ładowaniu bibliotek z WordPressa, który od 2.6 powinien mieć to w standardzie, i faktycznie mam w wp-includes/js/jquery całą masę plików …

odpowiedz

Szymon Skulimowski 1126 dni temu:
Generalnie brakuje w Twoim szablonie odwołania do specjalnej funkcji WordPress - <?php wp_head(); ?>. Powinna ona być umieszczona w pliku header.php tuż przed </head>. Odpowiada ona za generowanie dodatkowych skryptów JS i plików CSS, których potrzebują niektóre wtyczki.
Funkcja omówiona w punkcie 5. czyli <?php wp_enqueue_script('jquery') ?> zadziała tylko wtedy gdy mamy <?php wp_head(); ?> :-).
Jeśli nie chcesz używać funkcji <?php wp_head(); ?> (bo np. chcesz mieć większą kontrolę nad tym co jest dołączane do nagłówka) to możesz załadować bibliotekę jQuery ręcznie. Takie odwołanie powinno wystarczyć:
```
<script type="text/javascript" src="<?php echo get_option('home'); ?>/wp-includes/js/jquery/jquery.js"></script>
```
Mimo wszystko polecam jednak mieć wp_head w nagłówku.
odpowiedz
amistad18 1126 dni temu:
Podziękował. Działa ;)
Co prawda mi dokleja kilka linijek które już mi są zbędne, bo się obyłem bez nich, ale skoro spec zaleca mieć tą funkcję w headerze, to się trzeba przyzwyczaić ;)
Pozdrawiam, amistad18.
odpowiedz
Szymon Skulimowski 1126 dni temu:
Nie ma sprawy. Na zdrowie :-).
odpowiedz
Czekaj Jakub 1125 dni temu:
Szymon proszę link tele-skopy.pl :) Proszę oczywiście o jakąkolwiek wskazówkę :)
odpowiedz
Szymon Skulimowski 1125 dni temu:
@Jakub,
Na początek spróbuj poprawić odnośniki do pliku CSS i JS lightboksa - obecnie masz wstawiony adres rozpoczynający się dopiero od www (a powinna być cała ścieżka czyli włącznie z http…).
PS. Masz też dwukrotnie załadowaną bibliotekę jQuery (raz całkowicie wystarczy :-)).
odpowiedz
Czekaj Jakub 1125 dni temu:
Działa :-) Nie myślałem że błąd jest taki hmmm „prosty”
Dziękuję za pomoc. I gratuluje świetnej strony :-)
odpowiedz
Szymon Skulimowski 1125 dni temu:
Proszę bardzo i dziękuję za miłe słowa ;).
odpowiedz
Czekaj Jakub 1124 dni temu:
A to pozwolę sobie jeszcze skorzystać z Twojej pomocy :-P
Mam pytanie czysto techniczne. Dlaczego na Twojej stronie zdjęcia lightboxa wczytywane są płynnie i szybko… U mnie zaś w czasie wczytywania animacja się „tnie”. Czy jest to może wina hostingu, złego kodu, czy może mojej maszyny na której przeglądam tą stronę ??
odpowiedz
Szymon Skulimowski 1123 dni temu:
Prawdę mówiąc to nie wiem dlaczego tak jest (choć hosting i twój komputer możemy raczej wykluczyć z kręgu podejrzanych).
odpowiedz
Artur 1123 dni temu:
Dziwna sprawa z tym lightboxem… Miałem taką samą sytuację jak Czekaj Jakub. Na kilku stronach miałem wstawionego lighboxa, serwer ten sam. Na niektórych animacja była płynna, na niektórych nie. Nie rozgryzłem od czego to zależy…
odpowiedz
Czekaj Jakub 1122 dni temu:
Popróbuję coś z tym zrobić :) Jak mi się uda to się pochwalę :)
odpowiedz
canah 1104 dni temu:
Panie Ninja Skulimowski jest Pan boski! Dzięki za instrukcje! :)
odpowiedz
albatros 1080 dni temu:
Zrobiłem jak napisałeś jednak po kliknięciu na zdjęcie następuje zwykłe przekierowanie do dużego zdjęcia. Używam WPMU z BuddyPress.
odpowiedz
canah 1070 dni temu:
Albatros - zapewne pominąłeś najważniejszą kwestię, o której Szymon nie wspomniał, a dla początkujących użytkowników wordpress nie jest ona tak oczywista. Zatem, jeśli Szymon nie ma nic przeciwko, to wrzucam treść uzupełniającą:
1. Po pierwsze wykonaj wszystkie kroki do punktu 3 włącznie.
2. Wgrywając pliki na serwer, pamiętaj aby wcześniej utworzyć jakiś pusty katalog, w którym znajdą się inne (inne = katalog css z plikiem stylizującym, katalog js z plikiem java script), np: możesz go nazwa po prostu „lightbox”. Katalog lightbox należy wgrać w miejscu „nazwaTwojejDomeny/wp-content/plugins/…” a nie do katalogu ze skórką. :)
3. Wykonaj resztę podpunktów z opisu Szymona, uwzględniając podmianę nazw w punkcie 6.
Na 100% będzie działało. :)
pozdrawiam
c.
odpowiedz
Marcin 1012 dni temu:
Niestety mi dalej nie działa. Pliki są w „/wp-content/plugins/lightbox”.
header.php: http://www.wrzuc.to/plik/e0X6ZrKKcG/headerphp.html
JS: http://www.wrzuc.to/plik/Cg5BRtK/jquerylightbox-05minjs.html
:/
odpowiedz
Szymon Skulimowski 1012 dni temu:
Otwórz plik header.php i przekopiuj adres do pliku js/css lightbox-a do przeglądarki a zobaczysz, że podałeś złe adresy.
odpowiedz
Marcin 1012 dni temu:
Rzeczywiście, zapomniałem tutaj poprawić.
Niestety poprawiłem na :
i dalej nie działa :/
odpowiedz
Szymon Skulimowski 1012 dni temu:
Nadal masz wpisaną złą ścieżkę.
odpowiedz
Marcin 1012 dni temu:
Heh, chyba jeszcze nie myślę jasno :/
Poprawiłem ścieżki w header.php i jquery.lightbox-0.5.min.js i dalej nie działa :/
odpowiedz
Szymon Skulimowski 1012 dni temu:
To są ścieżki z Twojego pliku:
http://nmp.waw.pl/wp-content/plugins/lightbox/css/jquery.lightbox-0.5.css
http://nmp.waw.pl/wp-content/plugins/lightbox/js/jquery.lightbox-0.5.min.js
Jeśli nie można ich otworzyć w przeglądarce oznacza to, że wpisane ścieżki są nieprawidłowe.
odpowiedz
Marcin 1012 dni temu:
Tylko, że one tam są: http://zapodaj.net/images/4400c3f3e074.png :/
odpowiedz
Szymon Skulimowski 1012 dni temu:
Pliki może i faktycznie są ale najwidoczniej masz problemy z prawami dostępu do katalogów / plików. Na załączonym zrzucie widać, że katalog ma nadane drwx (700) czyli z prawami odczytu/zapisu/wykonywania tylko dla właściciela.
Zazwyczaj katalogi mają 755 a pliki 644.
odpowiedz
Marcin 1012 dni temu:
Już działa, thx :)
odpowiedz
Marcin 1012 dni temu:
A tera trochę inne pytanie ;)
Jak zrobić by otwierało, wybrany link do strony, w lightboxie?
odpowiedz
Marcif 1008 dni temu:
Plugin ten jest świetny ale od 2 dni przeczesuję neta i nie potrafię znaleźć informacji jak na jednej stronie umieścić kilka galerii, których zdjęcia przy powiększaniu będą niezależnie się ładowały a nie tak jak mam do tej pory czyli po kliknięciu powiększenia wszystkie zdjęcia można przeglądać. Nie pomaga tutaj żadne rel=„lightbox[galerria1]” ani inne takie kombinacje. Czy ktoś wiec jak ten temat można ugryźć ?
odpowiedz
Burger 996 dni temu:
A jak łączyć funkcje różnych efektów?
odpowiedz
marsjaninzmarsa 979 dni temu:
To może jeszcze @Szymon napisz, jak ustawić to tak, żeby działało przy wszystkich linkach na stronie do odrazków i tylko obrazków to będzie super… ;)
odpowiedz
Szymon Skulimowski 978 dni temu:
~~A proszę Cię bardzo:~~
```
<script type="text/javascript">
$(document).ready(function(){
$('a:has(img[class^=align]), a:has(img[class^=size]), a:has(img.attachment-thumbnail), .gallery a').lightBox()
});
</script>
```
Aktualizacja (11.07.2011) - powyższy kod zawierał błąd, który zauważył Jakub. Poprawna wersja dostępna jest w jego komentarzu.
odpowiedz
marsjaninzmarsa 978 dni temu:
O, dziękuję bardzo :)
Nawet nie sądziłem, że to może być takie proste… ;)
odpowiedz
Nomex 978 dni temu:
@Marcif - sprawdź tą wtyczkę http://wordpress.org/extend/plugins/gallery-plus/ Wgrywasz wszystkie zdjęcia do jednego tematu, później możesz wybrać zdjęcia które mają się pojawiać w artykule np. zdjęcia 1,2,3 na początku, 3,4,5 w połowie etc.
@marsjaninzmarsa - działa u Ciebie ten kod?
odpowiedz
Marcif 978 dni temu:
@Nomex - nie instaluję tego w wordpresie tylko we własnym CMSie no i stronie. Na razie problem doraźnie rozwiązałem w ten sposób że galerie umieszczam w oddzielnych divach o jakims tam id=„galeryXX” gdzie XX to liczby od 01 do 99 i tyle razy wykonuję inicjalizację w nagłówku strony :) ale rozwiązanie jest bardzo nieeleganckie niestety. Szukałem stron mających ten plugin „ligthbox for jquery” i kilka galerii ale nie znalazłem żadnej żeby podglądnąć jak tam to działa :(
odpowiedz
Szymon Skulimowski 978 dni temu:
@Marcinf,
Interesująca Cię rzecz nazywa się „roadtrip”. Jeśli wpiszesz kombinację jquery lightbox roadtrip w Google to na pewno znajdziesz coś interesującego.
Z tego co się orientuję to przedstawiony w tym artykule skrypt lightboxa nie oferuje takiej możliwości.
odpowiedz
amistad18 978 dni temu:
Marcif, ale po co jakiś plugin? Przecież to wystarczy dodać do strony jQuery ( albo okrojoną bibliotekę opisaną w tym temacie, zawsze ileś tam kb mniej ), i już możesz wykorzystywać efekt lightbox’a. Jeśli natomiast chodzi o „gdzie XX to liczby od 01 do 99 i tyle razy wykonuję inicjalizację w nagłówku strony” - może byś pokombinował z - for(i=1;i<100;i++) { … ? Wydaje mi się że powinno dać radę …
odpowiedz
Marcif 978 dni temu:
@Szymon - dzieki, nie omieszkam sprawdzić i podzielić się tym co uda mi się ustalić. Mam cichą nadzieję, że to rozwiąże mój problem.
odpowiedz
marsjaninzmarsa 978 dni temu:
@Nomex: szczerze mówiąc nie wiem, nie miałem jeszcze okazji podpiąć się do pcta na na tyle długo, żeby to przetestować… ;)
odpowiedz
Nomex 978 dni temu:
@marsjaninzmarsa - no właśnie, bo w moim przypadku linki do zdjęć nie wyświetlają się jako lightbox, stąd moje pytanie. Jak coś to czekam na odpowiedź.
odpowiedz
Janusz 938 dni temu:
Witam,
czy może mi ktoś powiedzieć jak w lighybox odblokować funkcję zapisywania wyświetlanego w galerii obrazu?
Chcę aby oglądający miał możliwość zapisania sobie kopii fotografii.
Pozdrawiam wszystkich Janusz
odpowiedz
Marcin 319 dni temu:
Witam,
czy ktoś może mi pomóc?
wszystko zrobiłem jak Ninja kazał i nic, nie ma lightboxa…
odpowiedz
Jakub Milczarek 315 dni temu:
Szymonie zauważyłem drobny błąd w kodzie, który podałeś w komentarzach:
Jest:
$(document).ready(function(){
$(‘a:has(img[class^=align]), a:has(img[class^=size]), a:has(img.attachment-thumbnail), .gallery a’).lightBox()
});
Powinno być raczej:
jQuery(document).ready(function($) {
$(‘a:has(img[class^=align]), a:has(img[class^=size]), a:has(img.attachment-thumbnail), .gallery a’).lightBox();
})
odpowiedz
Szymon Skulimowski 315 dni temu:
Zgadza się.
odpowiedz
Jakub Milczarek 315 dni temu:
No to cieszę się, że mogłem pomóc, a przy okazji podlansowałem ten wpis na FB :)
odpowiedz
Szymon Skulimowski 315 dni temu:
Dzięki x 2 :-).
odpowiedz
SpeX 315 dni temu:
Przeglądając jeszcze raz artykuł, zauważyłem iż obiecałeś jeszcze 3 część serii. Która mimo 2 lat jeszcze nie napisałeś :(
A tak przy okazji, wie ktoś jak otwierać linki z YT w LB?
odpowiedz
lakier 231 dni temu:
Hmm, a ja mam takie pytanie.
Wybaczcie, jeżeli był takowy temat już poruszany, a ja pytam ponownie.
Mianowicie. Aby stworzyć galerię… każde zdjęcie trzeba dodać oddzielnie, w przypadku WP. I będzie ono wyświetlane przez lightboxa, tak?
mam problemy z zainstalowaniem simpleviewer.
Czy da się jakoś zrobić podobnie do autoviewer galerię na wzór lightboxa?
odpowiedz
Skrypty php 184 dni temu:
Genialne
odpowiedz
Franciszek 167 dni temu:
A właśnie, jak łączyć rózne efekty w JQuery? Skrypt w skrypcie. Menu się rozwija by pokazać treść, a sama treść też jest w JQuery (animacja) i nie chce działać. Pomocy! ;)
Pozdrawiam
odpowiedz
Franciszek 167 dni temu:
A to się ma do łączenia efektów? Skrypt w skrypcie. Menu się rozwija by pokazać treść, a sama treść też jest w JQuery (animacja) i nie chce działać. Pomocy! ;)
Pozdrawiam
odpowiedz
ktosiek 88 dni temu:
W jeżeli mam skrypt iframe z youtuba i obrazek w jednym wpisie to po otwarciu filmik przykrywa czesc obrazka powiekszonego ;/ nie wiem co zorbić, wiekszy z-index dla lightboxa?
odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron (12)

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

Zabawy z „lightboksem” #2: konfiguracja
[…] poprzedniej części miałeś okazję dowiedzieć się czym jest tzw. „efekt lightbox” i poznać dwa […]
Krótkie podsumowanie: listopad 2008
[…] Zabawy z „lightboksem” #1: instalacja skryptu Czym jest „efekt lightboks”, w jaki sposób można go zaimplementować i dlaczego warto zrobić to własnoręcznie. Dla początkujących również instrukcja instalacji. […]
Ostatnio diety i odchudzanie to bardzo modny temat. Postanowiłem sprawdzić jak to jest "Lekki" SEO i bezpieczny Wordpressz WordPressem. Należy mu się odchudzanie, czy nie? | Serwis4U
[…] Lightbox (ładne wyświetlanie plików jpg). Zamiast niego ręcznie wstawiłem efekt zgodnie z przepisem, a jak to skonfigurować jest […]
Krótkie podsumowanie: luty 2009
[…] Zabawy z „lightboksem” #1: instalacja skryptu Lightbox to mieszanka JavaScriptu i CSS, za pomocą której w elegancki i przyjemny dla oka sposób możemy wyświetlić zdjęcia. Na pewno ją kojarzysz - po kliknięciu na miniaturkę ekran zostaje przyciemniony a na środku płynnie rozwija się okienko, do którego następnie ładowana jest grafika. […]
Alternatywy dla Lightbox / Lightboks | IT Tech Blog
[…] / zamienników i alternatyw dla popularnego Lightboxa2. Tematem zainteresowałem się po wpisie na wpnija.pl traktującym o dostosowyaniu skryptu tak aby zajmował jak najmniej mniejsca a więc aby jak […]
Dlaczego warto wybrać WordPress?
[…] potrzeb. Gdy jednak najdzie cię ochota na coś nowego (np. integrację z blipem czy efekt lightbox dla zdjęć) możesz doinstalować sobie odpowiednią wtyczkę […]
Krótkie podsumowanie: marzec 2009
[…] Zabawy z „lightboksem” #1: instalacja skryptu Lightbox to mieszanka JavaScriptu i CSS, za pomocą której w elegancki i przyjemny dla oka sposób możemy wyświetlić zdjęcia. Na pewno ją kojarzysz - po kliknięciu na miniaturkę ekran zostaje przyciemniony a na środku płynnie rozwija się okienko, do którego następnie ładowana jest grafika. […]
Krótkie podsumowanie: kwiecień 2009
[…] Zabawy z „lightboksem” #1: instalacja skryptu Lightbox to mieszanka JavaScriptu i CSS, za pomocą której w elegancki i przyjemny dla oka sposób możemy wyświetlić zdjęcia. Na pewno ją kojarzysz - po kliknięciu na miniaturkę ekran zostaje przyciemniony a na środku płynnie rozwija się okienko, do którego następnie ładowana jest grafika. […]
Krótkie podsumowanie: maj/czerwiec 2009
[…] Zabawy z „lightboksem” #1: instalacja skryptu Lightbox to mieszanka JavaScriptu i CSS, za pomocą której w elegancki i przyjemny dla oka sposób możemy wyświetlić zdjęcia. Na pewno ją kojarzysz - po kliknięciu na miniaturkę ekran zostaje przyciemniony a na środku płynnie rozwija się okienko, do którego następnie ładowana jest grafika. […]
Wiess Homepage » Blog Archive » Test obrazka
[…] lightboxa. Ale w WordPressie możemy doinstalować wtyczkę Lightbox. Kilka cennych uwag na stronie Wpninja. #gallery-2 { margin: auto; } #gallery-2 .gallery-item { float: left; margin-top: 10px; […]
Lightbox | Notatnik
[…] Źródło: Zabawy z „lightboksem” #1: instalacja skryptu […]
Lightbox – WordPress | Notatnik
[…] Źródło: Zabawy z „lightboksem” #1: instalacja skryptu […]