publikacja: 3 listopada 2008, autor: , komentarzy 80 https://wpninja.pl/artykuly/zabawy-z-lightboksem-2-konfiguracja/

Zabawy z „lightboksem” #2: konfiguracja

Zabawy z „lightboksem” #2: konfiguracja

poprzedniej części miałeś okazję dowiedzieć się czym jest tzw. „efekt lightbox” i poznać dwa sposoby na jego integrację ze swoim WordPressem. Teraz dowiesz się jak dopieścić jego wizualną stronę w paru prostych krokach.

Dopieszczać, nie dopieszczać?

Możesz zastanawiać się po co w ogóle dalej majstrować przy naszym lighboksie. W końcu działa on tak jak należy. I tutaj masz całkowitą rację – wszystkie opisane poniżej czynności nie są obowiązkowe i równie dobrze możesz je pominąć. Jestem jednak pewien, że Twoja strona czy blog sporo zyska jeśli zdecydujesz się poświęcić kilkanaście minut na wprowadzenie paru modyfikacji:

Stwórz polską wersję językową

Lightbox, który zaimplementowałeś zawiera nieznaczną ilość tekstu i grafiki w języku angielskim:

Elementy, które trzeba przetłumaczyć na polski

Na zamieszczonym powyżej obrazku możesz zauważyć 4 takie elementy:

  • tekst "Image x of y"
    pojawia się w lewym dolnym rogu gdy mamy więcej niż jeden obrazek,
  • grafikę "CLOSE X"
    jest widoczna zawsze w prawym dolnym rogu,
  • grafikę "PREV"
    pojawia się w lewym górnym rogu gdy istnieje poprzedni obrazek i gdy najedziemy myszką na lewą część aktualnie wyświetlanej grafiki,
  • grafikę "NEXT"
    pojawia się w górnym prawym rogu gdy istnieje następny obrazek i gdy najedziemy myszką na lewą część aktualnie wyświetlanej grafiki.

Powinieneś więc wziąć na warsztat plik jquery.lightbox-0.x.min.js i następujący ciąg znaków:

txtImage:'Image',txtOf:'of'

zamienić na:

txtImage:'Obrazek',txtOf:'z'

Tekst załatwiony, teraz czas na grafikę.

W katalogu ze skryptem znajdziesz trzy następujące pliki:

  • lightbox-btn-close.gif,
  • lightbox-btn-next.gif,
  • lightbox-btn-prev.gif.

Jeśli jesteś obcykany w podstawach grafiki to wystarczy teraz abyś odpalił swój ulubiony program i w paru prostych krokach podmienił teksty.

Możesz także skorzystać z mojego zestawu, który przygotowałem ;-):

Mój zestaw przetłumaczonej grafiki

Podmień animację ładowania pliku

Animacja ta przedstawia obracające się kółeczko i jest wyświetlana gdy komputer pobiera w tle grafikę do wyświetlenia (z faktycznym postępem w pobieraniu nie ma ona nic wspólnego ponieważ jest to zwykły animowany gif ale tak na marginesie :-)).

Ajaxload - generator animowanych gifów ala web 2.0 :-)

Przy wyborze nowej animacji możesz posłużyć się stroną Ajaxload. Z sekcji „generator” wybierz animację, resztę opcji pozostaw tak jak jest i kliknij na „generate it” aby zobaczyć poniżej efekt a następnie na „download it” aby pobrać plik na dysk.

Nazwę pobranego pliku zamień na lightbox-ico-loading.gif i podmień z plikiem umieszczonym w katalogu lightboksa na serwerze.

Dodaj tekst „Proszę czekać…”

Dodatkowa informacja tekstowa

Aby dodać dodatkowy tekst tuż pod animowanym gifem powinieneś otworzyć plik jquery.lightbox-0.x.min.js i zaraz za ciągiem znaków:

<a href="#" id="lightbox-loading-link"><img src="'+settings.imageLoading+'"></a>

dodać:

<p>Proszę czekać...</p>

Ustaw skróty klawiszowe

Nasz lightbox wyposażony jest w skróty klawiszowe, które w znaczący sposób ułatwiają nawigację pomiędzy kolejnymi obrazkami. Standardowo są to następujące klawisze:

  • „p”, który działa jak kliknięcie na odnośnik "PREV" / "POPRZEDNI",
  • „n”, który działa jak kliknięcie na odnośnik "NEXT" / "NASTĘPNY",
  • „c”, który działa jak kliknięcie na odnośnik "CLOSE" / "ZAMKNIJ".

Aby zmienić standardowe klawisze powinieneś ponownie otworzyć plik jquery.lightbox-0.x.min.js i odpowiednio zmienić następujące ciągi znaków:

  • keyToPrev:'p' (poprzedni)
  • keyToNext:'n' (następny)
  • keyToClose:'c' (zamknij)

