→ jQuery'li Işık Kutusu

Makale, eklentiyi çalıştırmanın bir örneğini sağlar ışık kutusu galerileri jquery'de ve buradan çalışma sürümünü indirebilirsiniz. Aslında bu şekilde çalışır:

Bu ışık kutusu uygulamasının iyi yanı, bir yapılandırma karması aracılığıyla kontrol edilebilmesidir. Çok kolay bir şekilde başlatılır. Eklentiyi çalıştırmak için 1.2.6 sürümünden itibaren herhangi bir jquery kitaplığına, ışık kutusu eklentisinin kendisine ve bir stil dosyasına ihtiyacınız vardır. Arşivde, hemen aşağıda bitmiş versiyonu bulunmaktadır. İndex.html dosyasını herhangi bir tarayıcıda indirin, çıkarın ve açın. Çalışmalı.

Umarım herkes nasıl başlayacağını anlar. Size sadece ışık kutusu ayarlarını nasıl yöneteceğinizi anlatacağım. Eklentinin IE 6'da çalışmadığını hemen not edeceğim ve bu nedenle "eşek" dışındaki her şey için başlatma koşulunu ayarladık. Sonraki bir tane daha önemli nokta: $(document).ready , çünkü DOM ağacı hazır olana kadar başlatma çalışmayacaktır. Başlatma sürecinin kendisi şu şekilde ilerler:

$("#galeri a").lightbox();

Kaynak kodu örneği:

if (!(navigator.userAgent.indexOf("MSIE 6") >= 0))( $(document).ready(function()( $("#gallery a").lightbox(); $.Lightbox.construct (( "hız": 500, "show_linkback": true, "keys": ( close: "q", önceki: "z", sonraki: "x" ), "opacity": 0,8, text: ( image: " Image", of: "from", close: "Close", closeInfo: "Resmin dışına tıklayarak görüntülemeyi sonlandırın.", help: ( close: "", interaktif: "Etkileşimli yardım" ), about: ( text: " ", başlık: "", bağlantı: "/index.shtml" ) ), dosyalar: ( resimler: ( önceki: "/demo/img/jquery-lightbox/prev.gif", sonraki: "/demo/img/ jquery -lightbox/next.gif", boş: "/demo/img/jquery-lightbox/blank.gif", yükleniyor: "/demo/img/jquery-lightbox/loading.gif" ) ) )); )); )

hız - fotoğrafın açılma ve kapanma efektinin milisaniye cinsinden hızı.

Karma parametre tuşları: kapat, önceki ve sonraki, galeri görünümü üzerinde alternatif kontrol sağlayan tuşlardır.

opaklık - karartılmış arka planın şeffaflığı. 0'dan 1'e kadar değer alır. Stil dosyasında arka plan rengi değiştirilebilir.

Dosya karmasında yuvalanmış görüntü karma parametreleri, arka plan görsellerine giden yollar, yükleme göstergesi animasyonu ve geri-ileri düğmeleridir.

Ayrıca metin karmasında gezinme yazılarını da değiştirebilirsiniz.

Eğer jQuery ile oluşturulmuş bir görsel sitesiyle karşılaşırsanız, büyük olasılıkla bir ışık kutusu kullanacaktır. Işı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 mevcut. Eğitimimizde dikkat etmeniz gereken 15 farklı eklentiyi sizlere sunuyoruz.

yükleme

TopUp, görüntüleri ve web sayfalarını göze batmadan 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 görselleri, 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, bir kaplama görüntüsünü bir ekran üzerinde görüntülemek için kullanılan basit, göze çarpmayan bir komut dosyasıdır. geçerli sayfa. 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 ışık kutusu.

Slimbox 2, jQuery ile uygulanan Light box 2'nin 4 KB'lik bir kopyasıdır.

Shadowbox, tüm popüler medya formatlarını destekleyen web tabanlı bir medya görüntüleyicidir. Shadowbox, JavaScript ve CSS ile yazılmıştır ve iyi fırsatlar ayarlar.

Pirobox Genişletilmiş V.1.0.

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

Diğer harika özellikler: otomatik değişim görüntü boyutu ve sürükleyip bırakma desteği.

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

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

