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 katalogphotos, plikiindex.htm,js/jquery.js, js/jquery.lightbox-0.x.jsorazjs/jquery.lightbox-0.x.pack.js. - Zmieniamy odnośniki do grafiki na bezwzględne
Otwieramy plikjs/jquery.lightbox-0.x.min.jsi szukamy (CTRL+F) odwołań do plików znajdujących się w kataloguimages(czylilightbox-blank.gif,lightbox-btn-close.gif,lightbox-btn-next.gif,lightbox-btn-prev.gifilightbox-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 plikheader.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 plikheader.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 plikheader.phpi 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.
Autor artykułu:
Komentarze
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 (https://wordpress.org/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.
odpowiedzA ja na swoim blogu do ładowania obrazków korzystam z lekkiej wtyczki http://www.longren.org/wordpress/thumbnail-viewer/
odpowiedzA co, jeśli inna wtyczka używa jQuery?
odpowiedzChciałabym jednak jakieś porównanie skryptów lightboksowych. Czym się róznią i które się opłacają.
odpowiedzJuż tyle odmian, że głowa boli ;)
@Ravicious,
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@Lanooz,
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).
odpowiedzNie każdy się orientuje w bibliotekach. Więc dla takiego człowieka nie wiadomo jak z wydajnością skryptów.
odpowiedzMoim 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.
odpowiedzA czy da się skonfigurować wszystko tak, by w wszystkie odnośniki z klasą „lightbox” _lub_ rel=”lightbox” otwierały się lightboksem?
odpowiedzCzy w siódmym punkcie nie jest to czasami opisane? :>
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„Nie każdy dodatek” – tak miało być. Przepraszam za pomyłkę :]
odpowiedzNie. Chodzi mi o to, by skrypt sprawdzał, czy element ma ustawioną odpowiednią wartość w rel lub należy do odpowiedniej klasy.
odpowiedz@Ravicious,
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,
odpowiedzMieszanie 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.
A możesz powiedzieć jak sie nazywa ta wtyczke, za pomocą ktorej stworzyles ta ladną sonde w sidebarze ;) ?
odpowiedzTo ta http://lesterchan.net/portfolio/programming/php/#wp-polls :)
odpowiedzPotwierdzam. :-)
odpowiedzDzię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.
odpowiedzWł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 :-).
odpowiedzPrzyznam 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
odpowiedzNiestety 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 :)
odpowiedzW 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
odpowiedzNie wiem, jakie to przyniesie skutki, ale możesz po prostu z pliku
odpowiedzjquery.lightbox-0.x.csswywalić linijkę zzoom: 1;.Wywaliłem i jest wszystko okej. Dzięki :)
odpowiedzZ tego co pamiętam to
odpowiedzzoomto jakiś css-hack dla Internet Explorera poniżej wersji 6.0. Możesz więc, tak jak napisał Ravicoius, to usunąć.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 :/
odpowiedzDrugą część planuję opublikować jeszcze w tym tygodniu.
odpowiedz[…] poprzedniej części miałeś okazję dowiedzieć się czym jest tzw. „efekt lightbox” i poznać dwa […]
odpowiedzNie polecam ustawiania lightboksa dla wszystkich linków – trochę można się zdziwić klikając na odnośnik do innej strony ;)
odpowiedz[…] 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. […]
odpowiedzMó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 ;) .
odpowiedzW 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.
odpowiedzPró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?
odpowiedzW kodzie Twojej strony widać, że przy załączaniu skryptu
jquery.lightbox-0.5.min.jsadres masz podany w.. nawiasie. :-)Całkiem możliwe, że to jedyna przyczyna.
odpowiedzSzymon, 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.
odpowiedzProszę bardzo. Piwo się należy na następnym spotkaniu w ramach NetDay ;-).
odpowiedzHmm a jak podałeś ścieżki to tych plików? Sama nazwa czy … ?
odpowiedz@Szymon: o, to niespodzianka! Jesteś z Lublina? Będziesz na kolejnym NetDay? Koniecznie musimy się razem napić!
odpowiedz@Tomek: podałem pełne ścieżki do katalogu, łącznie z http://www.pajmon.com/
Tak, jestem z Lublina i będę na kolejnym NetDay’u. Jak już ustalą datę to pewnie się jakoś zgadamy :-).
odpowiedzWitam,
Zainstalowałem lightBox zgodnie z instrukcją, wszystko fajnie działa z wyjątkiem
odpowiedz$(’#gallery a’).lightBox();
Czy ktoś ma jakiś pomysł jak to uruchomić
Pozdrawiam i proszę o pomoc
@Suchy,
odpowiedzWordPress tworzy galerię w bloku o klasie (class) „gallery” a nie identyfikatorze (id). Powinieneś więc spróbować z
$(’.gallery a’).lightBox();.Chyle głowę
odpowiedz$(’.gallery a’).lightBox();
działa idealnie, Wielkie dzięki
[…] Lightbox (ładne wyświetlanie plików jpg). Zamiast niego ręcznie wstawiłem efekt zgodnie z przepisem, a jak to skonfigurować jest […]
odpowiedz[…] 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. […]
odpowiedzOd 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@Tomek,
odpowiedzŚwietna strona – dzięki za zamieszczenie odnośnika.
Nie ma sprawy :) Nawet wpis szykuję o tym :)
odpowiedz[…] / 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 […]
odpowiedzDwa przypadki:
[gallery]
KPICASA_GALLERYTo juz trzeci dzien jak rwe wlosy z glowy.
odpowiedzJakbym 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?
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 :)
odpowiedzCo chcesz w zamian, za te cenna informacje?
odpowiedzWszysko piknie dziala:-)
A załatw mi 100 czytelników RSS ekstra i będziemy kwita ;)
odpowiedzSam zmuszam ludzi, zeby na swoich stronach chcieli pisac. Tlumacze ze im sie oplaci…
odpowiedzA ja juz abonuje:-) Wiec jeszcze 99
Kryzys udziela się nawet piszącym / komentującym ;)
odpowiedzJa 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.
odpowiedzWiadomo, ż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!
[…] potrzeb. Gdy jednak najdzie cię ochota na coś nowego (np. integrację z blipem czy efekt lightbox dla zdjęć) możesz doinstalować sobie odpowiednią wtyczkę […]
odpowiedz[…] 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. […]
odpowiedzMam 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 :/
odpowiedzCzy 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@Czekaj Jakub,
Jeśli podasz adres strony to będę mógł Ci podpowiedzieć dlaczego nie działa.
@amistad18,
odpowiedzInstrukcja jest uniwersalna i nie zależy od wersji WP (używam tego od 2.6.x aż po 2.8).
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@amistad18,
odpowiedzA punkt 5.? Nie masz załadowanej biblioteki jQuery.
No właśnie mam:
<code> <title><?php bloginfo('name'); if ( is_single() ) { _e('» 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 …
odpowiedzGeneralnie brakuje w Twoim szablonie odwołania do specjalnej funkcji WordPress –
<?php wp_head(); ?>. Powinna ona być umieszczona w plikuheader.phptuż 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.
odpowiedzPodzię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.
odpowiedzNie ma sprawy. Na zdrowie :-).
odpowiedzMam do Pana pytanie. Mam problem z lightboxem 2. Zrobiłam wszystko tak jak trzeba(mam przynajmniej takie wrażenie), ale nie wyświetla mi strzałek:(
odpowiedzProszę o pomoc i odzew.
Czy mogłabyś podać adres strony?
odpowiedzSzymon proszę link tele-skopy.pl :) Proszę oczywiście o jakąkolwiek wskazówkę :)
odpowiedz@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 :-)).
odpowiedzDziała :-) Nie myślałem że błąd jest taki hmmm „prosty”
Dziękuję za pomoc. I gratuluje świetnej strony :-)
odpowiedzProszę bardzo i dziękuję za miłe słowa ;).
odpowiedzA 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ę ??
odpowiedzPrawdę mówiąc to nie wiem dlaczego tak jest (choć hosting i twój komputer możemy raczej wykluczyć z kręgu podejrzanych).
odpowiedzDziwna 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…
odpowiedzPopróbuję coś z tym zrobić :) Jak mi się uda to się pochwalę :)
odpowiedz[…] 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. […]
odpowiedzPanie Ninja Skulimowski jest Pan boski! Dzięki za instrukcje! :)
odpowiedzZrobił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.
odpowiedzAlbatros – 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[…] 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. […]
odpowiedzNiestety 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
:/
odpowiedzOtwórz plik header.php i przekopiuj adres do pliku js/css lightbox-a do przeglądarki a zobaczysz, że podałeś złe adresy.
odpowiedzRzeczywiście, zapomniałem tutaj poprawić.
Niestety poprawiłem na :
i dalej nie działa :/
odpowiedzNadal masz wpisaną złą ścieżkę.
odpowiedzHeh, 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 :/
odpowiedzTo 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.
odpowiedzTylko, że one tam są: http://zapodaj.net/images/4400c3f3e074.png :/
odpowiedzPliki 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.
odpowiedzJuż działa, thx :)
odpowiedzA tera trochę inne pytanie ;)
Jak zrobić by otwierało, wybrany link do strony, w lightboxie?
odpowiedzPlugin 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źć ?
odpowiedzA jak łączyć funkcje różnych efektów?
odpowiedzTo 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… ;)
odpowiedzA 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.
odpowiedzO, dziękuję bardzo :)
odpowiedzNawet nie sądziłem, że to może być takie proste… ;)
@Marcif – sprawdź tą wtyczkę https://wordpress.org/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.
odpowiedz@marsjaninzmarsa – działa u Ciebie ten kod?
@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@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.
odpowiedzMarcif, 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@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@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@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ź.
odpowiedzWitam,
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
odpowiedzWitam,
czy ktoś może mi pomóc?
wszystko zrobiłem jak Ninja kazał i nic, nie ma lightboxa…
odpowiedzSzymonie 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($) {
odpowiedz$(’a:has(img[class^=align]), a:has(img[class^=size]), a:has(img.attachment-thumbnail), .gallery a’).lightBox();
})
Zgadza się.
odpowiedzNo to cieszę się, że mogłem pomóc, a przy okazji podlansowałem ten wpis na FB :)
odpowiedzDzięki x 2 :-).
odpowiedzPrzeglą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?
odpowiedzHmm, 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?
odpowiedzGenialne
odpowiedzA 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! ;)
odpowiedzPozdrawiam
Przykro mi, ale na to nie ma innego rozwiązania jak po prostu poduczenie się podstaw jQuery. Ze swojej strony mogę polecić poniższą pozycję: jQuery. Poradnik programisty.
odpowiedzW 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?
odpowiedzNiekoniecznie. Czasem trzeba do iframe dodać taki argument:
Możesz to zadanie powierzyć jQuery w poniższy sposób:
$('iframe').each(function(){ var url = $(this).attr("src") $(this).attr("src",url+"&wmode=transparent") });odpowiedztylko, ze po takim zabiegu robisz przy kazdej aktualizacji WP na nowo takie dodawanie kodu w plikach, z wtyczka masz problem z glowy, i po to wymyslono wtyczki aby sie z babraniem w kodzie nie bawic jak chcesz wylaczasz jak chcesz ja wlaczasz
odpowiedzPrzy aktualizacji samego WP raczej nie bo on już nic nie nadpisuje z motywów.
Artykuł był przygotowany z myślą o własnym motywie. Jeśli chcielibyśmy wprowadzić zmiany do gotowego motywu (np. pobranego z oficjalnego katalogu) to najlepiej utworzyć motyw potomny.
odpowiedzWiam!
Mam problem z liveboxem nie odtwarza mi się. Pokazuje się białe okienko przy otwarciu miniatury i nic więcej.
odpowiedzBardzo bym prosił o pomoc:)
Czy mógłbyś podać adres strony, na której występuje opisany problem? Sprawdziłem tą, którą podałeś w formularzu komentarza, ale nie znalazłem tam żadnych obrazków.
odpowiedzWitam, zrobilem wszytko wedlug wsakozwek ,ale lightbox nie dziala, tzn probuje cos wyswietlic ale nie wychodzi, podejrzewam ze jest konflikt bibliotek, chodzi o zakladke schody, jak rozwozac ten problem??
odpowiedzDodam ze chodzi o strone http://mich2.linuxpl.info.
odpowiedzPrawdę mówiąc to w tym momencie nic nie działa na Twojej stronie. Nie mam więc jak sprawdzić i podpowiedzieć.
odpowiedzpotrzebuje pomocy chcialem zaimplementowac lightboxa polecanego przez was lecz cos nie do konca dziala. Nie wiem czy to nie wina dosc wypasionego szablonu. Przetestuje na innej stronie jeszcze a miedzy czasie podsylam link ze stronem gdzie jest problem http://hemgro.pl/kontakt/#prettyPhoto (dotacja UE, strona w budowie) lightbox dziala lecz nie ma tych powyzszych strzalek ;)
odpowiedzNiestety nie zauważyłem żeby na powyższej stronie znajdował się jakiś obrazek graficzny. Zmieniałeś coś w międzyczasie? Czy mógłbyś podesłać adres do strony gdzie występuję wspomniany problem?
odpowiedzCześć,
co zrobić jeśli w opcjach „ustawieniach zaawansowanych” obrazka nie ma pytania o „Rel pliku” gdzie mogę to wstawić, albo co zrobić?
Gdy dodam
odpowiedzrel="lightbox"po alt albo szerokości obrazka za pomocą edytora HTML w WP to zostaje to po przełączeniu do trybu wizualnego skasowane.W WordPressie 3.5 fraza „Rel pliku” została zastąpiona przez „Relacja (XFN)”.
odpowiedzWitaj,
świetny artykuł. Wszystko fajnie działa. Lecz:
– czy da się jakoś zmusić wordpressa do zmiany wyświetlenia standardowej galerii (czyli obrazki w np. 5 kolumnach) aby zawsze tworzył galerię w karuzeli z lightboxem ?
np. bxslider wygląda bardzo fajnie http://bxslider.com/ lub jakiejkolwiek innej karuzeli. szukałem u przyjaciela google ale za dużo informacji nie znalazłem w tym temacie – jak to wszystko pogodzić. Nie ukrywam że byłaby by to przydatna funkconalność bo galeria np. z 20 zdjęciami robi na stronie mały bałagan.
Pozdrawiam
odpowiedzHej Łukasz,
zawsze możesz nadpisać (wyrejestrować stary i zarejestrować ponownie nowy) shortcode odpowiedzialny za tworzenie galerii. Wbrew pozorom nie jest to trudne zadanie – przykład możesz znaleźć na tej stronie: A solution For The WordPress Gallery.
Sz.
odpowiedzwitaj Szymonie. Mam pewien problem. Zaczynam pierwszy raz bawić się lightbox`em. Jednak nie wiem co jest nie tak, bo po wpisaniu twojego wzoru nie chce mi się wyświetlić obrazek. Również nie wiem czy pojawią mi się strzałki przy okienku. Proszę powiedz mi co mam zrobić?? Pozdrawiam
odpowiedzSprawdź co jest nie tak bo 1 raz tworze stronkę http://www.weekend-bus.pl może masz jakieś podpowiedzi jaki program można używać?
odpowiedzchodzi mi dokładnie o http://www.weekend-bus.pl/galeria.html
odpowiedzHej Paweł,
chyba nie zaktualizowałeś ścieżek do plików graficznych:
http://c/Users/Sabina/Desktop/Kopia%20Kopia%20tadek/images/06072012201.jpga powinno być:
www.weekend-bus.pl//images/06072012201.jpgGdyby po podmianie nadal nie działało to daj znać.
Sz.
odpowiedzhej Sz. zrobiłem to co napisałeś i trochę pomogło. Dziękuję. Teraz muszę wpaść na to jak zrobić, aby wszystkie obrazki tak się otwieraly
odpowiedzSzymon. Wszystkie obrazki maja poprawiony adres tak jakby ten sam, ale tylko 2 z nich otwierają się przez ligtboxa dlaczego??
odpowiedzTo pewnie dlatego, że kazałeś mu brać uwagę tylko te odnośniki, które znajdują się w identyfikatorze galeria:
$('#galeria a').lightBox();a w kodzie strony nie ma nic takiego.
Zamiast tego możesz posłużyć się poniższym kodem, który weźmie pod uwagę wszystkie odnośniki, które prowadzą do plików graficznych:
$('a[href$=".jpg"], a[href$=".png"], a[href$=".gif"]').attr('rel','gallery').lightbox();odpowiedzSzkoda, że w WP ta wersja Lightboxa jest jakoś tak okrojona :/
odpowiedzNic dziwnego, to jest wersja sprzed kilku lat…
odpowiedzmam panie szymonie mały problem. Chciałbym w pewnym projekcie wrzucić ładowanie lightboxa po
cssklasie zamiast rel. Jak dodaje zmienną$('a.lightbox').lightBox();do kodu to nic się nie dziejejQuery(document).ready(function() { jQuery('.jslider').jSlider({ nextClass:'jnext',// the class of the link onclick will slide next prevClass:'jprev',// the class of the link onclick will slide previous showItems:4,// show current items slideSpeed:500,// transition speed circular:true// if true then the sliding will be circular }); });może źle osadzam zmienną. Będę wdzięczny za pomoc.
odpowiedzChyba podesłałeś zupełnie inny kod (wygląda na skrypt do pokazu slajdów) :-).
odpowiedzDokładnie jest to skrpt do slajdów, ale chciałbym dodac jeszcze w kodzie lightboxa. Nie dokładnie się wyraziłem. Posiadam sklep ecommerce. Pełni on rolę informacyjną – opisy produktów. Posiadam drugi sklep, ale chciałbym ten trochę podszlifować. Zaimpletowałem w nim lightboxa bo nie było. I teraz chciałbym aby nie dodawać „rel” tylko załatwić to klasą.
Kod: http://wklej.org/id/993721/
odpowiedzPierwsze co możesz zrobić to dostosować kod do tego co już masz czyli zamiast
odpowiedz$('a.lightbox').lightBox();powinno byćjQuery('a.lightbox').lightBox();.dziękuje. w JS mam małe doświadczenie. jakoś mnie nigdy nie ciągnęło. A widzę się przydaje
odpowiedzprzepraszam ze pisze dopiero ale brak czasu i dwa inne projekty. nadal to nie działa…
odpowiedzTrudno coś poradzić bez zajrzenia w kod HTML. Czy mógłbyś podać adres strony, na której skrypt powinien działać?
odpowiedzciekawe jak zorganizować setki zdjęć wykorzystywane w galerii? WP wrzuca wszystkie w jedną kupkę i jak się w niej grzebać gdy kupka staje się……kupą?
odpowiedzNie do końca w „jedną kupkę” – w „ustawienia / media” można zaznaczyć żeby przydzielał je do katalogów w formacie „rrrr/mm” (chodzi o fizyczną lokalizacją plików na serwerze) :-)
A może chodziło Ci o to, że ciężko stworzyć galerię w panelu administracyjnym, zwłaszcza jak ma się już wgraną sporą ilość załączników?
odpowiedzCześć,
ja korzystam z wtyczki Lightbox 2 i zastanawiam się czy to normalne, że wtyczka nie pobiera tytułu zdjęcia, który nadałem w bibliotece mediów (po wgraniu zdjęcia do biblioteki są cztery pola do wyboru 1.tytuł, 2.etykieta, 3.tekst alternatywny, 4.opis) Tytuł, albo raczej to co chcę aby wyświetlało jako tytuł pobiera dopiero z pola „etykieta”. Czy to normalne zachowanie, czy można jakoś to zmienić. Tworząc galerię wolałbym mieć same zdjęcia bez podpisów (pole „etykieta” takie podpisy generuje w galerii), a dopiero po otwarciu zdjęcia, pod zdjęciem pojawiałby się tytuł. NextGen tak działał, ale nie chcę do niego wracać.
Pozdrawiam
odpowiedzFilu
Jeśli wtyczka, której używasz to WP Lightbox 2 to klikając na szczegóły obrazka (od WordPress 3.9) możesz rozwinąć dodatkową sekcję „Zaawansowane” – wystarczy, że wypełnisz tam pole „Tytuł obrazka”.
odpowiedzDostęp do tego menu mam z poziomu wpisu, ale tylko w przypadku dodania pojedyńczego obrazka, nie mogę tego zrobić kiedy działam na galerii. Tak samo nie widzę tych opcji z poziomu biblioteki mediów.
odpowiedzW galeriach możesz ukryć etykiety
div.gallery .gallery-caption { display:none; }Albo dorzuć sobie taki filtr, to zacznie łapać tytuły
function add_title_to_attachment( $markup, $id ){ $att = get_post( $id ); return str_replace('<a ', 'post_title.'" ', $markup); } add_filter('wp_get_attachment_link', 'add_title_to_attachment', 10, 5);odpowiedzDodaj własny komentarz
Odnośniki z innych stron
Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:
[…] poprzedniej części miałeś okazję dowiedzieć się czym jest tzw. „efekt lightbox” i poznać dwa […]
[…] 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. […]
[…] Lightbox (ładne wyświetlanie plików jpg). Zamiast niego ręcznie wstawiłem efekt zgodnie z przepisem, a jak to skonfigurować jest […]
[…] 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. […]
[…] / 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 […]
[…] potrzeb. Gdy jednak najdzie cię ochota na coś nowego (np. integrację z blipem czy efekt lightbox dla zdjęć) możesz doinstalować sobie odpowiednią wtyczkę […]
[…] 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. […]
[…] 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. […]
[…] 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. […]