Lightbox eklentisi. WordPress için en iyi lightbox eklentileri. Fotoğraf galerisi LightBox2 - kurulum ve yapılandırma

Sitede fotoğraf galerisi oluşturma

fotoğraf Galerisi Lightbox2- kurulum ve konfigürasyon

Önceki makalelerden birinde en popüler ücretsiz fotoğraf galerisinden bahsedilmişti - Hafif kutu, betik kitaplığı temelinde oluşturuldu jQuery. tabanda Hafif kutu web tasarımcıları birçok ilginç klon geliştirdiler, ancak orijinal sürüm hala geliştirilmekte ve birçok sitedeki fotoğraf galerileri için başarıyla kullanılmaktadır. En son güncellemesini düşünün - eklenti Lightbox2, boyutu küçüktür ve her zaman olduğu gibi siteye kurulumu kolaydır. nerede Lightbox2çekici bir tasarıma sahiptir, tüm tarayıcılarda çalışır ve özellikle güzel olan, büyük resimleri doğru bir şekilde görüntüler ve bunları kullanıcının ekran boyutuna sığdırmak için sıkıştırır.

Eklenti geliştiricisi Lightbox2- Lokesh Dhakar, San Francisco'dan programcı. Siteye yüklemeye çalışacağımız Lightbox v2.7.1'in şu anda (2014) sürümü mevcuttur. Kullanarak tek bir görüntünün açılmasına bir örnek Lightbox2şekilde gösterilmiştir.

LightBox2 Fotoğraf Galerisini Yükleme

Önemli Not: siteniz birden fazla eklenti kullanıyorsa jQuery, o zaman jquery.js dosyasını (tercihen en son sürüm) birkaç kez indirmemek için kök klasöre aktarmak daha uygundur. Bu durumda, referans satırı tüm eklentiler için aynı görünecektir. Özellikle, örneğimiz için şöyle çıkıyor:
.
Bir sayfada birkaç farklı sürüm kullanılması önerilmez. jQuery böylece birbirleriyle çelişmezler. Aynı zamanda, eklentileri yüklü sürümle kontrol ettiğinizden emin olun. jQuery, çünkü tüm sürümler birbiriyle değiştirilemez.

Şimdi istediğiniz resimleri site sayfasına yerleştirmeniz gerekiyor. Her zamanki gibi, her biri bir küçük resim (küçük) ve küçük resimden bağlantı verilen tam boyutlu bir resim (büyük) olarak sunulmalıdır. Bağlantı etiketinde, tek bir görüntü için ek olarak rel="lightbox" - belirtiriz ve birkaç fotoğrafı bir galeride birleştirmek istiyorsak, o zaman bir tire ile hepsi için aynı olan herhangi bir ifade, örneğin, rel= "ışık kutusu-bir"


ve benzeri.

Resimler için yazıt yapmak gerekirse, bunları bağlantıların başlığına yerleştiririz.
Üç resimden oluşan basit bir fotoğraf galerisi örneği şekilde gösterilmiştir:

Önemli Not: ana görüntünün boyutu ise ( büyük.jpg) kullanıcının tarayıcısının ekran boyutundan daha büyükse, Lightbox2 ekrana sığacak şekilde otomatik olarak ayarlar (küçültür). Aynı zamanda, büyütülmüş resim, görüntüleme için hangi cihazın kullanıldığına bakılmaksızın her zaman ekrana sığar: akıllı telefon, tablet veya yüksek çözünürlüklü monitör.

Bu nedenle, büyük bir görüntünün bir çözünürlük marjına, örneğin standart bir ekran için en az 1000 dikey piksele sahip olması arzu edilir. Full hd- 1920x1080. Örneğimizde bu, "Subbotnik" resmidir.

LightBox2 Fotoğraf Galerisini Özelleştirme

Fotoğraf galerisini özelleştirmek için dosyayı açın lightbox.js Not Defteri gibi herhangi bir HTML veya metin düzenleyicide. Dosyanın en başında mevcut ayarları göreceksiniz:
bu fadeDuration = 500; //görüntü açma süresi msn
this.fitImagesInViewport = doğru; //ekrana sığdır doğru/yanlış
this.resizeDuration = 700; //görüntü açılma süresi ms
this.positionFromTop = 50; // lightBox penceresini ekranın üstünden doldurma
this.showImageNumberLabel = doğru; //çıktı resim numarası doğru/yanlış
vesaire.