Sitede fotoğraf galerisi oluşturma Fotoğraf Galerisi Işık Kutusu2- kurulum ve konfigürasyon

Önceki makalelerden birinde, muhtemelen en popüler ücretsiz fotoğraf galerisi olan, jQuery komut dosyası kitaplığı temelinde oluşturulan Lightbox'tan bahsetmiştim. Web tasarımcıları Lightbox'ı temel alarak birçok ilginç klon geliştirdi, ancak orijinal sürüm hala geliştirilmeye devam ediyor ve birçok sitedeki fotoğraf galerileri için başarıyla kullanılıyor. Bunu düşün Son Güncelleme- Boyutu küçük olan ve her zaman olduğu gibi siteye kurulumu kolay olan Lightbox2 eklentisi. Lightbox2 aynı zamanda çekici bir tasarıma sahiptir, tüm tarayıcılarda çalışır ve özellikle güzel olan, büyük resimleri doğru şekilde görüntüleyerek bunları kullanıcının ekran boyutuna sığacak şekilde sıkıştırır.

Lightbox2 eklentisinin geliştiricisi, San Francisco merkezli bir programcı olan Lokesh Dhakar'dır. Şu anda siteye yüklemeye çalışacağımız Lightbox v2.7.1'in (2014) sürümü mevcut. Şekilde LightBox2 kullanılarak tek bir görüntünün açılmasına ilişkin bir örnek gösterilmektedir.

LightBox2 fotoğraf galerisini yükleme LightBox2 fotoğraf galerisini yüklemek için öncelikle bir yeni dosya, elbette ışık kutusu2 olarak adlandırıyoruz. Bu klasör fotoğraf galerisi sayfasıyla aynı dizinde olmalıdır. Ardından arşivi indirin ve oluşturulan klasöre açın. İçinde iki komut dosyası (*.js), yardımcı resimler (img klasörü) ve css dosyası(*.css ). Ardından, yeni dosyalarımızın yollarını gösteren ... etiketinin içine gelecekteki fotoğraf galerisi gelecek şekilde sayfanın başlığına aşağıdaki satırları ekleyin:

Önemli Not: Siteniz birden fazla jQuery eklentisi kullanıyorsa, birden çok kez indirmemek için jquery.js dosyasını (tercihen en son sürümü) kök klasöre taşımak daha uygundur. Bu durumda referans çizgisi tüm eklentiler için aynı görünecektir. Özellikle, örneğimiz için şu şekilde ortaya çıkıyor:
.
Birkaç tane kullanılması önerilmez farklı versiyonlar jQuery'yi kullanın, böylece birbirleriyle çakışmazlar. Aynı zamanda eklentileri de kontrol ettiğinizden emin olun. yüklü sürüm jQuery'nin tüm sürümleri birbirinin yerine kullanılamaz.

Artık istediğiniz görselleri site sayfasına yerleştirmeniz gerekiyor. Her zamanki gibi, her biri küçük resim (küçük) ve küçük resimden bağlantı verilen tam boyutlu resim (büyük) olarak sunulmalıdır. Bağlantı etiketinde, tek bir görüntü için ek olarak rel="lightbox" ifadesini belirtiriz ve birkaç resmi bir galeride birleştirmek istiyorsak, hepsi için aynı olan herhangi bir ifadeyi bir tire işaretiyle kullanırız, örneğin, rel= "ışık kutusu-bir"


ve benzeri.

Resimler için yazı yazmak gerekiyorsa bunları bağlantıların başlığına yerleştiririz.
Üç resimden oluşan basit bir fotoğraf galerisi örneği şekilde gösterilmektedir:

Önemli Not: ana resim boyutu ise (big.jpg ) aşırı boyut Kullanıcının tarayıcısındaki ekran, ardından LightBox2 onu 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, örneğin en az 1000 dikey piksel gibi bir çözünürlük marjına sahip olması arzu edilir. standart ekran Tam HD - 1920x1080. Örneğimizde bu "Subbotnik" resmidir.

LightBox2 Fotoğraf Galerisini Özelleştirme

