publikacja: 6 października 2008, autor: , komentarzy 150 https://wpninja.pl/artykuly/zabawy-z-lightboksem-1-instalacja-skryptu/

Zabawy z „lightboksem” #1: instalacja skryptu


Warning: Trying to access array offset on false in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/functions.php on line 159
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.htmjs/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.giflightbox-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

  1. Nigatsu 16 lat 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 (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.

    odpowiedz
  2. Tomek 16 lat temu:

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

    odpowiedz
  3. Ravicious 16 lat temu:

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

    odpowiedz
  4. Lanooz 16 lat 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
  5. Szymon Skulimowski 16 lat 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
  6. Szymon Skulimowski 16 lat 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
  7. Lanooz 16 lat temu:

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

    odpowiedz
  8. Szymon Skulimowski 16 lat 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
  9. Ravicious 16 lat temu:

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

    odpowiedz
  10. m1chu 16 lat 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
  11. m1chu 16 lat temu:

    Nie każdy tym dodatku

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

    odpowiedz
  12. Ravicious 16 lat temu:

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

    odpowiedz
  13. Szymon Skulimowski 16 lat 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
  14. Kamil 16 lat temu:

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

    odpowiedz
  15. Tomek 16 lat temu:

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

    odpowiedz
  16. Szymon Skulimowski 16 lat temu:

    Potwierdzam. :-)

    odpowiedz
  17. Ravicious 16 lat 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
  18. Szymon Skulimowski 16 lat 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
  19. Papajek 16 lat 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
  20. Papajek 16 lat 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
  21. Papajek 16 lat 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
  22. Ravicious 16 lat 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
  23. Papajek 16 lat temu:

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

    odpowiedz
  24. Szymon Skulimowski 16 lat 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
  25. SpeX 16 lat 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
  26. Szymon Skulimowski 16 lat temu:

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

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

    odpowiedz
  27. Zabawy z „lightboksem” #2: konfiguracja 16 lat temu:

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

    odpowiedz
  28. Maciej Płoński 16 lat temu:

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

    odpowiedz
  29. Krótkie podsumowanie: listopad 2008 16 lat temu:

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

    odpowiedz
  30. Livio 16 lat 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
  31. Szymon Skulimowski 16 lat 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
  32. Bielack 16 lat 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
  33. Szymon Skulimowski 16 lat 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
  34. Bielack 16 lat 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
  35. Szymon Skulimowski 16 lat temu:

    Jeszcze raz dzięki za konkretną pomoc.

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

    odpowiedz
  36. Tomek 16 lat temu:

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

    odpowiedz
  37. Bielack 16 lat 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
  38. Szymon Skulimowski 16 lat temu:

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

    odpowiedz
  39. Suchy 16 lat 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
  40. Szymon Skulimowski 16 lat 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
  41. Suchy 16 lat temu:

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

    odpowiedz
  42. 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 16 lat temu:

    […] Lightbox (ładne wyświetlanie plików jpg). Zamiast niego ręcznie wstawiłem efekt zgodnie z przepisem, a jak to skonfigurować jest […]

    odpowiedz
  43. Krótkie podsumowanie: luty 2009 16 lat temu:

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

    odpowiedz
  44. Tomek 16 lat 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
  45. Szymon Skulimowski 16 lat temu:

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

    odpowiedz
  46. Tomek 16 lat temu:

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

    odpowiedz
  47. Alternatywy dla Lightbox / Lightboks | IT Tech Blog 16 lat temu:

    […] / 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 […]

    odpowiedz
  48. wojTrek 16 lat 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
  49. Tomek 16 lat 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
  50. wojTrek 16 lat temu:

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

    odpowiedz
  51. Tomek 16 lat temu:

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

    odpowiedz
  52. wojTrek 16 lat temu:

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

    odpowiedz
  53. Tomek 16 lat temu:

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

    odpowiedz
  54. wojTrek 16 lat 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
  55. Dlaczego warto wybrać WordPress? 16 lat temu:

    […] 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
  56. Krótkie podsumowanie: marzec 2009 16 lat temu:

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

    odpowiedz
  57. Czekaj Jakub 16 lat 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
  58. amistad18 16 lat 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
    1. Szymon Skulimowski 16 lat 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
    2. amistad18 16 lat 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
    3. Szymon Skulimowski 16 lat temu:

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

      odpowiedz
    4. amistad18 16 lat 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
    5. Szymon Skulimowski 16 lat 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
    6. amistad18 16 lat 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
    7. Szymon Skulimowski 16 lat temu:

      Nie ma sprawy. Na zdrowie :-).

      odpowiedz
    8. Ania 12 lat temu:

      Mam 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:(
      Proszę o pomoc i odzew.

      odpowiedz
    9. Szymon Skulimowski 12 lat temu:

      Czy mogłabyś podać adres strony?

      odpowiedz
  59. Czekaj Jakub 16 lat temu:

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

    odpowiedz
  60. Szymon Skulimowski 16 lat 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
  61. Czekaj Jakub 16 lat temu:

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

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

    odpowiedz
  62. Szymon Skulimowski 16 lat temu:

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

    odpowiedz
  63. Czekaj Jakub 16 lat 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
  64. Szymon Skulimowski 16 lat 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
  65. Artur 16 lat 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
  66. Czekaj Jakub 16 lat temu:

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

    odpowiedz
  67. Krótkie podsumowanie: kwiecień 2009 15 lat temu:

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

    odpowiedz
  68. canah 15 lat temu:

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

    odpowiedz
  69. albatros 15 lat 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
    1. canah 15 lat 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
  70. Krótkie podsumowanie: maj/czerwiec 2009 15 lat temu:

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

    odpowiedz
  71. Marcin 15 lat 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
  72. Szymon Skulimowski 15 lat 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
  73. Marcin 15 lat temu:

    Rzeczywiście, zapomniałem tutaj poprawić.

    Niestety poprawiłem na :

    i dalej nie działa :/

    odpowiedz
  74. Szymon Skulimowski 15 lat temu:

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

    odpowiedz
  75. Marcin 15 lat 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
  76. Szymon Skulimowski 15 lat 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
  77. Marcin 15 lat temu:

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

    odpowiedz
  78. Szymon Skulimowski 15 lat 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
  79. Marcin 15 lat temu:

    Już działa, thx :)

    odpowiedz
  80. Marcin 15 lat temu:

    A tera trochę inne pytanie ;)

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

    odpowiedz
  81. Marcif 15 lat 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
  82. Burger 15 lat temu:

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

    odpowiedz
  83. marsjaninzmarsa 15 lat 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
  84. Szymon Skulimowski 15 lat 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
  85. marsjaninzmarsa 15 lat temu:

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

    odpowiedz
  86. Nomex 15 lat temu:

    @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.
    @marsjaninzmarsa – działa u Ciebie ten kod?

    odpowiedz
  87. Marcif 15 lat 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
  88. Szymon Skulimowski 15 lat 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
  89. amistad18 15 lat 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
  90. Marcif 15 lat 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
  91. marsjaninzmarsa 15 lat 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
  92. Nomex 15 lat 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
  93. Janusz 15 lat 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
  94. Marcin 13 lat temu:

    Witam,
    czy ktoś może mi pomóc?

    wszystko zrobiłem jak Ninja kazał i nic, nie ma lightboxa…

    odpowiedz
  95. Jakub Milczarek 13 lat 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
    1. Szymon Skulimowski 13 lat temu:

      Zgadza się.

      odpowiedz
    2. Jakub Milczarek 13 lat temu:

      No to cieszę się, że mogłem pomóc, a przy okazji podlansowałem ten wpis na FB :)

      odpowiedz
    3. Szymon Skulimowski 13 lat temu:

      Dzięki x 2 :-).

      odpowiedz
  96. SpeX 13 lat 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
  97. lakier 13 lat 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
  98. Skrypty php 13 lat temu:

    Genialne

    odpowiedz
  99. Franciszek 13 lat 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
    1. Szymon Skulimowski 12 lat temu:

      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.

      odpowiedz
  100. ktosiek 13 lat 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
    1. Szymon Skulimowski 12 lat temu:

      Niekoniecznie. Czasem trzeba do iframe dodać taki argument:

      wmode=transparent

      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")
      });
      
      odpowiedz
  101. mar 12 lat temu:

    tylko, 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

    odpowiedz
    1. Szymon Skulimowski 12 lat temu:

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

      odpowiedz
  102. Bartek 12 lat temu:

    Wiam!

    Mam problem z liveboxem nie odtwarza mi się. Pokazuje się białe okienko przy otwarciu miniatury i nic więcej.
    Bardzo bym prosił o pomoc:)

    odpowiedz
    1. Szymon Skulimowski 12 lat temu:

      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.

      odpowiedz
  103. Wojtek 12 lat temu:

    Witam, 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??

    odpowiedz
    1. Wojtek 12 lat temu:

      Dodam ze chodzi o strone http://mich2.linuxpl.info.

      odpowiedz
    2. Szymon Skulimowski 12 lat temu:

      Prawdę mówiąc to w tym momencie nic nie działa na Twojej stronie. Nie mam więc jak sprawdzić i podpowiedzieć.

      odpowiedz
  104. Paweł 12 lat temu:

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

    odpowiedz
    1. Szymon Skulimowski 12 lat temu:

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

      odpowiedz
  105. Damian 12 lat temu:

    Cześć,

    co zrobić jeśli w opcjach „ustawieniach zaawansowanych” obrazka nie ma pytania o „Rel pliku” gdzie mogę to wstawić, albo co zrobić?

    Gdy dodam rel="lightbox" po alt albo szerokości obrazka za pomocą edytora HTML w WP to zostaje to po przełączeniu do trybu wizualnego skasowane.

    odpowiedz
    1. Szymon Skulimowski 12 lat temu:

      W WordPressie 3.5 fraza „Rel pliku” została zastąpiona przez „Relacja (XFN)”.

      odpowiedz
  106. Łukasz 12 lat temu:

    Witaj,
    ś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

    odpowiedz
    1. Szymon Skulimowski 12 lat temu:

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

      odpowiedz
  107. pawel 12 lat temu:

    witaj 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

    odpowiedz
    1. pawel 12 lat temu:

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

      odpowiedz
    2. pawel 12 lat temu:

      chodzi mi dokładnie o http://www.weekend-bus.pl/galeria.html

      odpowiedz
    3. Szymon Skulimowski 12 lat temu:

      Hej Paweł,

      chyba nie zaktualizowałeś ścieżek do plików graficznych:

      http://c/Users/Sabina/Desktop/Kopia%20Kopia%20tadek/images/06072012201.jpg

      a powinno być:

      www.weekend-bus.pl//images/06072012201.jpg

      Gdyby po podmianie nadal nie działało to daj znać.

      Sz.

      odpowiedz
    4. pawel 12 lat temu:

      hej 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

      odpowiedz
    5. pawel 12 lat temu:

      Szymon. Wszystkie obrazki maja poprawiony adres tak jakby ten sam, ale tylko 2 z nich otwierają się przez ligtboxa dlaczego??

      odpowiedz
    6. Szymon Skulimowski 12 lat temu:

      To 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();
      odpowiedz
  108. Darek Jasińskid 12 lat temu:

    Szkoda, że w WP ta wersja Lightboxa jest jakoś tak okrojona :/

    odpowiedz
    1. geraf 12 lat temu:

      Nic dziwnego, to jest wersja sprzed kilku lat…

      odpowiedz
  109. michal 12 lat temu:

    mam panie szymonie mały problem. Chciałbym w pewnym projekcie wrzucić ładowanie lightboxa po css klasie zamiast rel. Jak dodaje zmienną $('a.lightbox').lightBox(); do kodu to nic się nie dzieje

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

    odpowiedz
    1. Szymon Skulimowski 12 lat temu:

      Chyba podesłałeś zupełnie inny kod (wygląda na skrypt do pokazu slajdów) :-).

      odpowiedz
    2. michał 12 lat temu:

      Dokł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/

      odpowiedz
    3. Szymon Skulimowski 12 lat temu:

      Pierwsze co możesz zrobić to dostosować kod do tego co już masz czyli zamiast $('a.lightbox').lightBox(); powinno być jQuery('a.lightbox').lightBox();.

      odpowiedz
    4. michał 12 lat temu:

      dziękuje. w JS mam małe doświadczenie. jakoś mnie nigdy nie ciągnęło. A widzę się przydaje

      odpowiedz
    5. michał 11 lat temu:

      przepraszam ze pisze dopiero ale brak czasu i dwa inne projekty. nadal to nie działa…

      odpowiedz
    6. Szymon Skulimowski 11 lat temu:

      Trudno coś poradzić bez zajrzenia w kod HTML. Czy mógłbyś podać adres strony, na której skrypt powinien działać?

      odpowiedz
  110. Frank 11 lat temu:

    ciekawe jak zorganizować setki zdjęć wykorzystywane w galerii? WP wrzuca wszystkie w jedną kupkę i jak się w niej grzebać gdy kupka staje się……kupą?

    odpowiedz
    1. Szymon Skulimowski 11 lat temu:

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

      odpowiedz
  111. Filu 11 lat temu:

    Cześć,
    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
    Filu

    odpowiedz
    1. Szymon Skulimowski 11 lat temu:

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

      odpowiedz
    2. Filu 11 lat temu:

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

      odpowiedz
    3. Paweł 11 lat temu:

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

Dodaj własny komentarz


Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 95

Odnośniki z innych stron

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