Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te Lightbox Efektli Galeri Nasıl Eklenir

Işık kutusu efektli bir galeri eklemek, resimlerinizin daha büyük bir formatta görüntülenmesini sağlayarak onları güzel bir şekilde sergiler.

Bu, ziyaretçiler sayfadan uzaklaşmadan görselleri görebildiği için kullanıcı etkileşimini artırır ve sitenizin içeriğini daha dinamik hale getirir.

Ancak, varsayılan WordPress galeri bloğu ışık kutularını desteklemez.

Geçtiğimiz birkaç yıl boyunca, test sitelerimizde ve müşteri web siteleri oluştururken lightbox efektli resim galerileri oluşturmak için Envira Gallery’yi kullandık.

Son derece acemi dostu ve güvenilir olduğunu gördük, bu da herkesin çok fazla teknik bilgiye sahip olmadan çarpıcı galeriler kurmasını kolaylaştırıyor.

Bu makalede, WordPress’te lightbox efektli bir galeriyi nasıl kolayca ekleyebileceğinizi adım adım göstereceğiz.

Add a Gallery in WordPress with a Lightbox Effect

WordPress Galerilerine Neden Işık Kutusu Efekti Ekleyelim?

WordPress web sitenizdeki galerilere duyarlı bir ışık kutusu efekti ekleyerek resimlerinizi daha profesyonel bir şekilde sergileyebilirsiniz. Bu efekt, bir kullanıcı tıkladığında fotoğraflarınızı web sitenizde bir açılır pencerede görüntülemenizi sağlar.

Işık kutuları ziyaretçileriniz için daha sürükleyici bir görüntüleme deneyimi yaratmanıza yardımcı olur ve hatta resimlerinizi sosyal medyada paylaşmalarını veya bilgisayarlarına indirmelerini kolaylaştırır.

Lightbox preview

Bir fotoğrafçılık web siteniz varsa, bir ışık kutusu efekti eklemek, kullanıcıların yüksek çözünürlüklü resimlerinizi dikkat dağıtmayan bir modda görüntülemesini sağlayarak etkileşimi artıracaktır.

Benzer şekilde, bir WooCommerce mağazanız varsa, ürün galerilerinize bir ışık kutusu efekti eklemek, müşterilerin ürünü yakından görmesine ve bilinçli bir karar vermesine yardımcı olabilir.

Bunu söyledikten sonra, adım adım lightbox efektli bir WordPress resim galerisinin nasıl kolayca ekleneceğini görelim.

Lightbox Efektli WordPress Galerisi Nasıl Eklenir

Envira Gallery‘yi kullanarak lightbox efektli bir WordPress galerisini kolayca ekleyebilirsiniz.

Web siteniz için tamamen duyarlı ve modern resim galerileri oluşturmanıza olanak tanıyan en iyi WordPress galeri eklentisidir.

Envira Gallery ayrıca süper hızlıdır ve sürükle-bırak oluşturucu, profesyonel galeri şablonları ve etiket ekleme, ses, sosyal paylaşım ve ışık kutuları gibi birçok özelliğe sahiptir.

Öncelikle Envira Gallery eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Not: Envira Gallery’nin bu eğitim için kullanabileceğiniz ücretsiz bir eklentisi de vardır. Ancak, ücretli plana yükseltmek size daha fazla özelliğe erişim sağlayacaktır.

Etkinleştirmenin ardından, lisans anahtarını girmek için WordPress yönetici kenar çubuğundan Envira Gallery ” Ayarlar sayfasını ziyaret edin.

Bu bilgileri Envira Galeri web sitesindeki hesabınızdan alabilirsiniz.

Add the Envira Gallery license key

Bundan sonra, kendi yeni galerinizi oluşturmaya başlamak için WordPress kontrol panelinden Envira Galeri ” Yeni Ekle sayfasını ziyaret edin.

Buradan, resim galerisi için bir başlık yazın. Ardından, görüntüleri yüklemek için ‘Bilgisayarınızdan Dosya Seçin’ düğmesine tıklayın. Galerinize medya kütüphanesi görüntüleri eklemek istiyorsanız, ‘Diğer Kaynaklardan Dosya Seç’ düğmesine tıklayın.