Fotoğraf galerisini özelleştirmek için lightbox.js dosyasını herhangi bir HTML veya Metin düzelticiörneğin Not Defteri'nde. Dosyanın en başında mevcut ayarları göreceksiniz:
bu solmaSüresi = 500; //görüntü açılma süresi ms
this.fitImagesInViewport = doğru; //ekran boyutuna 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 kısmından doldurma
this.showImageNumberLabel = doğru; //çıktı resim numarası doğru/yanlış
vesaire.

Ana olanlar Rusça yorumlarla sağlanmaktadır. Parametrelerin değerlerini değiştirin ve lightbox.js dosyasını kaydettikten sonra tarayıcıda fotoğraf galerinizin bulunduğu sayfayı açarak sonucu gözlemleyebilirsiniz.

Galeri penceresinin bazı parametreleri, örneğin arka plan rengi ve şeffaflığı, yazının rengi vb. Lightbox.css CSS dosyasında ayarlanır. Yardımcı resimler (ileri, geri, yükleme, çıkış) img klasöründe bulunur ve bunlar da sizin takdirinize göre değiştirilebilir.

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

Çeşitli resim galerilerini defalarca inceledim, muhteşem slayt gösterileri ve eklentilerden oluşan geniş bir koleksiyon topladım. Ayrıca kumbarada, ek js kitaplıklarına bağlanmadan yalnızca CSS3'te Lightbox da bulunmaktadır. Ancak zaman durmuyor, kullanıcılar internette gezinmek için giderek daha fazla çeşitli mobil cihazlar kullanıyor; bu, web öğelerinin ve özellikle "" efektli fotoğraf galerilerinin uyarlanabilirliğinin, web tasarımcılarının ve geliştiricilerinin önceliklerinden biri haline geldiği anlamına geliyor dikkat etmelidir.

15'ten başka bir seçki sunuyorum duyarlı jQuery hem masaüstü tarayıcılarla uyumlu hem de çeşitli tarayıcıların ekranlarına mükemmel uyum sağlayan eklentiler mobil cihazlar(dizüstü bilgisayarlar, akıllı telefonlar, tabletler vb.).

Geliştiricilerin web sitelerindeki demoyu izleyin, beğendiğiniz eklentiyi indirin ve yaratın, yaratın, yaratın...

1. iLightbox

iLighbox, geniş kapsamlı desteğe sahip hafif bir jQuery ışık kutusu eklentisidir. çeşitli türler dosyalar: resimler, videolar, Flash/SWF, Ajax içeriği, çerçeveler ve gömülü haritalar. Bu eklenti aynı zamanda düğmeler de ekler sosyal ağlar Kullanıcıların Facebook, Twitter veya Reddit aracılığıyla içerik paylaşmasına olanak tanır. Harika bir fırsat Normal ve tam ekran modlarında görüntüleyerek muhteşem slayt gösterileri, resim galerileri ve video klipler düzenleyin.

iLighbox oldukça hızlı çalışır ve mobil cihazlarda görüntülendiğinde işlenen içeriği fazlasıyla doğru şekilde görüntüler. Diğer şeylerin yanı sıra, bu eklentiyi kullanarak bilgi bloklarının çıktısını kalıcı bir pencere olarak kolayca uygulayabilirsiniz.

• Bağımlılık: jQuery
• Tarayıcı Desteği: IE7+, Chrome, Firefox, Safari ve Opera
• Lisans: Kim bilir)))

2. Kaydırma Kutusu

Kaydırma Kutusu (şimdiki değeri) jQuery eklentisi destek ile dokunmatik ekranlar mobil platformlar. Eklenti, görsellerin yanı sıra Youtube ve Vimeo'daki gömülü videoları da destekler. Swipebox'ı herhangi bir projeye eklemek çok kolaydır; eklenti, işlevselliğini ve davranışını özelleştirmek için çeşitli sezgisel seçeneklere sahiptir. Geliştiricinin sitesinde ayrıntılı belgeler Eklentiyi gereksiz su olmadan bağlama ve kullanma konusunda her şey yolunda, bu yüzden neyi, nerede ve nedenini anlamanın zor olmayacağını düşünüyorum.

• Bağımlılık: jQuery
• Tarayıcı desteği: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android ve Windows Phone
• Lisans: Belirlenmedi, belki şanslısın)))

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