Ana olanlar Rusça yorumlarla sağlanır. Parametre değerlerini değiştirin ve dosyayı kaydettikten sonra lightbox.js Fotoğraf galerinizin bulunduğu sayfayı tarayıcıda açarak sonucu görebilirsiniz.

Galeri penceresinin arka plan rengi ve şeffaflığı, yazının rengi vb. gibi bazı parametreleri CSS dosyasında ayarlanır. lightbox.css. Yardımcı resimler (ileri, geri, yükleme, çıkış) klasörde bulunur img ve ayrıca beğeninize göre değiştirilebilirler.

Sitede fotoğraf galerileri, resim döngüleri ve slayt gösterileri oluşturmaya yönelik diğer programlar için " ve bölümüne bakın.

Bu yazıda, bir WordPress sitesinde Lightbox efekti için test edilen 14 WordPress Lightbox efekt eklentisini inceledim. Lightbox, bir fotoğrafın bir web sayfasında görüntülenmesinin, fotoğrafa tıkladığınızda kalıcı bir pencerede gerçekleştirildiği bir fotoğraf efektidir.

Kalıcı pencerede, fotoğraf orijinalin boyutuna büyütülür. Aynı zamanda sayfanın başka bir kısmı (arka plan) kararıyor, "ekran kapanıyor". Bu, site ziyaretçilerine sayfadan ayrılmadan görsele daha yakından bakma fırsatı verir. WordPress sitesinde Lightbox efekti için JavaScript kütüphaneleri kullanılmaktadır: jQuery, MooTools.

Işık Kutusu JS v2.0

• http://lokeshdhakar.com/projects/lightbox2/
• https://github.com/lokesh/lightbox2/

Lightbox JS, görüntüleri geçerli sayfaya yerleştirmek için kullanılan basit, göze batmayan, sistem dışı bir komut dosyasıdır. Tüm modern tarayıcılarda çalışır. Bu, Lokesh Dhakar'ın ilk Lightbox JS'sinin en son sürümüdür. Eklenti özellikleri şunları içerir:

• index.html
• js/jquery-1.7.2.min.js
• js/lightbox.js
• css/lightbox.css
• resimler / kapat.png
• resimler / next.png
• görseller/önceki.png
• Artı demo sayfası için bazı dosyalar

Işık Kutusu Artı Renk Kutusu

Lightbox Plus eklentisi, Lokesh Dhakar'ın Lightbox JS yöntemini uygulayan bir eklentidir (yukarıya bakın). Lightbox Plus, bir web sayfasının ekranında bir görüntü bindirmesi oluşturmak için kullanılır ve bindirilen görüntüye doğru bağlantıları otomatik olarak ekler. Lightbox Plus, bir WordPress lightbox'a resim galerileri ekleyebilir, basit slayt gösterileri, videolar, formlar ve harici içeriği (metinler) açılır pencere yer paylaşımlarında görüntüleyebilir. Arka sayfa, "boş sayfa" efekti olarak adlandırılan koyu veya açık bir arka planla karartılır.

https://github.com/AlekseyKorzun/LightBox-Gone-Wild-onLoad

Lightbox, büyük resimleri geçerli sayfanın üstünde görüntülemek için kullanılan küçük bir JavaScript kitaplığıdır. Kurulumu kolaydır ve tüm modern tarayıcılarda çalışır.

Komut dosyası, görüntüleri hem tekli hem de açılır pencere içinde geçiş yaparak görüntülemenizi sağlar.

Kullanım için talimatlar.

BÖLÜM I: Kütüphaneyi bağlama.

1. Komut dosyasını içeren arşivi buradan indirin ve paketinden çıkarın

2. JS klasöründe dosyaları bulun jquery-1.10.2.min.js Ve lightbox-2.6.min.js ve bunları sitenizdeki komut dosyalarınızın bulunduğu klasöre kopyalayın.

3. Etiketlerin arasına yazarak bu scriptleri sayfanıza bağlayın. aşağıdaki satırlar:

4. css klasöründe lightbox.css dosyasını bulun ve stil dosyalarınızın bulunduğu klasöre kopyalayın.

5. Bu dosyayı etiketler arasına yazarak sayfanıza bağlayın. aşağıdaki satırlar:

6. img klasöründen, aşağıdaki dosyaları sunucunuza, site tasarımınızın resimlerinin bulunduğu klasöre kopyalayın: ve sonraki.png. Bu dosyalar stil dosyasında kullanılır. lightbox.css. Varsayılan olarak stil dosyası, css klasörüyle aynı üst öğeye sahip olan img klasöründe bulunan görüntülere atıfta bulunur. Görüntüler klasörünüz ve stiller klasörünüz tamamen farklı klasörlerdeyse, lightbox.css dosyasındaki görüntülerin yollarını uygun olanlarla değiştirmelisiniz.

BÖLÜM II: Sayfaya resim ekleme.

Bu komut dosyası, bir bağlantıya tıklanarak tetiklenir. Bağlantı, metin veya resim olabilir. Komut dosyasına hangi bağlantıyı işlemesi gerektiğini söylemek için link niteliğini eklemeniz gerekir. veri ışık kutusu ve ona herhangi bir değer verin.

Tek resimler.

Bağlantı metni 1 Bağlantı metni 2 Bağlantı metni 3

* Başlık özelliği istenildiği gibi doldurulabilir. Doluysa, içeriği açılan görüntünün altında görüntülenecektir.

resim grubu.

Diyelim ki bir grup görüntünüz var ve bağlantılardan birine tıkladığınızda, açılır pencereyi kapatmak zorunda kalmadan bu gruptaki tüm görüntüler arasında gezinmek için bir açılır pencere istiyorsunuz.

Bağlantı metni 1 Bağlantı metni 2 Bağlantı metni 3

*LiteBox betiği için rel="lightbox" özniteliğini kullanıyordunuz. Şimdi de kullanabilirsiniz ve işe yarayacaktır, ancak daha fazla seçenek sunduğu için yeni özniteliklerin kullanılması tercih edilir.

Her şey yapılmış gibi görünüyor, her şey çalışmalı, ancak:

Görüntülerden bir grup resim oluşturursak, bir açılır pencerede görüntülerken, resimlerin altında belirtilir. resim 1/8? böyle bir şey görmek isterdim "resim 1/8".

Bunu yapmak için, lightbox-2.6.min.js dosyasının 13. satırında şunu değiştirmeniz gerekir:

"Görüntü" + b + "of" + c'yi döndür

" + c'nin " Görüntüsü " + b + "'yı döndür

Bu betiği en son kullandığımda, onu bir atlıkarınca betiğiyle birlikte kullanmam gerekiyordu, bu yüzden bir aksaklık fark ettim.

Aşağıda, aksaklığın açıklaması ve nasıl düzeltileceği açıklanmaktadır.

Sayfaya yerleştirilmiş 2 farklı resim grubumuz varsa ve örneğin birinci grupta resimlerin altyazıları var (title özelliği dolu), ikinci grupta ise title özelliğinde boş değerler var. veya hiç kayıtlı değilse, resimleri açıklamasız görüntülerken (daha önce açıklamalı en az bir resim görüntülemiştik), yine de son görüntülenen resmin açıklamasını göstereceğiz. Yani, komut dosyası açılır pencerenin başlığını silmeyi reddediyor, varsa onu yenisiyle değiştiriyor. Nasıl düzeltilir?

Başlık niteliğini temizlememe hatasını düzeltmek için 219. satırdaki lightbox-2.6.min.js dosyasındaki metni değiştirin:

if (typeof this.album.title !== "undefined" amp;amp;amp;amp;amp;amp; this.album.title !== "") ( this.$lightbox.find(".lb-caption) ").html(this.album.title).fadeIn("hızlı") )

İşimizin çok daha kolay hale geleceği en son web teknolojilerinin giderek daha fazlasının bizim için mevcut olması gerçekten harika. Kalıcı pencereler, kullanıcı dostu bir tasarım ve arayüz oluşturmaya odaklanan, her türlü HTML içeriğini görüntülemek için işlevsel bir öğedir.

