Işık Kutusu komut dosyası. Web tasarımı ve arama motoru optimizasyonu. Lightbox'ı kullanmaya başlama

Ç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.

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

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

1. iLightbox

iLighbox, çok çeşitli farklı dosya türlerini destekleyen hafif bir jQuery ışık kutusu eklentisidir: resimler, videolar, Flash/SWF, Ajax içeriği, çerçeveler ve gömülü haritalar. Bu eklenti aynı zamanda kullanıcıların Facebook, Twitter veya Reddit aracılığıyla içerik paylaşmasına olanak tanıyan sosyal medya düğmeleri de ekler. Normal ve tam ekran modlarında görüntüleme ile muhteşem slayt gösterileri, resim galerileri ve video klipler düzenlemek için mükemmel bir fırsat.

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

Swipebox, mobil platformlar için dokunmatik ekran desteğine sahip bir jQuery eklentisidir. 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 web sitesinde eklentinin ekstra su olmadan bağlanması ve kullanılmasıyla ilgili ayrıntılı belgeler var, her şey sadece işle ilgili, 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 video desteği, haritaları ve Ajax içeriğini görüntüleme, satır içi formlarla modal pencereler uygulama gibi PhotoSwipe'ta bulunmayan daha gelişmiş özelliklere sahiptir. 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 ek özelliğe sahip, çok işlevli bir ışık kutusu eklentisidir. 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

Bağımlılık: jQuery
Tarayıcı Desteği: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android ve Windows Phone
Lisans: MIT lisansı

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 tam boyutlu bir görselin veya videonun belirli bir boyutu. Büyük ekranlarda 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ı

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ı

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 dolgulu, tek görüntülerden oluşan ve bir galeride birleştirilen resimler ve fotoğraflar dahil olmak üzere çeşitli tasarımlardaki görüntülerle 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 kullanılmadığını, ç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. Basit bir nedenden ötürü, sitede yakın zamanda yeni bir şablon bölümü ortaya çıktı. 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:

Eklentinin en son sürümünü indirin (Bower aracılığıyla da edinilebilir: bower install lightbox2 --save). Bundan sonra zip dosyasını açın ve klasörde bulunan sadeleştirilmiş çalışma örneğine bir göz atın. örnekler.

Lightbox'ı sayfanıza yüklemeye hazır mısınız? CSS ve Javascript'i ekleyerek başlayın. 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. Birlikte gruplamak istediğiniz bir grup ilgili görseliniz varsa, gerekli görseller için data-lightbox özelliğinde aynı değeri kullanın. Örneğin:

Resim 2 Resim 3 Resim 4

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, ardından bir dizi görseli görüntülerken farenizi ü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 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.

Bu makale, güzel web siteleri oluşturmanıza yardımcı olacak en iyi jQuery Lightbox eklentilerini bir araya getiriyor.

Bu jQuery eklentileri bir web sitesine açılır pencereler eklemek için kullanılır. Bu tür eklentiler, sıradan bir siteye muhteşem ve çekici bir görünüm kazandıran çok güzel efektlerin elde edilmesine yardımcı olduklarından, herhangi bir web tasarımcısı ve geliştiricisi için çok güçlü bir araçtır. JQuery eklentisini kullanmak için temel JavaScript ve jQuery bilgisine sahip olmanız gerekir. Temel bilgileri bilmiyorsanız eklenti açıklamasını okuyun ve talimatları izleyin.

Yazdığım bir eklentiyle başlayacağım - . Bu makalede eklentinin nasıl çalıştığını görebilirsiniz; tüm resimler tıklanabilir. Bunu tasarlamamdaki amacım, yalnızca görseller içeren, slayt gösterisi efektleri olmayan, vb. basit bir ışık kutusu yapmaktı.

Hafif, dokunmatik özellikli ve en önemlisi ihtiyaç duyulmayan gereksiz parçaları kaldırmanıza olanak tanıyan modüler bir eklenti. Mobil tarayıcılarda iyi çalışır. Yumuşak geçişlerle, sanki standart bir uygulamaymış gibi, parmağınızı kaydırarak görselleri değiştirebiliyorsunuz.

Başlangıçta, Lightbox eklentisi Bootstrap'te eksik. düzeltir. Bootstrap kullanıyorsanız bu kütüphane önerilir. Eklenti Bootstrap ile iyi bir şekilde bütünleşir.

Strip benzersiz bir ışık kutusu eklentisidir. Görüntüyü üst üste koymak yerine, ışık kutusu modülü görüntüyle birlikte yan yana kayar, böylece görüntü tüm içeriği engellemez. Strip hem görüntüleri hem de videoları destekler.

