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

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).

  1. Pobieramy gotowy skrypt
    Skrypt ten (autorstwa Leandro Vieira Pinho) wykorzystuje do działania bibliotekę jQuery.
  2. 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.
  3. 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.
  4. Przegrywamy katalog na serwer
  5. Ładujemy bibliotekę jQuery
    Otwieramy plik header.php (katalog skórki) i przed funkcją <?php wp_head(); ?> dodajemy:

    <?php wp_enqueue_script('jquery') ?>
  6. 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.

  7. 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.

Komentarze (92)

  1. Nigatsu (6 października 2008, 23:13) #:

    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.

  2. Tomek (7 października 2008, 11:08) #:

    A ja na swoim blogu do ładowania obrazków korzystam z lekkiej wtyczki http://www.longren.org/wordpress/thumbnail-viewer/

  3. Ravicious (7 października 2008, 16:23) #:

    A co, jeśli inna wtyczka używa jQuery?

  4. Lanooz (7 października 2008, 17:54) #:

    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 ;)

  5. Szymon Skulimowski (7 października 2008, 21:26) #:

    @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?).

  6. Szymon Skulimowski (7 października 2008, 21:41) #:

    @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).

  7. Lanooz (7 października 2008, 21:43) #:

    Nie każdy się orientuje w bibliotekach. Więc dla takiego człowieka nie wiadomo jak z wydajnością skryptów.

  8. Szymon Skulimowski (7 października 2008, 22:01) #:

    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.

  9. Ravicious (8 października 2008, 18:05) #:

    A czy da się skonfigurować wszystko tak, by w wszystkie odnośniki z klasą „lightbox” _lub_ rel=”lightbox” otwierały się lightboksem?

  10. m1chu (8 października 2008, 20:40) #:

    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

  11. m1chu (8 października 2008, 20:44) #:

    Nie każdy tym dodatku

    „Nie każdy dodatek” – tak miało być. Przepraszam za pomyłkę :]

  12. Ravicious (8 października 2008, 21:17) #:

    Nie. Chodzi mi o to, by skrypt sprawdzał, czy element ma ustawioną odpowiednią wartość w rel lub należy do odpowiedniej klasy.

  13. Szymon Skulimowski (8 października 2008, 23:50) #:

    @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.

  14. Kamil (10 października 2008, 0:38) #:

    A możesz powiedzieć jak sie nazywa ta wtyczke, za pomocą ktorej stworzyles ta ladną sonde w sidebarze ;) ?

  15. Tomek (10 października 2008, 11:16) #:

    To ta http://lesterchan.net/portfolio/programming/php/#wp-polls :)

  16. Szymon Skulimowski (10 października 2008, 11:40) #:

    Potwierdzam. :-)

  17. Ravicious (10 października 2008, 13:40) #:

    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.

  18. Szymon Skulimowski (10 października 2008, 14:03) #:

    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 :-).

  19. Papajek (11 października 2008, 9:31) #:

    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

  20. Papajek (11 października 2008, 12:19) #:

    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 :)

  21. Papajek (11 października 2008, 13:53) #:

    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

  22. Ravicious (11 października 2008, 18:22) #:

    Nie wiem, jakie to przyniesie skutki, ale możesz po prostu z pliku jquery.lightbox-0.x.css wywalić linijkę z zoom: 1;.

  23. Papajek (11 października 2008, 18:34) #:

    Wywaliłem i jest wszystko okej. Dzięki :)

  24. Szymon Skulimowski (11 października 2008, 20:16) #:

    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ąć.

  25. SpeX (19 października 2008, 0:59) #:

    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 :/

  26. Szymon Skulimowski (20 października 2008, 20:49) #:

    Witam, kiedy można się spodziewać 2 części wpisu?

    Drugą część planuję opublikować jeszcze w tym tygodniu.

  27. Maciej Płoński (7 listopada 2008, 16:06) #:

    Nie polecam ustawiania lightboksa dla wszystkich linków – trochę można się zdziwić klikając na odnośnik do innej strony ;)

  28. Livio (14 grudnia 2008, 13:07) #:

    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 ;) .

  29. Szymon Skulimowski (14 grudnia 2008, 13:47) #:

    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.

  30. Bielack (14 stycznia 2009, 17:33) #:

    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?

  31. Szymon Skulimowski (14 stycznia 2009, 17:53) #:

    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.

  32. Bielack (14 stycznia 2009, 23:18) #:

    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.

  33. Szymon Skulimowski (14 stycznia 2009, 23:24) #:

    Jeszcze raz dzięki za konkretną pomoc.

    Proszę bardzo. Piwo się należy na następnym spotkaniu w ramach NetDay ;-).

  34. Tomek (14 stycznia 2009, 23:46) #:

    Hmm a jak podałeś ścieżki to tych plików? Sama nazwa czy … ?

  35. Bielack (15 stycznia 2009, 0:39) #:

    @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/

  36. Szymon Skulimowski (15 stycznia 2009, 1:25) #:

    Tak, jestem z Lublina i będę na kolejnym NetDay’u. Jak już ustalą datę to pewnie się jakoś zgadamy :-).

  37. Suchy (22 stycznia 2009, 15:39) #:

    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

  38. Szymon Skulimowski (22 stycznia 2009, 15:50) #:

    @Suchy,
    WordPress tworzy galerię w bloku o klasie (class) „gallery” a nie identyfikatorze (id). Powinieneś więc spróbować z $(’.gallery a’).lightBox();.

  39. Suchy (22 stycznia 2009, 16:16) #:

    Chyle głowę
    $(‚.gallery a’).lightBox();
    działa idealnie, Wielkie dzięki

  40. Tomek (3 marca 2009, 21:09) #:

    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 :)

  41. Szymon Skulimowski (4 marca 2009, 12:06) #:

    @Tomek,
    Świetna strona – dzięki za zamieszczenie odnośnika.

  42. Tomek (4 marca 2009, 12:08) #:

    Nie ma sprawy :) Nawet wpis szykuję o tym :)

  43. wojTrek (23 marca 2009, 18:37) #:

    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?

  44. Tomek (23 marca 2009, 18:40) #:

    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 :)

  45. wojTrek (23 marca 2009, 18:55) #:

    Co chcesz w zamian, za te cenna informacje?
    Wszysko piknie dziala:-)

  46. Tomek (23 marca 2009, 20:07) #:

    A załatw mi 100 czytelników RSS ekstra i będziemy kwita ;)

  47. wojTrek (23 marca 2009, 21:49) #:

    Sam zmuszam ludzi, zeby na swoich stronach chcieli pisac. Tlumacze ze im sie oplaci…
    A ja juz abonuje:-) Wiec jeszcze 99

  48. Tomek (23 marca 2009, 22:09) #:

    Kryzys udziela się nawet piszącym / komentującym ;)

  49. wojTrek (24 marca 2009, 14:12) #:

    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!

  50. Czekaj Jakub (20 kwietnia 2009, 15:49) #:

    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 :/

  51. amistad18 (21 kwietnia 2009, 13:18) #:

    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” …

  52. Szymon Skulimowski (21 kwietnia 2009, 13:22) #:

    @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).

  53. amistad18 (21 kwietnia 2009, 14:19) #:

    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 ;)

  54. Szymon Skulimowski (21 kwietnia 2009, 15:34) #:

    @amistad18,
    A punkt 5.? Nie masz załadowanej biblioteki jQuery.

  55. amistad18 (21 kwietnia 2009, 15:44) #:

    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 …

  56. Szymon Skulimowski (21 kwietnia 2009, 16:43) #:

    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.

  57. amistad18 (21 kwietnia 2009, 16:55) #:

    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.

  58. Szymon Skulimowski (21 kwietnia 2009, 17:30) #:

    Nie ma sprawy. Na zdrowie :-).

  59. Czekaj Jakub (22 kwietnia 2009, 17:58) #:

    Szymon proszę link tele-skopy.pl :) Proszę oczywiście o jakąkolwiek wskazówkę :)

  60. Szymon Skulimowski (22 kwietnia 2009, 18:06) #:

    @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 :-)).

  61. Czekaj Jakub (22 kwietnia 2009, 18:52) #:

    Działa :-) Nie myślałem że błąd jest taki hmmm „prosty”

    Dziękuję za pomoc. I gratuluje świetnej strony :-)

  62. Szymon Skulimowski (22 kwietnia 2009, 22:14) #:

    Proszę bardzo i dziękuję za miłe słowa ;).

  63. Czekaj Jakub (23 kwietnia 2009, 15:12) #:

    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ę ??

  64. Szymon Skulimowski (24 kwietnia 2009, 10:24) #:

    Prawdę mówiąc to nie wiem dlaczego tak jest (choć hosting i twój komputer możemy raczej wykluczyć z kręgu podejrzanych).

  65. Artur (24 kwietnia 2009, 17:38) #:

    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…

  66. Czekaj Jakub (25 kwietnia 2009, 7:46) #:

    Popróbuję coś z tym zrobić :) Jak mi się uda to się pochwalę :)

  67. canah (13 maja 2009, 10:22) #:

    Panie Ninja Skulimowski jest Pan boski! Dzięki za instrukcje! :)

  68. albatros (6 czerwca 2009, 16:19) #:

    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.

  69. canah (16 czerwca 2009, 22:40) #:

    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.

  70. Marcin (13 sierpnia 2009, 7:52) #:

    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

    :/

  71. Szymon Skulimowski (13 sierpnia 2009, 8:28) #:

    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.

  72. Marcin (13 sierpnia 2009, 8:41) #:

    Rzeczywiście, zapomniałem tutaj poprawić.

    Niestety poprawiłem na :

    i dalej nie działa :/

  73. Szymon Skulimowski (13 sierpnia 2009, 8:44) #:

    Nadal masz wpisaną złą ścieżkę.

  74. Marcin (13 sierpnia 2009, 8:52) #:

    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 :/

  75. Szymon Skulimowski (13 sierpnia 2009, 8:58) #:

    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.

  76. Marcin (13 sierpnia 2009, 9:20) #:

    Tylko, że one tam są: http://zapodaj.net/images/4400c3f3e074.png :/

  77. Szymon Skulimowski (13 sierpnia 2009, 9:35) #:

    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.

  78. Marcin (13 sierpnia 2009, 11:47) #:

    Już działa, thx :)

  79. Marcin (13 sierpnia 2009, 12:00) #:

    A tera trochę inne pytanie ;)

    Jak zrobić by otwierało, wybrany link do strony, w lightboxie?

  80. Marcif (18 sierpnia 2009, 0:23) #:

    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źć ?

  81. Burger (29 sierpnia 2009, 17:32) #:

    A jak łączyć funkcje różnych efektów?

  82. marsjaninzmarsa (16 września 2009, 3:16) #:

    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… ;)

  83. Szymon Skulimowski (16 września 2009, 7:27) #:

    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>
  84. marsjaninzmarsa (16 września 2009, 8:33) #:

    O, dziękuję bardzo :)
    Nawet nie sądziłem, że to może być takie proste… ;)

  85. Nomex (16 września 2009, 16:51) #:

    @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?

  86. Marcif (16 września 2009, 17:07) #:

    @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 :(

  87. Szymon Skulimowski (16 września 2009, 17:35) #:

    @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.

  88. amistad18 (16 września 2009, 17:36) #:

    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ę …

  89. Marcif (16 września 2009, 17:50) #:

    @Szymon – dzieki, nie omieszkam sprawdzić i podzielić się tym co uda mi się ustalić. Mam cichą nadzieję, że to rozwiąże mój problem.

  90. marsjaninzmarsa (16 września 2009, 22:26) #:

    @Nomex: szczerze mówiąc nie wiem, nie miałem jeszcze okazji podpiąć się do pcta na na tyle długo, żeby to przetestować… ;)

  91. Nomex (17 września 2009, 0:31) #:

    @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ź.

  92. Janusz (26 października 2009, 9:33) #:

    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

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:

  1. Zabawy z „lightboksem” #2: konfiguracja

    [...] poprzedniej części miałeś okazję dowiedzieć się czym jest tzw. „efekt lightbox” i poznać dwa [...]

  2. 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. [...]

  3. 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 [...]

  4. 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. [...]

  5. 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 [...]

  6. 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ę [...]

  7. 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. [...]

  8. 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. [...]

  9. 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. [...]

  10. 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; [...]

  11. Lightbox | Notatnik

    [...] Źródło: Zabawy z „lightboksem” #1: instalacja skryptu [...]

  12. Lightbox – WordPress | Notatnik

    [...] Źródło: Zabawy z „lightboksem” #1: instalacja skryptu [...]