Bu incelemede, geliştiricilerin ve tasarımcıların daha iyi ve daha profesyonel web siteleri oluşturmasına yardımcı olmak için jQuery lightbox kitaplıklarının ve komut dosyalarının bir listesini bir araya getirdik.

Aşağıdaki scriptleri sitenize kolayca ekleyebilirsiniz. O yüzden lafı daha fazla uzatmadan hemen işe koyulalım ve cephaneliğinize ekleyebileceğiniz bu süper jQuery lightbox kitaplıklarına bir göz atalım.

1. Fotoğraf kaydırma

PhotoSwipe, özellikle mobil cihazları hedefleyen CSS ve JavaScript tabanlı bir HTML fotoğraf galerisidir. Yazarlar, onu geliştirirken IOS ve Google mobil cihazları için resim görüntüleme hizmetlerini örnek olarak aldılar. PhotoSwipe, mobil bir sitede resimlerle çalışmayı kolaylaştıran tanıdık ve sezgisel bir arayüze sahiptir.

Tüm temel işlevler desteklenir: sonraki veya önceki resme gitme, yakınlaştırma, sürükleme, uzaklaştırma veya kapatma ve diğerleri.

2. Kaydırma Kutusu

Swipebox, masaüstü bilgisayarlar, akıllı telefonlar ve tabletler için bir jQuery eklentisidir. Mobil cihazlar için dokunmatik kontrolleri, masaüstü cihazlar için klavye navigasyonunu, jQuery kontrollerine geri dönüş ile CSS geçişlerini destekler ve kurulumu oldukça kolaydır.

Eklenti Chrome , Safari , Firefox , Opera , Internet Explorer 8+ , iOS4+ , Android , Windows Phone üzerinde test edilmiştir. MIT lisansı altında yayınlandı.

3. iLightbox

iLightBox, jQuery kullanarak çok güzel yanıt veren modeller oluşturmayı kolaylaştırır. Çok çeşitli medya içeriği desteğini harika dış görünümler ve kullanıcı dostu bir API ile birleştiren iLightBox, lightbox'ı olabildiğince mükemmel hale getirmeye çalışır. iLightBox, tam ekran görüntüleme, Retina uyumlu dış görünümler, dokunmatik olay yönetimi, HTML5 video için YouTube ve Vimeo entegrasyonu, güçlü JavaScript API sağlar. Eklenti ücretsiz destek ve sürüm güncellemelerine sahiptir.

4. Resim Işık Kutusu

Image Lightbox, IOS, Android ve Windows Phone için minimalist, genişletilebilir ve özelleştirilebilir bir eklentidir. CSS dönüşümlerini ve geçişlerini kullanarak bir sonraki görüntüyü klavyenizle kolayca yükleyebilirsiniz.

5. Muhteşem Açılır Pencere

Magnific Popup, en iyi kullanıcı-cihaz deneyimini sağlamaya odaklanan, ücretsiz yanıt veren bir jQuery eklentisidir. Çoğu ışık kutusu eklentisinin pencere boyutunu JS kullanarak tanımlaması gerekir. Magnific Popup'ta EM gibi göreli birimleri kullanabilir veya ışık kutusunu CSS medya sorgularıyla yeniden boyutlandırabilirsiniz.

6. Nivo Işık Kutusu

Nivo Lightbox esnek bir lightbox eklentisidir. Işık kutusunun görünümünü kolayca değiştirebileceğiniz birçok seçenek vardır. Örneğin temayı, geçiş efektini ve gezinme yöntemini değiştirin.

7.Lightcase

Lightcase, jQuery ile geliştirilmiş esnek, duyarlı ve genişletilebilir bir lightbox eklentisidir. Internet Explorer 7+ , Firefox , Opera , Webkit ve daha fazlası gibi tüm popüler tarayıcılarda harika çalışır. Eklenti fotoğraf, video, HTML5 video , Iframe , SWF ve AJAX çağrılarını destekler.

8. Lightlayer.js

LightLayer, herhangi bir ekrandaki diğer bileşenlerle iyi çalışan, yanıt veren bir ışık kutusu betiğidir. Bu komut dosyasının kullanımı gerçekten çok kolaydır. LightLayer birçok parametre üzerinde kontrol sağlar: arka plan rengi ve opaklık, ışık kutusu konumu, açma/kapama geçişleri ve diğer birçok özelleştirilebilir özellik.