duyarlı ışık kutusu galerileri oluşturmaya yönelik bir JavaScript kitaplığıdır. Hafif ve mobil uyumlu, CSS3 düzgün görüntü geçişlerini özelleştirmek ve kullanmak kolaydır.

Rebox çok hafif ve hızlı bir içerik ışık kutusudur. Çoğunlukla, elbette, görüntüler için. Eklentiyi başlatmak için yalnızca JS ve CSS kitaplığını eklemeniz gerekir.

Harika ışık kutusu eklentisi. Solma, elastik, yakınlaştırma ve kaydırma gibi çeşitli animasyon türlerini destekler. Ayrıca Youtube Embed, HTML video, SWF ve giriş formları dahil olmak üzere çeşitli medya türlerini de destekler.

LightGallery, son derece özelleştirilebilir bir jQuery duyarlı galeri eklentisidir. Kesinlikle ihtiyacınız olan her şeye sahiptir: ışık kutusu görünümü, slayt gösterisi, tam ekran yakınlaştırma, önizlemeler. Ayrıca galeriyi görüntüleyen kullanıcı resmi anında indirebilmektedir.

Bazı benzerlerinden farklı olarak herhangi bir şeyin açılır pencerede görüntülenmesine yönelik bir kombinasyon değildir. Eklenti, hem tek hem de bir setin (galeri) parçası olarak yalnızca görüntüleri görüntülemek amacıyla oluşturuldu ve çalışıyor, ancak bu onu daha az çekici hale getirmiyor.

jQuery LightBox eklentisi basit, şık ve dikkat çekmeyendir, ekstra işaretleme gerektirmez ve jQuery seçicinin gücü ve esnekliği sayesinde görüntüleri geçerli sayfaya yerleştirmek için kullanılır.

Facebook tarzında iletişim kutuları oluşturmanıza olanak sağlarken, içlerinde bazı öğelerin, resimlerin, ajax sayfalarının düz metinlerini içeren iletişim kutuları oluşturmanıza izin verilir.

Fotoğraf galerileri oluşturmaya ve diğer içerikleri güzel kalıcı pencerelerde göstermeye yarar. Site ve fotoğraf galerisi planlıyorsanız ve bazı içerikleri kalıcı pencerelere yerleştiriyorsanız, bu komut dosyasına dikkat edin.

Oldukça hafiftir, görüntüleri pencereye sığacak şekilde yeniden boyutlandırabilir ve kurulumu kolaydır.

ImageLightbox.js, aynı zamanda video, metin ve çerçeveler değil, yalnızca görüntü içeren bir ışık kutusudur. Varsayılan olarak başlık, gezinme düğmesi veya arka plan yoktur.

YouTube ve Vimeo'daki resimler ve videolar da dahil olmak üzere birçok içerik türünü görüntüleyebilen bir jQuery UI medya kutusudur. Burada Panorama ve Canlı Yeniden Boyutlandırma dahil birçok benzersiz özellik bulunmaktadır.

jQuery TosRus, videolar ve resimlerle çalışmak için kullanışlı ve işlevsel bir jQuery eklentisidir. Komut dosyası aynı anda bir ışık kutusu aracı ve yatay kaydırıcı görevi görebilir. Modallardaki içerik varsayılan olarak duyarlıdır. Dokunmatik cihazlar için uyarlanmıştır.

- bu, jQuery'deki geleneksel olanlardan daha gelişmiş işlevselliğe sahip ışık kutusu çeşitlerinden biridir. Tüm analoglar gibi, arka plan şeffaflığını, ekran hızını, efektleri, boyutları, altyazıları vb. kontrol etmek için bir dizi ayara sahiptir.

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

- Masaüstü bilgisayarlar, akıllı telefonlar ve tabletler için jQuery eklentisi. 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.

jQuery Superbox; görüntüler, görüntü grupları, harici sayfalar veya belirli içerikler için ışık kutuları oluşturmayı çok kolaylaştırır. Eklenti tamamen erişilebilir ve anlaşılırdır ve betiği çalıştırmak için "rel" özelliğini ve görselin veya sayfanın adresini belirtmek için "href" özelliğini kullanır.

- Çeşitli medya formatlarını geniş bir şekilde destekleyen jQuery ışık kutusu eklentisi: video, Flash / SWF, Ajax, çerçeveler ve haritalar dahil. Bu eklenti aynı zamanda üst tarafa sosyal medya butonları ekleyerek kullanıcılarının Facebook, Twitter veya Reddit'te paylaşmasına olanak tanıyor. Ayrıca, farklı durumlarda uygulanabilecek, görülecek ek ayarlar da vardır.