JQuery veya Zepto.js için uzun zamandır bilinen ve köklü bir ışık kutusu eklentisi. Eklentinin yazarı, aşağıda bahsedeceğim PhotoSwipe eklentisinin de geliştiricisi olan Dmitry Semenov'dur. Bir jQuery/Zepto eklentisi olarak sunulan bu eklenti, PhotoSwipe'ta bulunmayan video desteği, harita görüntüleme ve Ajax içerik uygulaması gibi daha gelişmiş özelliklere sahiptir. kalıcı pencereler satır içi formlarla. Tüm kriterlere göre bu, web geliştiricisinin kafesindeki harika bir araçtır. Ayrı olarak, WordPress için bir eklenti ve bunun kurulumu ve kullanımına ilişkin ayrıntılı belgeler bulunmaktadır. Tek iç karartıcı şey, Rusça belge eksikliği, adı ve soyadına bakılırsa, yazar Rus gibi görünüyor, bunun zararlılığı nedeniyle ya da hilesinin hayali farkındalığı nedeniyle hiç anlamadı falan. Tamam, bunu kimin anlaması gerekiyor, biz de yumuşak kaynamış çay kaynatmadık))).

• Bağımlılık: jQuery 1.9.1+ veya Zepto.js
• Tarayıcı desteği: IE7 (kısmen), IE8+, Chrome, Firefox, Safari ve Opera
• Lisans: MIT lisansı

4. Fotoğrafı Kaydırma

• Bağımlılık: Javascript veya jQuery
• Tarayıcı Desteği
• Lisans: MIT lisansı

11 Tüy Işık

Az çok bilgili geliştiriciler için en gerekli tüm işlevlerle donatılmış 6k bit ışık kutusu eklentisi. Tüm yaygın içerik türlerini (metin, resim, iframe, Ajax) desteklemenin yanı sıra, ek bir tane bağlama yeteneği de vardır ve ayrıca bu eklenti için yeni bir içerik oluştururken ihtiyaçlarınızı tam olarak karşılayacak kendi uzantınızı da geliştirebilirsiniz. proje. Tüm bu ekonominin (uzantının geliştirilmesi) nasıl çalıştığını, gerçekten buna girmedim, ancak bu eklentinin eklediği kişilerin bunu anlayacaklarını düşünüyorum)).

• Bağımlılık: jQuery
• Tarayıcı desteği: IE8+, Chrome, Firefox, Safari ve Opera
• Lisans: MIT lisansı

12. Işık Galerisi

LightGallery, birçok özelliğe sahip çok işlevli bir ışık kutusu eklentisidir. Ek özellikler. Lightbox'ın en küçük ayrıntılarını özelleştirmek için 20'den fazla seçenekle birlikte gelir. Her şey burada, yani neredeyse her şey)). Düzgün bir şekilde düzenlenmiş küçük resimler, gezinme ve kayan küçük resimler içeren eksiksiz bir resim galerisi. Sırasız bir liste olarak basit html işaretlemesi

tam boyutlu görüntüler için data-src niteliğini kullanma. Aynı şey Youtube ve Vimeo'daki videolar için de geçerli. Tüm video formatları için mükemmel destek HTML5, MP4, WebM, Ogg... Animasyonlu küçük resimler, mobil uyumlu duyarlı düzen, slayt efektleri ve yumuşak geçişler görüntüleri ve diğer içerikleri değiştirirken görünüm. Dış görünüş CSS ile kolayca oluşturulup özelleştirilebilir. Görüntü önyüklemesi ve kod optimizasyonu. Masaüstü bilgisayarlar için klavyede gezinmenin yanı sıra ek simge yazı tiplerini kullanma yeteneği. LightGallery, gerçek "birleştirmenin" olduğu yerdir, asıl mesele, bu eklentinin çok sayıda ayarı ve kapsamlı yetenekleri arasında kaybolmamaktır.
İyi bir kaydırıcıya ihtiyaç duyanlar için aynı geliştiricilere dikkat etmenizi öneririm.
• Bağımlılık: jQuery
• Tarayıcı Desteği: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android ve Windows Phone
• Lisans: MIT lisansı