Bu, galeri resimlerini yükleyebileceğiniz medya kitap lığını başlatacaktır. Medya kitaplığından bir seferde yalnızca bir resim yükleyebileceğinizi unutmayın.

Add images to the gallery

Bunu yaptıktan sonra, ‘Şu anda Galerinizde’ bölümüne ilerleyin. Burada, sol sütunda ayarlarla birlikte sağ tarafta galerinizin bir önizlemesini göreceksiniz.

Şimdi, ekranda ‘Meta Verileri Düzenle’ istemini açmak için her bir resmin üstündeki kalem simgesine tıklayın.

Click the pencil icon to open the Edit Metadata screen

Buradan, tek tek resimler için başlık, durum, başlık ve alt metin ekleyebilirsiniz.

Bundan sonra, ayarlarınızı kaydetmek için ‘Meta Verileri Kaydet’ düğmesine tıklamayı unutmayın.

Configure image metadata

Ardından, galerinizin düzenini beğeninize göre değiştirmek için sol sütundan ‘Yapılandırma’ sekmesine geçin. Buradan bir düzen, sütun sayısı, resim boyutu, boyutlar, temalar ve daha fazlasını seçebilirsiniz.

Ayrıntılı talimatlar için WordPress’te bir resim galerisinin nasıl oluşturulacağına ilişkin başlangıç kılavuzumuza bakın.

Configure gallery layout

Bunu yaptıktan sonra, sol sütundan ‘Lightbox’ sekmesine geçin ve ‘Enable Lightbox?’ seçeneğini işaretleyin.

Bundan sonra, ‘Galeri Işık Kutusu Teması’ açılır menüsünden bir ışık kutusu teması seçin. ‘Eski’ seçeneğini seçerseniz, ışık kutusu efekti istemi daha eski bir düzene sahip olacaktır.

‘Taban (Koyu)’ seçeneği seçildiğinde, ışık kutusu istemi düzen olarak koyu bir tabana sahip olacaktır.

Enable the lightbox option

Ardından, lightbox isteminde resim başlığını mı yoksa resim yazısını mı görüntülemek istediğinizi seçmelisiniz. İsterseniz her ikisini de görüntüleyebilir veya hiçbirini görüntülemeyebilirsiniz.

Bunu yaptıktan sonra, açılır menüden ışık kutusu için görüntü boyutunu seçin.

Configure image title and size for the gallery

Bundan sonra, ‘Galeri Oklarını Etkinleştir’ seçeneğini işaretleyin. Işık kutusu isteminde artık izleyicilerin galerinizdeki farklı görüntülere geçmek için kullanabileceği iki ok gösterilecektir.

Işık kutunuz için geçiş efekti, açma/kapama efekti, ışık kutusu üst boyutunu etkinleştirme ve daha fazlası dahil olmak üzere diğer ayarları da yapılandırabilirsiniz.

İşiniz bittiğinde, değişikliklerinizi kaydetmek için en üstteki ‘Yayınla’ düğmesine tıklamayı unutmayın.

Configure other lightbox options in Envira Gallery

Resim galerinizi bir WordPress sayfasına/yazısına eklemek için sayfayı blok düzenleyicide açın.

Burada, blok menüsünü açmak için ekranın sol üst köşesindeki blok ekle ‘+’ düğmesine tıklamanız gerekir. Ardından, Envira Galeri bloğunu sayfaya / gönderiye ekleyin.

Add the Envira Gallery block

Bundan sonra, bloğun içindeki açılır menüden yeni oluşturduğunuz resim galerisini seçin. Son olarak, ayarlarınızı kaydetmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.

Artık resim galerisini görüntülemek için WordPress blogunuzu ziyaret edebilir ve ardından ışık kutusu efektini görmek için herhangi bir resme tıklayabilirsiniz.

Lightbox effect gif

Alternatif: WordPress’te Resim Portföyleri ve Galerileri Oluşturmak için NextGen Gallery’yi Kullanın

Envira Gallery, WordPress web sitenize lightbox görüntüleri eklemek için en iyi seçenektir. Alternatif olarak, WordPress sitenizde tamamen duyarlı ve görsel olarak hoş galeriler ve portföyler oluşturmak için NextGEN Gallery ‘yi kullanabilirsiniz.