9.Strip.js

Şerit, sayfanın yalnızca bir kısmına genişleyen bir ışık kutusudur. Bu, onu daha az müdahaleci hale getirir ve daha büyük ekranlarda diğer sayfa öğeleriyle etkileşim kurmanıza olanak tanır; mobil cihazlarda ışık kutusu klasik bir görünüme sahiptir. Strip, jQuery kullanır ve tüm büyük tarayıcılarda desteklenir.

10 Sıvı kutusu

Fluidbox, yüksek çözünürlüklü görüntüler için ideal olan göze batmayan, duyarlı bir lightbox sağlamak üzere tasarlanmış bir jQuery eklentisidir. Mobil cihazlarda harika çalışır ve güzel görüntüleri görüntülemek için daha yüksek çözünürlüklü ekranlarda da kullanılabilir.

11 tüy ışığı

Featherlight, 400 satır JavaScript, 100 satır CSS ve 6Kb'den küçük boyutuyla çok hafif bir eklentidir. Varsayılan olarak görüntüleri, AJAX'ı ve iframe'leri destekleyen akıllı, duyarlı bir ışık kutusu. Ayrıca ihtiyaçlarınıza göre özelleştirebilirsiniz. Featherlight, IE8+'da, tüm modern tarayıcılarda ve mobil platformlarda çalışır.

12. Yalp

Yalb, başka bir lightbox'ı ( Yet Another Lightbox ) temsil eder - ama değildir. Yalb, durumunu belirlemenize izin veren özel olayları içeren geniş bir arayüz seti ile birlikte gelir ( Açık - kapandı).

jQuery ile oluşturulmuş bir resim sitesiyle karşılaşırsanız, büyük olasılıkla bir ışık kutusu kullanacaktır. Bir ışık kutusunun gücü, basit bir resim kitaplığını bile çekici ve etkili bir galeriye dönüştürebilmesidir. Web tasarımı alanında jQuery için bu tür eklentilerin popülaritesi bu özellikte yatmaktadır.

JQuery topluluğu sayesinde, görüntü tasarımcıları için harika fırsatlar yaratan çok sayıda ışık kutusu eklentisi var. Eğiticimizde dikkat etmeniz gereken 15 farklı eklenti sunuyoruz.

takviye

TopUp, resimleri ve web sayfalarını dikkat çekmeden görüntülemek için kullanımı kolay bir JavaScript kitaplığıdır. Kitaplık, tarayıcılar arası uyumluluk ve kompaktlık için jQuery ve jQuery UI aracılığıyla yönetilir.

Yüksek slayt eklentisi

Highslide, resimleri, medyayı ve galerileri görüntülemek için özel bir araçtır.

renk kutusu

jQuery 1.3+ için küçük özel eklenti.

Lightbox 2, geçerli sayfada bir kaplama görüntüsünü görüntülemek için kullanılan basit, göze batmayan bir komut dosyasıdır. Kurulumu kolaydır ve tüm modern tarayıcılarda çalışır.

prettyPhoto yalnızca görüntüleri değil aynı zamanda video, flash, YouTube ve Ajax'ı da destekler. Medya dosyaları için Lightbox.

Slimbox 2, jQuery ile uygulanan Light box 2'nin 4 KB'lik bir klonudur.

Shadowbox, tüm popüler medya formatlarını destekleyen web tabanlı bir medya görüntüleyicidir. Shadowbox, JavaScript ve CSS'de yazılmıştır ve son derece özelleştirilebilir.

Pirobox Genişletilmiş V.1.0.

Bu eklentinin avantajlarından biri, gömülü içerikten .swf dosyasına, basit bir görüntüden .pdf dosyasına kadar her türlü dosyayı açabilmesidir.

Diğer harika özellikler arasında otomatik görüntü yeniden boyutlandırma ve sürükle ve bırak desteği bulunur.

GreyBox, web sitelerini, resimleri ve diğer içerikleri görüntülemek için kullanılabilir.

Super Box, pencereleri ışık kutusu efektiyle görüntüleyen bir eklentidir.