13.StripJS

Hatta alışılmadık bir şekilde söyleyebilirim: ışık kutusunun alışılmadık bir uygulaması, daha doğrusu, içeriğin olağan sunumu değil, bir ışık kutusu tasarımındaki bir görüntü veya video sağda göründüğünde, ekranın tamamını doldurmaz, yalnızca Açık verilen boyut tam boyutlu resim veya video. Açık büyük ekranlar bu yaklaşım açıktır, sayfayla etkileşime geçmek mümkün olmaya devam etmektedir. Tüm bu yenilikçi tasarım, mobil cihazların küçük ekranlarında sorunsuz bir şekilde klasik bir "ışık kutusuna" dönüşüyor. Fikir ilginç, demoya bakın, belki birisi böyle bir reklam öğesi ekler.

• Bağımlılık: jQuery
• Tarayıcı desteği: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ ve Android 3+
• Lisans: Creative Commons BY-NC-ND 3.0 lisansı



14. Işık Katmanı

Her projeye uyum sağlayan ve aynı zamanda her ekranda güzel görünen, kullanımı kolay bir ışık kutusu eklentisi. LightLayer eklentisi, arka plan rengini ve şeffaflık derecesini değiştirme, temel bloğun konumu, açma / kapama sırasında geçiş efektlerinin seçimi, kullanıcıların kendi başlarına değiştirebilecekleri işlevler gibi birçok ayar üzerinde kontrol sağlar. Eklenti, harici web sitesi içeriği, yerleşik video oynatıcılar ve haritalarla harika çalışır.

• Bağımlılık: jQuery
• Tarayıcı desteği: IE9+, Chrome, Firefox, Safari ve Opera
• Lisans: MIT lisansı



15 Akışkan Kutusu

Fluidbox, yalnızca görüntülere yönelik bir ışık kutusu eklentisidir. Görüntülerin temsilindeki olası varyasyonların sayısı gerçekten etkileyicidir. Eklenti, kayan görüntüler, mutlak konumlu görüntüler, çerçeveli ve yastıklı, tek görselli ve bir galeride birleştirilmiş resimler ve fotoğraflar dahil olmak üzere çeşitli tasarımlardaki görsellerle harika çalışır. Genel olarak boşuna su dökmeye değmez, eklentinin tüm özelliklerini kısa bir sunumda anlatmak hala imkansız, bu yüzden demoyu izlemek, bükmek, bükmek daha iyi ve bence birçok kişi bu eklentiyi beğenecek .

• Bağımlılık: jQuery
• Tarayıcı desteği: IE9+, Chrome, Firefox, Safari, Opera
• Lisans: MIT lisansı



Muhtemelen hepsi bu! Bu kısa incelemenin, sunulan web geliştirme ürünlerinin yığınını anlamanıza yardımcı olacağını umuyorum. Seçimde sunulan tüm eklentilerin çalışma projelerinde kullanmadığımı, çoğunu test sitelerinde veya bir lakolde test ettiğimi belirtmek isterim, bu nedenle herhangi bir soru ortaya çıkarsa, büyük olasılıkla bunları birlikte çözeceğiz, ancak birlikte, her zaman olduğu gibi bizim için her şey yoluna girecek.

Amaçlarınıza uygun bir Rusça şablon mu arıyorsunuz? Muhtemelen bu durumda TemplateMonster pazarını ziyaret etmelisiniz. Yakın zamanda sitede ortaya çıkan basit bir nedenden dolayı yeni Kısımşablonlar. Artık her kullanıcı güncellenecek ve güncellenecek koleksiyonu görebilir. Şablonların metinleri elle yazılmıştır. Ancak bu hazır çözümlerin tek artısı bu değil. Aslında paketlerinde, görsel editör de dahil olmak üzere çevrimiçi bir projenin geliştirilmesini kolaylaştıracak her şeyi bulabilirsiniz.

Saygılarımla, Andrew

Lightbox, bir görüntüyü veya başka herhangi bir içeriği, genellikle sayfanın ana içeriğinin üstünde yarı şeffaf gölgeli bir arka planla gösterilen özel stilde bir pencerede görüntülemek için kullanılan bir jQuery eklentisidir.