görüntüleri, iFrame'leri, Google Haritaları, Vimeo ve YouTube videolarını görüntülemeye uygun başka bir duyarlı jQuery Lightbox eklentisidir. Eklenti, ekrandaki görüntünün maksimum genişliğini hesaplar ve pencerenin yüksekliğinden büyük olsa bile orantılı yüksekliği korur.

JQuery'yi kullanarak kolayca güzel açılır pencereler oluşturmanıza olanak tanır. Medya içeriğinizi otomatik olarak geliştirebilir veya güçlü bir API kullanarak özel açılır pencereler oluşturabilirsiniz.

— harika uyarlanabilir ışık kutusu. Her ekranda harika görünen çarpıcı galeriler oluşturmak için kullanılabilir.

Magnific Popup, performans odaklı, kullanımı kolay bir jQuery lightbox eklentisidir. Ana hedefi herhangi bir cihazda rahat bir deneyim sağlamaktır.

Bilgili geliştiriciler için 6 kilobayt ağırlığında ve yalnızca temel bilgileri içeren temel eklenti. Örneğin bir galerideki bir grup görüntü için ışık kutusu efektine ihtiyacınız varsa galeri uzantısını etkinleştirebilirsiniz. Projelerinizde kullanmak üzere kendi eklenti uzantınızı da geliştirebilirsiniz.

En popüler kütüphane ise uzun yıllardır masaüstü bilgisayarlarda kullandığımız ancak mobil platformlarda kullanmadığımız Lightbox Javascript'tir.

Mobil platformları destekleyen 14 Lightbox eklentisini dikkatinize sunuyorum.

PhotoSwipe - Gerekmeyen gereksiz parçaları kaldırmanıza olanak tanıyan hafif, dokunmatik özellikli ve en önemlisi modüler eklenti. Mobil tarayıcılarda iyi çalışır. Yumuşak geçişlerle, sanki standart bir uygulamaymış gibi, parmağınızı kaydırarak görselleri değiştirebiliyorsunuz.

Gerekli kütüphaneler: yok.
Tarayıcı desteği: IE8+, Chrome, Firefox, Safari, Opera ve diğer mobil tarayıcılar.
Lisans: MIT Lisansı

Magnific Popup, PhotoSwipe ile aynı yazar olan Dmitry Semyonov tarafından geliştirilen başka bir ışık kutusu eklentisidir. Eklenti bir jQuery/Zepto eklentisi olarak gelir ve ayrıca video, haritalar ve Ajax desteği gibi PhotoSwipe'ta bulunmayan desteği de içerir. Bu, daha fazla seçeneğin parmaklarının ucunda olmasını tercih edenler için harika bir alternatif.

Gerekli kütüphaneler: jQuery 1.9.1+ veya Zepto.js
Tarayıcı desteği: IE7 (kısmen), .
Lisans: MIT Lisansı

Mobil platformlar için dokunma hareketlerini destekleyen Swipebox jQuery eklentisi. Resimlerin yanı sıra Youtube ve Vimeo'daki videoları da destekler. Swipebox'ın kurulumu kolaydır ve ayarlarını özelleştirmek için çeşitli seçeneklere sahiptir. Swipebox'ın JavaScript bilmeyenler için biraz fazla hantal bir ışık kutusu eklentisi olduğunu düşünüyorum.

Başlangıçta, Lightbox eklentisi Bootstrap'te eksik. Bootstrap için Işık Kutusu bu sorunu düzeltir. Bootstrap kullanıyorsanız bu kütüphaneyi kullanmanız önemle tavsiye edilir. Eklenti Bootstrap ile iyi bir şekilde bütünleşir.

Gerekli Kütüphaneler: jQuery ve Bootstrap modülü
Tarayıcı Desteği: IE8+, Chrome, Firefox, Safari ve Opera
Lisans: GNU lisansı

Nivo Lightbox, son derece özelleştirilebilir bir ışık kutusu eklentisidir. Çeşitli seçenekler görünümü değiştirmenize olanak tanır. Örneğin: tema, görünüm animasyonu ve gezinme görünümü.

Gerekli Kütüphaneler: jQuery
Tarayıcı desteği:
Lisans: MIT Lisansı

ImageLightbox hiçbir gösterişi olmayan basit bir ışık kutusu eklentisidir. Yalnızca görüntü için kullanıldığından adı da buradan gelir. Ne video ne de diğer türler desteklenmez. Ayrıca ek HTML işaretlemesi gerektirmez; etiket yeterlidir. Bu eklentinin kullanımı kolaydır.