NextGEN Gallery, çok çeşitli galeri türlerini desteklediği, e-ticaretle ilgili özelliklere sahip olduğu ve filigran, ışık kutusu, resim yorumları ve daha fazlasını eklemenize olanak tanıdığı için en iyi Envira Gallery alternatifidir.

Ayrıca NextGEN Gallery, Stripe veya PayPal aracılığıyla çevrimiçi ödemeleri kabul etmenize olanak tanıyarak resimlerinizi çevrimiçi olarak satmanızı kolaylaştırır.

NextGen Gallery

Profesyonel fotoğrafçılar, grafik tasarımcılar ve görsel sanatçılar için özelliklere sahip gelişmiş bir galeri eklentisidir ve piyasadaki en iyi WordPress portföy eklentilerinden biridir.

Ayrıntılı talimatlar için WordPress sitenize nasıl portföy ekleyebileceğinizi anlatan eğitimimize göz atabilirsiniz.

Bu makalenin ışık kutusu efektli bir WordPress galerisini nasıl kolayca ekleyebileceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress’te temel resim düzenlemenin nasıl yapılacağına ilişkin başlangıç kılavuzumuza ve blog yazılarınız için daha iyi resimler oluşturmaya yönelik en iyi araçlar için uzman seçimlerimize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