Dla przykładu – aby zmienić klawisz zamykania z „c” na „z” należy trzeci ciąg zamienić na następujący:

  • keyToClose:'z'

Naucz się dodawać podpisy

Podpis wyświetlany jest w lewym dolnym rogu, tuż pod obrazkiem. Aby go ustawić powinieneś w edytorze WYSIWYG kliknąć na obrazek a następnie na ikonkę wstaw/edytuj link. W okienku, które się pojawi uzupełnij pole tytuł a całość zatwierdź przyciskiem aktualizuj.

Czyli jak wstawić podpis do obrazka :-)

Ustaw szybkość animacji

Aby ustawić szybkość animacji lighboksa (dostosowywanie boksa do rozmiarów zdjęcia) powinieneś odnaleźć w pliku jquery.lightbox-0.x.min.js ciąg znaków:

containerResizeSpeed:400

400 oznacza czas z milisekundach (0,4 sekundy). Zmniejszając wartość przyspieszysz animację a zwiększając spowolnisz :-).

Ustaw kolor i wartość wypełnienia ekranu

Gdy lightbox jest uruchamiany ekran zostaje przyciemniony do pewnej wartości. W pliku jquery.lightbox-0.x.min.js znajdziemy dwie wartości:

overlayBgColor:'#000'

#000 określa kolor wygaszenia ekranu. Zapisany jest on w postaci heksadecymalnej.

overlayOpacity:0.8

0.8 określa stopień wypełnienia tła ustawionym wcześniej kolorem (0 – brak wypełnienia, 1 – całkowite wypełnienie, wartości pomiędzy – efekt przenikania).