Gerekli Kütüphaneler: jQuery
Tarayıcı desteği: IE9+, Chrome, Firefox, Safari ve Opera
Lisans: Tanımsız

Eklentileri olmayan başka bir ışık kutusu eklentisi. Kütüphane yalnızca 2 kilobayt ağırlığındadır ve yalnızca resimlerle çalışır. Tarayıcının yalnızca en son sürümü için geliştirme yapıyorsanız ve video veya diğer formatları desteklemeniz gerekmiyorsa bu mükemmel eklentidir.

Gerekli kütüphaneler: hayır
Tarayıcı desteği: Internet Explorer 10+, Chrome, Firefox, Safari ve Opera
Lisans: MIT Lisansı

Lightcase harika bir ışık kutusu eklentisidir. Solma, elastik, yakınlaştırma ve kaydırma gibi çeşitli animasyon türlerini destekler. Ayrıca Youtube Embed, HTML video, SWF ve giriş formları dahil olmak üzere çeşitli medya türlerini de destekler.

Gerekli Kütüphaneler: jQuery
Tarayıcı desteği: IE9+, Chrome, Firefox, Safari ve Opera
Lisans: GPL lisansı

Featherlight, bilgili geliştiriciler için 6 kilobayt ağırlığında ve yalnızca temel öğeleri içeren temel bir eklentidir. Örneğin bir galerideki bir grup görüntü için ışık kutusu efektine ihtiyacınız varsa galeri uzantısını etkinleştirebilirsiniz. Projelerinizde kullanmak üzere kendi eklenti uzantınızı da geliştirebilirsiniz.

Gerekli Kütüphaneler: jQuery
Tarayıcı Desteği: IE8+, Chrome, Firefox, Safari ve Opera
Lisans: MIT Lisansı

LightLayer, kullanımı kolay bir ışık kutusu eklentisidir. Eklenti birçok seçeneği, özel JavaScript yöntemlerini ve özel olayları destekler. Eklenti resimler, videolar ve haritalarla çalışır.

Gerekli Kütüphaneler: jQuery
Tarayıcı desteği: IE9+, Chrome, Firefox, Safari ve Opera
Lisans: MIT Lisansı

LightGallery, birçok özelliğe sahip başka bir ışık kutusu eklentisi. Işık kutusu efektlerinin çeşitli ayrıntılarını özelleştirmek için 20'den fazla seçenek içerir.

Gerekli Kütüphaneler: jQuery
Tarayıcı Desteği: IE7+, Chrome, Firefox, Safari, Opera, IOS, Android ve Windows Phone
Lisans: MIT Lisansı

Fluidbox ışık kutusu eklentisi görüntülerle çalışır. Kayan görüntü, mutlak konum görüntüsü, kenarlıklı ve dolgulu görüntüler ve galeriler dahil olmak üzere çeşitli ekranlar için destek içerir. Ayrıca bir WordPress eklentisi de var.

Gerekli Kütüphaneler: jQuery
Tarayıcı desteği: IE9+, Chrome, Firefox, Safari, Opera
Lisans: MIT Lisansı

StripJS benzersiz bir ışık kutusu eklentisidir. Görüntüyü üst üste koymak yerine, ışık kutusu modülü görüntüyle birlikte yan yana kayar, böylece görüntü tüm içeriği engellemez. StripJS hem görüntüleri hem de videoları destekler.

Gerekli Kütüphaneler: jQuery
Tarayıcı desteği: IE7+, Chrome, Firefox, Safari, Opera, IOS 5+ ve Android 3+
Lisans: Creative Commons BY-NC-ND 3.0 Lisansı

Işık Kutusu2

Ö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. En son güncellemesini düşünün - boyutu küçük olan ve her zaman olduğu gibi siteye kurulumu kolay 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.

Ö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:
.
Birbirleriyle çakışmaması için jQuery'nin birkaç farklı versiyonunun aynı sayfada kullanılması önerilmez. Tüm sürümler birbirinin yerine geçemediğinden, eklentilerinizi yüklü jQuery sürümüyle test ettiğinizden emin olun.

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 görüntünün boyutu (big.jpg ) kullanıcının tarayıcısındaki ekran boyutundan daha büyükse, LightBox2 onu ekran boyutuna 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 standart bir Full HD ekran - 1920x1080 için en az 1000 dikey piksel gibi bir çözünürlük marjına sahip olması arzu edilir. Örneğimizde bu "Subbotnik" resmidir.

Fotoğraf galerisini özelleştirmek için lightbox.js dosyasını herhangi bir HTML veya Not Defteri gibi metin düzenleyicide açın. 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.