44 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    Thanks for recommending Envira Gallery. I make websites on Elementor, and apart from Elemenotr, I only knew NextGen gallery, which does not completely meet my requirements. I will definitely give the plugin a try and probably replace the NextGen Gallery I’ve been using with it.

  3. Muhammad Danial Emran

    Hi, I want to ask if using a lightbox effect will affect my website speed.

    • WPBeginner Support

      It should not cause your site to slow down.

      Yönetici

  4. Ahmed Omar

    thank you for the post, but here a question would it make difference if I used Using the WordPress Block Editor to add photo gallery than using Envira ?

    • WPBeginner Support

      Envira has more tools and customization options than the default gallery :)

      Yönetici

  5. E

    I’m so glad I found this article and this website. Love you guys right now!

  6. Lynsey

    I love you! Is there any way to make the thumbnails smaller?

  7. Sandeep Singh

    I am really Thankful for the suggestion to add Lightbox effect to the gallery. I really appretiate such kind of support and hope same for the future.

  8. Mike

    Hello,

    This is great, one question though is there a plugin or anything that is out there to make the gallery into a slideshow. For example say the first attached images shows up large and below are the thumbs of all the image in the gallery and you can click on a image to change the large image rather than a lightbox effect.

    Thanks,

    Mike

    • Renee

      Pretty sure that Fancybox plugin does that. You can enable or disable lightbox and thumbnails.

  9. Emma Beatty Howells

    Thanks for a great solution I am new to all this and am trying to work out the easiest way to manage photogalleries on line – this keeps it simple and elegant! Something else I found useful was an App that watermarks photos with the minimum of fuss… ‘ImageBucket’.

  10. Tiaan

    Thanks, works like a bomb!

  11. Michael

    Seems easy enough. Is there a way to have captions under each picture? Also, when it opens to a lightbox, is there a way to have descriptive text in the lightbox with the image?

  12. Alex

    I have a banner at the top of my website which displays a picture. When it opens the lightbox, the banner still appears over it. Is there any way, a code or something, which will stop this?

    Thanks
    Alex

    • Editorial Staff

      Probably happening because your banner has a very high z-index value set. Lower that value in your CSS. There are a lot of CSS tutorials covering z-index on the web.

      Yönetici

  13. JulieBozza

    This is a really cool solution, thank you! So much quicker and neater than what I was doing…
     
    Is there a way, however, to choose which of the images appears as the main thumbnail? That is, the thumbnail that appears in the ‘feed’ before you open up the individual post.
     
    Thank you in anticipation!

    • wpbeginner

       @JulieBozza The thumbnail for the post is selected by using Featured Image feature. In your post editor, look at the right hand side, below publish button there should be a box in that line called Featured image.

      • JulieBozza

         @wpbeginner Hello! Thanks for the reply. Unfortunately when I do that, it changes the banner image, but has no effect on the thumbnail in the post. I’m using the Twenty Eleven WordPress theme, so perhaps it’s giving the banner the priority, as it were.

        • wpbeginner

           @JulieBozza You are referring to these gallery thumbnail images right??? 

        • wpbeginner

           @JulieBozza The gallery works like it should. 
           
          http://rupertfyoung.com/category/gallery/ << If you are referring to the thumbnail image here, then that is controlled by your Featured Image or the first attachment I believe. Upload a featured image that is low in width (thumbnail size or something)… And it will not take over the header image.

  14. wpbeginner

    @ukdazza The problem is with your site rather than this plugin. jQuery issues like these are very common. There is another jQuery that is causing this plugin to not work. You would have to change positions of the other jQuery code.

    This is a game of trial and error when you encounter problems like these.

  15. ukdazza

    I’m having a problem where we’re using slickr flickr plugin to create thumbnail galleries with lightbox features. However the lightbox isn’t working at all. According to the notes I can find online about this kind of problem with this plugin, it is likely there is more than one lightbox or more than one jQuery running – causing it to not run properly.

    Lightbox doesn’t work. If you click a thumbnail it opens the image in the browser, which is rubbish.

    Any ideas? I hoped you or someone might have an idea because I tried to install this plugin and it said the destination was already taken.

  16. TGA

    Wow. Thank you SO much. I was using NextGEN gallery, but wasn’t allowed to let my client have galleries with thumbnails of various sizes. (Dumb). So I realized using the native gallery that would be possible, but then Highslide wouldn’t create a thumbnail viewer like it would with NextGEN. Point being, this was a lifesaver! It may not be perfect, but it’s A solution and now I can move on with the project!

  17. wpbeginner

    @TejSanusi✔ This plugin has a way for users to view the next image as part of the same lightbox.

  18. TejSanusi✔

    Is there anyway to create a lightbox gallery that is enabled from one thumbnail. When the user clicks on the thumbnail, the lightbox is created, with a series of gallery images?

  19. Chris

    Thanks for the great writeup. I found this extremely useful. I do have a question though. What if I had a pretty large gallery of about 40 or 50 pics and I only wanted one of them displayed in the post and then when someone clicks on it they’d be able to scroll through the entire gallery? Is this possible? I’d rather not have all 40 pics displayed in my post and I think this would be useful.

    Thanks!

  20. Keith Davis

    Nice one boys.
    Never knew that Wordpress had a gallery function… do you guys know everything?

    Might actually use this one day.

  21. jonathan perrodin

    Hey thanks for this, I’ve been wanting to get this on my site, but was too lazy to look for a plugin that did it simply. This was perfect.

  22. Mike Roberts

    I am an artist and illustrator and I continue to be disappointed by the options for displaying a gallery of images in WordPress. I live in hope that, sometime soon, some bright coder will answer my plea!

  23. Gretchen

    I didn’t realize how hard it was to find a lightbox plugin that used the native WordPress gallery function until I started looking for one! I ended up with http://wordpress.org/extend/plugins/lightbox-plus/ because of its ability to specify via shortcode in each post/page gallery whether it was to use the lightbox setting or not. I actually like to use the attachment pages sometimes, and needed a lightbox plugin that would allow me to choose when to use it. I’d be curious to hear if anyone else has found another lightbox plugin with that feature.

  24. Bronson

    Thanks for the information.

    It’s great to be able to apply the lightbox effect to native galleries trather than having to go and manually recreate them.

  25. Sonu

    How this works ? and do we need a lightbox class to every image on gallery ?

    • Editorial Staff

      No you don’t need to lightbox class every image on the gallery. It automatically does that for all images in the gallery. The class should be added on any other image that you have aside from the gallery..

      Yönetici

  26. Binoy

    The problem here is all the images in post show up on gallery. Any options to select images?

        • Editorial Staff

          Thanks for sharing this plugin. Updating the article to add this :)

    • Preston

      Each image should have some kind of wordpress number associated with it. I exclude images in the gallery with this code, hopefully it works for you:

      [gallery link="file" exclude="Photo#, Photo#, Photo#"]

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.