Komentarze

  1. cortez 8 lat temu:

    Świetna sprawa z ajaxload.info, wlasnie szukalem podobnego zbioru. Big up! :)

    odpowiedz
  2. Ravicious 8 lat temu:

    Lightbox został „odpicowany” ;)

    odpowiedz
  3. Maciej Płoński 8 lat temu:

    Przydatne. Czas w końcu przezwyciężyć prokrastynację i zainstalować lightbox.

    odpowiedz
  4. dzg 8 lat temu:

    moze bys podrzucił rara z odbicowanym lightboxem;>:P

    odpowiedz
  5. Kamil 8 lat temu:

    A mi tam podoba sie SIMPLEVIEWER GALLERY, moze nie integruje sie tak ladnie z WP jak LIGHTBOX ale efekt tez jest ladny, polecam ;-) przykład: http://www.my-mobile.com.pl/gallery
    Popieram kolegę z tym praktycznym pomyslem z pliczkiem rar z całą edytowaną juz wersją wtyczki LIGHTBOX w wersji PL :-)

    odpowiedz
  6. Szymon Skulimowski 8 lat temu:

    Popieram kolegę z tym praktycznym pomyslem z pliczkiem rar z całą edytowaną juz wersją wtyczki LIGHTBOX w wersji PL :-)

    I pozbawić Was tej całej frajdy związanej z majsterkowaniem wewnątrz własnego WordPressa? Nigdy! :-).

    odpowiedz
  7. dzg 8 lat temu:

    sknera ;p

    odpowiedz
  8. Maciej Płoński 8 lat temu:

    I pozbawić Was tej całej frajdy związanej z majsterkowaniem wewnątrz własnego WordPressa? Nigdy! :-).

    Dobrze, tak trzymaj ;)

    odpowiedz
  9. Jacek Krużycki 8 lat temu:

    A ja się zastanawiam dlaczego lighbox wyłapuje obrazki ze strony z wpisem a z głównej już nie :)
    Wie ktoś?

    odpowiedz
  10. Szymon Skulimowski 8 lat temu:

    Wie ktoś?

    Jakiś link? :-)

    odpowiedz
  11. Jacek Krużycki 8 lat temu:

    Do strony, na której problem występuje?
    Mój blog http://kruzyk.eofe.info

    odpowiedz
  12. Szymon Skulimowski 8 lat temu:

    Tak też myślałem ale wolałem się upewnić. Twoja strona sfiksowała bo wpis wyświetla w wersji okrojonej, biało-niebieskiej (pewnie dla urządzeń przenośnych). Na domiar złego – tam lightboks nawet we wpisach nie łapie :-).

    odpowiedz
  13. Jacek Krużycki 8 lat temu:

    Zaraz sprawdzę… mam wtyczkę viewmobi czy jakoś tak.
    Nie rozumiem, jaka wersja okrojona? Przecież przeglądarki IE, FF i Opera normalnie wyświetlają bloga…
    Lightbox nie działa TYLKO na stronie głównej, na stronie wpisu już działa :/

    odpowiedz
  14. Szymon Skulimowski 8 lat temu:

    Spójrz:
    http://img522.imageshack.us/img522/7884/fireshotcapture62kruzykjv4.jpg
    Tak wygląda teraz Twoja strona i zapewniam, że nawet we wpisie lightbox nie działa.

    odpowiedz
  15. Jacek Krużycki 8 lat temu:

    oO

    jaki UserAgent masz ustawiony w przeglądarce?

    Mi pod operą, FF i IE normalnie wyświetla… :/

    odpowiedz
  16. Szymon Skulimowski 8 lat temu:

    Teraz jest już ok :-).

    Porównaj to co masz na stronie wpisu:

    <a rel="lightbox[160]" href="http://kruzyk.eofe.info/wp-content/uploads/2008/10/2720236690_a8fd894345.jpg">
    <img src="http://kruzyk.eofe.info/wp-content/uploads/2008/10/2720236690_a8fd894345-264x300.jpg" alt="" width="114" height="130" />
    </a>

    Z tym co masz na stronie głównej:

    <a rel="nofollow" href="http://kruzyk.eofe.info/wp-content/uploads/2008/10/2720236690_a8fd894345.jpg">
    <img height="130" width="114" alt="" src="http://kruzyk.eofe.info/wp-content/uploads/2008/10/2720236690_a8fd894345-264x300.jpg"/>
    </a>

    Można z tego wyciągnąć wniosek, że skrypt lightboksa bierze pod uwagę te odnośniki, które mają przypisany parametr „rel” o odpowiedniej wartości. Odnośniki na stronie głównej tego nie mają.

    Lipna wtyczka :-).

    odpowiedz
  17. Jacek Krużycki 8 lat temu:

    Używam Lightbox2 oraz wtyczki Nofollow from Home – przydatnej przy linkowaniu zewnętrznym…

    odpowiedz
  18. Szymon Skulimowski 8 lat temu:

    Spróbuj wyłączyć wtyczkę „Nofollow from Home” – być może gryzie się w tej właśnie kwestii z Lightboksem2. Swoją drogą… to nie jest przecież odnośnik zewnętrzny (do obrazka) więc ta wtyczką sama w sobie nawala :-).

    odpowiedz
  19. Jacek Krużycki 8 lat temu:

    Albo to coś innego jest :)
    Zaraz sprawdzę. Swoją drogą to czy wtyczka jest w stanie rozróżnić wewnętrzny link od zewnętrznego?

    odpowiedz
  20. Szymon Skulimowski 8 lat temu:

    Swoją drogą to czy wtyczka jest w stanie rozróżnić wewnętrzny link od zewnętrznego?

    Nie znam wtyczki, tak wywnioskowałem po jej nazwie. Jej autor pisze u siebie:

    Nofollow from Home is a WordPress plugin which adds rel=nofollow to all external links only in your posts, and only on your home page.

    Z tego wynikałoby („external” to zewnętrzny), że wtyczka powinna łapać tylko zewnętrzne odnośniki. Powinna :-).

    odpowiedz
  21. Jacek Krużycki 8 lat temu:

    Powinna, racja :)
    Niestety cały dzień się borykam z moim hostingiem SkyNetHosting… Dlatego nie mogłem sprawdzić kompatybilności obu wtyczek. Zrobię to jutro i dam znać.

    odpowiedz
  22. Jacek Krużycki 8 lat temu:

    Faktycznie po wyłączeniu wtyczki Nofollow from Home, na głównej bardzo ładnie działa Lightbox2 :)

    odpowiedz
  23. Damian 8 lat temu:

    No na reszcie dzisiaj wziąłem się za tego lightboxa.
    Bardzo dobrze, że zrobiłeś taki poradnik bo wcześniej miałem jako plugin do wordpressa, ale zauwazyłem jak sprawdzałem szybkość wczytywania strony, że elementy lightboxa bardzo wydłużają czas ładowania.

    odpowiedz
  24. Szymon Skulimowski 8 lat temu:

    @Damian,

    Cieszę się, że skorzystałeś na lekturze artykułu. W planach mam napisanie jeszcze jednej części o tworzeniu galerii zdjęć.

    odpowiedz
  25. glabek94 8 lat temu:

    Ja lightboksa używam od dawna :P. Sam sobie go odpicowałem, ale tylko obrazek close zmieniłem (pozdrawiam adminów gimpuj.info :P . Reszta pozostała bez zmian. No ew. grzebałem sobie w js.

    odpowiedz
  26. Livio 8 lat temu:

    Hm, jednak ten Lightbox jest ok. Mój blog już go używa, po zmianie selektora na bardziej wybredny :] .

    Dzięki!

    PST: Jesteś już w czytniku RSS ;) .

    odpowiedz
  27. Żuku 8 lat temu:

    Witaj!
    Na początku chciałbym podziękować za wspaniałe artykuły :-)! Świetna robota!
    A teraz mam małe pytanko odnośnie dodawania napisu „proszę czekać”. Wybrałem sobie większego gifa i tekst wyświetla się na nim. Da się go jakoś obniżyć?

    Mój wp: http://vivalaart.pl/7/?cat=5

    Pozdrawiam!

    odpowiedz
  28. greg 8 lat temu:

    czołem, mam pytanie
    Już raz użyłem lightboxa w wersji 2.03 do pokazywania obrazków na stronie znajomej.
    Teraz dla innej strony z galerią zdjęć skorzystałem z nowej wersji 2.04 i wszystko jest OK tylko w przeglądarce Firefox 3.0.10, obrazek wyświetla się na dole ekranu, w połowie ukryty.
    W innych przeglądarkach IE Opera czy Safari, jest poprawnie, czyli obraze wyświetla się w grnej częsci ekranu.

    Ma ktoś pomysł, ja to ulepszyć.

    odpowiedz
  29. Szymon Skulimowski 8 lat temu:

    Wybrałem sobie większego gifa i tekst wyświetla się na nim. Da się go jakoś obniżyć?

    Pozostaje Ci chyba tylko odpowiednie ostylowanie CSS-em tego elementu.

    odpowiedz
  30. albatros 8 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
  31. Nomex 8 lat temu:

    Czy ktoś próbował zrobić na wyświetlającej się galerii czy też zdjęciu jakieś własne logo, znak wodny czy też nazwę strony? Szukam już dłuższy czas wtyczki która potrafiła by automatycznie dopisywać logo serwisu lub nazwę do każdego wgrywanego zdjęcia na portal.

    odpowiedz
  32. Szymon Skulimowski 8 lat temu:

    Powinieneś spróbować przeszukać katalog wtyczek po frazie „watermark”:
    http://wordpress.org/plugins/search.php?q=watermark

    Jeśli miałbym wybrać coś na szybko to zacząłbym od Flexible Upload-a.

    odpowiedz
  33. Nomex 8 lat temu:

    Dziękuje Szymon za podpowiedź. Zaproponowana przez Ciebie wtyczka wykrzaczyła mi wordpressa więc znalazłem http://wordpress.org/plugins/super-image-plugin/ która spełnia moje oczekiwania :) Nie jestem tylko do końca przekonany czy oby teraz nie ma problemu z wgrywaniem masowym zdjęć ale sprawdzę.

    odpowiedz
  34. zuut 8 lat temu:

    Czołem, mam pytanie
    chodzi o pozycjonowanie okienka lightboxa na ekranie
    Jak zrobić aby okienko z obrazkiem otwierało się powiedzmy 20 pix od górnej krawędzi ekranu każdej przeglądarki czyli tych najbardziej popularnych IE, Fox czy Opera.
    Na stronie robinej rok temu z poprzednią wersją lightboxa jakimś cudem okienko się otwiera wysoko, chociaż mogłoby jeszcze wyżej. Patrz: http://www.scislowska.pl
    Ostatnio przygotowałem zestaw zdjęć do prezentacj w lghtboxie do innej strony (jeszcze nie wisi) i testując wychodzi mi, zwłaszcza w Foxie, że okienko bardzo nisko na dole, do tego stopnia, że jest widoczna tylko górna jego połowa. Czyli aby zobaczyć obrazek trzeba całą stronę przewinąć trochę w dół.
    Czy jest jakiś sposób na precyzyjne pozycjonwanie otwierających się okienek na stronie przeglądarki? Czy można coś dodać do skryptu lightboxa? Czy raczej trzeba coś zakombinować z tegiem i marginesami ?
    Dzięki za odpowiedź.

    odpowiedz
  35. Pablito 8 lat temu:

    Cześć,
    Pisze w sprawie poruszanej przez zuut`a i greg`a odnośnie obrazka wyskakującego na dole ekranu w Firefox. Też pojawił się u mnie ten problem i dosłownie nigdzie w necie nie mogłem znaleźć odpowiedzi na ten problem, nawet na anglojęzycznych portalach. To strasznie frustrująca sprawa, ten obrazek i to, że nikt nie odpowiedział na ten problem. Otóż zauważyłem, że problem pojawił się z powodu dużej wysokości (długości) strony, na której wykorzystywałem ten skrypt. Gdy ją skróciłem – pozbyłem się dużej ilości treści problem zniknął. No tak, ale nie mogłem pozbyć się tej treści na stałe. Kombinowałem z plikiem lightbox.css, ale nic nie pomagało. Wreszcie znalazłem dziada :) Siedzi w pliku lightbox.js. Jest tam część kodu ustalająca położenie naszego obrazka w pionie i poziomie [cyt. (// calculate top and left offset for the lightbox)]. W linii 231 ustawiamy wysokość obrazka:
    var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
    Nie jestem programistą, ale amatorem znającym angielski :) i doszedłem do tego, że skrypt bierze całą wysokość strony i dzieli ją przez 10. Żeby rozwiązać problem można zwiększyć liczbę, przez którą będzie dzielona wysokość albo usunąć tę część:
    + (document.viewport.getHeight() / 10)
    programiści pewnie znajdą inne rozwiązania ale dla mnie to wystarczy. Jeszcze pokombinuję z kodem, może uda mi się dokładnie ustalić pozycje obrazka.
    Pozdro dla wszystkich

    odpowiedz
  36. Pablito 8 lat temu:

    Już mam sposób :)
    w linii 231 zostawiamy tylko to:
    var lightboxTop = arrayPageScroll[1];
    w linii 233, która wygląda tak:
    this.lightbox.setStyle({ top: lightboxTop + ‚px’, left: lightboxLeft + ‚px’ }).show();
    w miejscu lightboxTop + ‚px’ wpisujemy odpowiednią ilość pikseli o jaką chcemy oddalić obrazek od góry.
    Pozdro

    odpowiedz
  37. Pablito 8 lat temu:

    Ups… sorry. Usunięcie + (document.viewport.getHeight() / 10); powoduje problem gdy stronę przesuniemy w dół. wtedy obrazek leci daleko w dół. lepszym sposobem będzie zamiast 10 podzielić przez np. 100 i nic więcej nie kombinować. Wtedy wszystko działa poprawnie.
    Pozdro

    odpowiedz
  38. Pablito 8 lat temu:

    W końcu znalazłem na jakiejś zagranicznej stronie. Gość zrobił tak samo jak ja tylko dodał jeszcze 50 na koniec i faktycznie działa świetnie.
    var lightboxTop = arrayPageScroll[1] + ((document.viewport.getHeight() / 100) + 50);
    Ta liczba na końcu ustala odległość od top-u i działa dla IE, który bez niej wyświetla obrazek na samym topie bez odstępu.

    odpowiedz
  39. zuut 8 lat temu:

    Pablito, zmieniłem wg Twoich ostatnich wskazówek, jest super.
    Wpisałem 100 i a wysokość zadeklarowałem na + 30
    Działa w IE, Opera, Firefox i Safari, z tym, że w tych dwóch pierwszych o otwiera okno dokładnie 30 pix od górnej krawędzi, a w Firefoxie i Safari dodaje jeszcze dodatkowo swój własny margines, który ma tak na oko 50 pix.
    Dzięki wielkie.
    pozdrawiam

    PS – eksperymentuje jeszcze z napisami, może podzielę się doświadczeniem, jak coś rewelacyjnego mi wyjdzie ;-)

    odpowiedz
  40. Marian 8 lat temu:

    Witam. Wie ktoś może jak wpisać pozycję obrazka – miniaturki? Chce np wstawić obrazek na środek ekranu a później kliknąć na niego. Zawsze gdy podaje adres miniaturki to mam go w lewym górnym rogu a ja chcę umieścic galerie w dowolnym miejscu na ekranie

    odpowiedz
  41. Marian 8 lat temu:

    PROSZĘ O POMOC!

    odpowiedz
  42. Pablito 8 lat temu:

    Marian, jesli to jest w html-u to nie ma najmniejszego problemu. Podaj stronę na ktorej pracujesz, a bede mogl Ci dokładnie powiedziec jaki kod zastosować.

    odpowiedz
  43. Szymon Skulimowski 8 lat temu:

    @Marian, Nie jestem pewien czy dobrze Cię zrozumiałem – może jakieś zrzut ekranowe?

    odpowiedz
  44. Marian 8 lat temu:

    Witam raz jeszcze. Rozchodzi mi sie o to ze nie mam kontroli nad pozycją zdjęc miniatur http://www.montazwykladzin.com.pl/betamynewsite/ a chciałbym mieć galerie równiutko poukładaną jak tutaj: http://www.groovebusterz.com/ – podlink galeria.

    odpowiedz
  45. Marian 8 lat temu:

    Miniatury zdjęć po podaniu ich adresu zawsze mi sie wczytują w lewy górny róg i nie wiem jak to zmienic aby kontrolować miejsce ich wczytywania

    odpowiedz
  46. Pablito 8 lat temu:

    Marian, to są podstawy html-a. Radzę poczytać jakiś prosty tutorial. Znajdziesz tam takie rzeczy jak pozycjonowanie obrazków. Jeśli nie chce Ci się czytać, to tak po krótce: możesz zastosować tag Tutaj wklej swój pierwotny kod. To wyśrodkuje Ci obrazki w poziomie. Polecam jednak zapoznać się z tworzeniem tabel – tag itd. To da Ci pełną kontrolę nad galerią. Pozdrawiam

    odpowiedz
  47. Marian 8 lat temu:

    Nie miałem nigdy dotąd problemu z pozycją zadnego obrazu dopóki nie wrzuciłem lightboxa do kodu strony. Kod wrzucenia obrazka w sekcji wyglądał tak:
    i tutaj miałem wszystko jak na dłoni: rozmiar obrazka i pozycję. Natomiast kod obrazka w lightboxie u mnie wygląda tak:


    Gdzie okreslane są tylko rozmiary miniaturki. Próbowałem dodać do tego kodu: div style=”position:absolute; overflow:hidden; left:442px; top:229px; – pozycja zmienia sie, ale wtedy cały efekt lighboxa przestał działać. Poszukam jeszcze w skryptach java.

    odpowiedz
  48. Marian 8 lat temu:

    Dzieki za info

    odpowiedz
  49. Marian 8 lat temu:

    Ok juz rozwiązałem problem: podejrzałem sobie kod html z tej strony: http://www.morcinek.pl/galeria.html

    odpowiedz
  50. zuut 8 lat temu:

    Jak wspomniał wyżej kolega, warto poznać pisanie skryptów w html, chociażby podstawy.
    W każdej przeglądarce możesz podglądnąć jak oglądana strona jest zapisana w html’u, w pasku u góry, w meniu widok, podgląd lub podobne, w rozwinięciu znajdziesz pozycję „źródło strony” i na to kliknij.
    Wtedy wyświetli się cały zapis strony w html’u.
    Poniżej załączam prościutką przykładową stronę, ze wstawioną w tabelą wycentrowaną. Tabela, tak jak np. w Wordzie, ma 3 kolumny i 9 rzędów co daje 27 komórek.
    Do każdej komórki możesz wstawić miniaturkę, a także ją wycentrować albo dobic do lewego czy prawego boku komórki.
    Szerokość całkowitą tabeli oraz poszczególnych kolumn z komórkami mozna też określić precyzyjnie w pixelach.
    Więcej nie mam czasu Ci tłumaczyć, musisz sam poszukać i pokombinować, no i poznać chociaż podstawy html’a. Ten cały kod poniżej skopiuj i wklej u siebie, a potem dalej go katuj.
    Powodzenia

    katowanie w htmlu



     
     
     

     
     
     


     
     


     
     


     
     

     
     
     

     
     
     

     
     
     

    odpowiedz
  51. Pablito 8 lat temu:

    No widzisz Marian, da radę. Cieszę się, że rozwiązałeś problem, a już pisałem Ci cały laborat :).
    Pozdro

    odpowiedz
  52. zuut 8 lat temu:

    cholera na da rady to wpisać skryptu
    więc Adminie wywal te puste strony

    odpowiedz
  53. Marian 8 lat temu:

    Mój problem polegał na tym ze zle wstawiałem komende pozycji obrazka do kodu lightboxa Taki banał a zeszło mi troche. Pozdrawiam i dziekuje za pomoc

    odpowiedz
  54. Janusz 8 lat temu:

    Witam wszystkich.
    Siedzę od 2 godzin i szperam w google poszukując rozwiązania mojego problemu.
    Jak na razie bez rezultatu…:/
    Może ktoś mi pomoże za co z góry dziękuję…:)
    Zapakowałem na moją stronę lightboxa 2 oczywiście do przeglądania zdjęć.
    Wszystko funkcjonuje bez zarzutu.
    Chciałbym jednak coś zmienić a mianowicie:
    Chcę udostępnić oglądającemu możliwość zapisania zdjęcia.
    (po kliknięciu prawym przyciskiem w menu kontekstowym nie ma zapisz obraz jako…)
    Oto adres strony http://www.zjednoczeni.com.pl przykład lightboxa jest w dziale zawody- wyniki.

    Pozdrawiam wszystkich Janusz.

    odpowiedz
  55. Marcin 7 lat temu:

    Można „z góry” ustalić maksymalną wielkość zdjęcia? Czyli by większe zdjęcie było automatycznie skalowane do określnej wielkości?

    odpowiedz
  56. zuut 7 lat temu:

    Janusz
    Nie mam pomysłu jak sprawić aby wyświetlany obrazek można było sobie zapisać. Generalnie Lightbox zapobiega kopiowaniu wyświetlanych zdjęć czy obrazków, co można oczywiście obejść przy pomocy scrap screena itp programików. Dla użytkowników przeglądarki Firefox jest to ułatwione zadanie. Wystarczy zainstalować jeden z wielu darmowych dodatków/add-ons dla Firefoxa, np. Screengrab, do pobrania tutaj:
    https://addons.mozilla.org/pl/firefox/addon/1146
    który pozwala na zrzut ekranu albo na selekcji/fragmentu ekranu, czyli zapisania zdjęcia
    Polecam.

    Natomiast na Twojej stronie o szermierce zdjęcia wyświetlają się wg. mnie za nisko od górnej krawędzi ekranu. Miałem z tym również problem, ale Pablito znalazł rozwiązanie, które doskonale się sprawdziło. Oto jak sobie z tym poradzić.

    Chodzi o pozycjonowanie okienka Lightboxa 2.04 na ekranie przeglądarki/przeglądarek.
    W Lightbox 2.04 są 3 pliki JavaScript, nas interesuje pliku lightbox.js który trzeba edytować i skorygować, a potem zapisać. Przewijamy skrypt aby dotrzeć do linii 231.
    W linii 231 jest określone miejsce wyświetlanego na ekranie obrazka/zdjęcia:
    var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
    Skrypt bierze całą wysokość strony i dzieli ją przez 10 pól od góry do dołu, aby wyświetlić obrazek w górnym polu. Żeby dokładniej określić miejsce wyświetlania obrazka można zwiększyć liczbę pól/części, przez którą będzie dzielona całkowita wysokość strony:
    + (document.viewport.getHeight() / 10)
    czyli zamiast 10 wpisać 100 pól/części
    ale także trzeba wpisać wysokość, licząc od górnej krawędzi strony w przeglądarce, dla górnej krawędzi wyświetlanego obrazka/zdjęcia, np. 30 pixeli (albo 20 pix)
    co wygląda ostatecznie tak:
    var lightboxTop = arrayPageScroll[1] + ((document.viewport.getHeight() / 100) + 30);

    powodzenia

    odpowiedz
  57. Pablito 7 lat temu:

    Marcin
    Ja po prostu obrabiam najpierw zdjęcie w programie graficznym i ustawiam rozmiar dużego obrazka taki jaki chcę. Myślę, że to lepsze rozwiązanie niż ustawiać to w Lightbox, bo co zrobisz gdy duże zdjęcia wyświetli ci dobrze, a małe rozciągnie i tym samym rozmaże?
    Janusz
    Też nie wiem jak zmienić skrypt, żeby przeciętny użytkownik mógł zapisać sobie zdjęcie. Ktoś kto ma choć drobne pojęcie o html-u i da sobie radę z zapisaniem zdjęcia hoćby po kodzie strony.
    Odkryłem też, że gdy strona się wczytuje, trzeba szybko kliknąć prawym przyciskiem na zdjęcie (zanim jeszcze załaduje się Lightbox) wtedy pokazują sie standardowe opcje „Zapisz obraz jako” i po kłopocie :)
    Pozdro

    odpowiedz
  58. kosa 7 lat temu:

    A może mi ktoś powiedzieć jak zrobić jak jest większy obrazek żeby on automatycznie mieścił się w oknie strony tak jak w skrypcie PopBox.js ???

    odpowiedz
  59. Arek 7 lat temu:

    witam,
    wrzuciłem lightboxa 2 na stronę, i mam z jedną rzeczą problem. Mianowicie jak powiększa się zdjęcie, brakuje image’a CLOSE (po prawej stronie pod zdjęciem) ale jest odnośnik, bo klikając w pustą przestrzeń zamyka zdjęcie. Jak zrobić, żeby CLOSE był widoczny?

    odpowiedz
  60. Pablito 7 lat temu:

    Arek,
    W katalogu głównym strony musi być katalog z obrazkami do lightboxa`a, nazywa się images. Jeśli zmieniłeś jego lokalizację, nazwę, albo w ogóle go nie wrzuciłeś to efekt jest taki, że nie widać obrazka close i innych obrazków tj. prev, next i kółka ładowania.
    Pozdro

    odpowiedz
  61. feet tattoos 6 lat temu:

    Your site design looks cool. What template did you use ?

    odpowiedz
    1. Szymon Skulimowski 6 lat temu:

      Thanks. I made it by myself.

      odpowiedz
  62. wirtualna polska 6 lat temu:

    to bardzo fajna sprawa , jednak mysle , ze zbyt obciazaja serwer przy stronach o bardzo duzej odwiedzajnosci .

    odpowiedz
  63. Szymon Skulimowski 6 lat temu:

    W jaki sposób obciąża serwer?

    odpowiedz
  64. sligo 5 lat temu:

    Mam pytanie zbliżone do użytkownika Jacek Krużycki, a mianowicie mam zainstalowaną wtyczkę jQuery lightBox i efekt porządany działa przy pojedynczym wpisie, natomiast na stronie głównej z większą ilością wpisów wszystko się sypie i wyświetla zdjęcia jakby w nowym oknie (tak jakby to byl tylko link i otwiera zdjęcie zamiast strony).
    Co może byc tego przyczyna i jak to naprawić?

    odpowiedz
    1. sligo 5 lat temu:

      chodzi o stronę –> http://tnij.com/2nQUo
      z góry dzięki za wszelkie sugestie! :)

      odpowiedz
  65. pibe 5 lat temu:

    Mam następujące pytanie do Twojego super pożytecznego i ciekawego artykułu.

    Staram się przenieść wszystkie pliki do katalogu skórki, w której to ma działać. Przeniosłem plik jquery do katalogu „js” w głównym katalogu skórki. W „header.php” dodałem następujący wpis:

    <script type="text/javascript" src="/wp-content/themes/moja_skórka/js/jquery.lightbox-0.5.min.js”>

    I to działa. Natomiast gdy podobnie zastosuję dla pliku „css” ze stylem:

    <link type="text/css" rel="stylesheet" href="/jquery.lightbox-0.5.css” media=”screen” />

    to nie działa wyświetlanie sterowania lightboxem (poprzedni, następny, zamknij).

    Możesz mi podpowiedzieć Szymonie jak to zrobić, by wszystkie pliki mogły się znaleźć w katalogu skórki, bez konieczności kopiowania czegokolwiek do katalogu pluginów?
    Pozdrawiam

    odpowiedz
  66. Lukasz 5 lat temu:

    @Pible
    takie odwołanie się do cssa nigdy nie zadziała :) to nie jest stronka statyczna tylko WP. Musisz dać href=”/jquery.lightbox-0.5.css”

    Pozdrawiam!

    odpowiedz
  67. pibe 5 lat temu:

    Lukasz, źle podałem ścieżkę, to fakt. Nie działa, gdy wkleję coś takiego:

    <link type="text/css" rel="stylesheet" href="/jquery.lightbox-0.5.css” media=”screen” />

    A np dla prettyPhoto podobna ścieżka działa bez problemu.

    odpowiedz
  68. pibe 5 lat temu:

    No właśnie, zjada połowę kodu :)

    W href powinno być php bloginfo(‚template_directory’) przed /jquery.lightbox-0.5.css

    I to właśnie nie działa. Czemu?

    odpowiedz
  69. Marcin S. 5 lat temu:

    Witam !
    Świetny art. mam jeden problem wrzucając czasami zdjęcia, które mają rozdzielczość 1024 x 765 i nie mieszczą się w oknie przeglądarki jak zadeklarować max wysokość zdjęcia – żeby skalowało/ obcinało ?

    odpowiedz
    1. Szymon Skulimowski 5 lat temu:

      Wymieniony w artykule skrypt tego nie potrafi. Jeśli zależy Ci na tej funkcji (słusznie) to polecam Fancyboxa.

      odpowiedz
  70. Tomek 4 lata temu:

    Wielkie dzięki za spolszczone przyciski

    odpowiedz
    1. Szymon Skulimowski 4 lata temu:

      Dzięki za komentarz :)

      odpowiedz
  71. Piotr 4 lata temu:

    A ja mam pytanko z innej beczki. Po otwarciu galerii, za każdym razem animują się przyciski next i prev, ale mam z tym problem, poniważ to strasznie odwraca uwagę od treści zdjęcia i już kilka osób zwróciło mi uwagę na ten fakt. Przyciski „next” i „prev”jest przesuwane od góry do 15% wielkości zdjęcia. Jak mogę usunąć?
    Znalazłęm w pliku jquery.lightbox.js w linii 280, i poniżej, to co mnie interesuje, ale nie znam się na JavaScripcie, żeby to spokojnie zmodyfikować.

    odpowiedz
    1. Piotr 4 lata temu:

      Dodam tylko, że napisałeś ciekawy artykuł i dziękuję Ci za podzielenie się swoją wiedzą.

      odpowiedz
    2. Szymon Skulimowski 4 lata temu:

      Dzięki! Czy mógłbyś podać adres strony, na której można to zobaczyć?

      odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron

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

  1. Alternatywy dla Lightbox / Lightboks | IT Tech Blog

    […] dla popularnego Lightboxa2. Tematem zainteresowałem się po wpisie na wpnija.pl traktującym o dostosowywaniu skryptu tak aby zajmował jak najmniej miejsca a więc aby jak najmniej opóźniał ładowanie […]

  2. Lightbox | Notatnik

    […] Opis dodatkowej konfiguracji (m. in. spolszczenie) można znaleźć tutaj: Zabawy z „lightboksem” #2: konfiguracja. […]