Eklentiyi sayfaya kurup kurmadan önce bazı örneklere göz atalım:

Lightbox'ı kullanmaya başlama

İndirmek En son sürüm eklenti (Bower aracılığıyla da mevcuttur: bower install lightbox2 --save). Daha sonra zip'i açın sıkıştırılmış dosya ve klasördeki sadeleştirilmiş çalışma örneğine bir göz atın örnekler.

Lightbox'ı sayfanıza yüklemeye hazır mısınız? İle başla CSS bağlantıları ve Javascript. Bu dosyaların her ikisini de klasörden alabilirsiniz. uzaklık. Aşağıdaki kodu web sayfanızdaki head etiketleri arasına yapıştırın

Eklentiyi etkinleştirmek için kapanış gövde etiketinden önce aşağıdaki kodu yapıştırın:

Lightbox'ın gerektirdiği jQuery'nin de yüklendiğinden emin olun. Sayfada zaten JQuery kullanıyorsanız (jQuery 1.7 veya üstünü gerektirir), daha önce yüklendiğinden emin olun. lightbox.js. Bağlı jQuery'niz yoksa, bu kitaplığa zaten sahip olan dist/js/lightbox-plus-jquery.js dosyasını kullanın veya en son sürümü adresinden indirin. alan. Dört resmin de belirtildiğinden emin olun. ışık kutusu.css belirtilen konuma yerleştirin. Bir klasörden görüntü alabilirsiniz /dağım/resimler.

Şimdi HTML koduna bir göz atalım. Eklentimizi uygulamak istediğimiz görselleri içeren bağlantıya data-lightbox niteliğini ekleyin. Özellik değeri olarak her görüntü için benzersiz bir ad kullanın. Örneğin:

Resim #1

Başlığı göstermek istiyorsanız veri başlığı özelliğini ekleyin. Bir grup halinde birleştirmek istediğiniz ilgili görsellerden oluşan bir grubunuz varsa, şunu kullanın: aynı değer gerekli görseller için data-lightbox özelliğinde. Örneğin:

Resim 2 Resim 3 Resim 4

Işık Kutusu ayarları

Varsayılan seçeneklerden herhangi birini değiştirmek istiyorsanız, seçenek: yöntemini çağırın.

lightbox.option(( "resizeDuration": 200, "wrapAround": true ))

• AlwaysShowNavOnTouchDevices Varsayılan: false

  Eğer doğru, farenizi bir dizi görselin üzerine getirdiğinizde görünen sol ve sağ gezinme okları, dokunmatik cihazlarda her zaman görünür olacaktır

• fadeSüre Varsayılan: 500

  Kabın kaybolması için geçen süre (milisaniye cinsinden).

• fitImagesInViewport Varsayılan: doğru

  Eğer doğru ardından görüntünün görünüm alanına sığması için görüntünün boyutunu orantılı olarak azaltın. Bu, kullanıcıyı resmin tamamını görmek için kaydırma yapma zorunluluğundan kurtarır.

• maksimum genişlik

  Ayarlanırsa görüntünün yüksekliği bu değerle (piksel cinsinden) sınırlanır. En boy oranına uyulmayacak.

• maksimum yükseklik

  Ayarlanırsa görüntünün genişliği bu değerle (piksel cinsinden) sınırlanır. En boy oranına uyulmayacak.

• konumFromTop Varsayılan: 50

  Görünüm alanının üst kısmından Işık Kutusu kapsayıcısına kadar olan mesafe (piksel cinsinden).

• resizeSüre Varsayılan: 700

  Farklı boyutlardaki görseller değiştirilirken Lightbox kapsayıcısının genişliğini ve yüksekliğini değiştireceği süre (milisaniye cinsinden).

• showImageNumberLabel Varsayılan: doğru

  Eğer YANLIŞ, metin mevcut görsel numarasını ve gruptaki toplam görsel sayısını içerecektir, örneğin: "Resim 2 / 4".

• sarmaAround Varsayılan: false

  Eğer doğru, son görüntü görüntülendiğinde sonraki görüntüyü görüntüleme düğmesi kaybolmaz. Üzerine tıkladığınızda ilk resim görüntülenecektir.