jQuery resim galerisi. ilginç jQuery efektli jQuery resim galerisi 3d Duvar Galerisi

Bugün çok yaratıcı geçişlerle harika resim galerileri oluşturmanıza olanak tanıyan Flipping Gallery jQuery eklentisine bakacağız. Örnekte, bu eklentiyi kullanan 5 tür geçiş vardır. Eklentinin kullanımı gerçekten çok kolaydır, böylece herkes onunla tam olarak çalışabilir.

Burada bir örnek görülebilir:

İndirmek

Menü sol üstte göründüğünde Demo 2'den menünün nasıl oluşturulacağına daha yakından bakacağız.

HTML bölümü

Öncelikle, indirilebilen jQuery kitaplığını ve Flipping Gallery eklentisini etiketler arasına eklemeniz gerekir:

1 2 3 4 5 6

... ...

Ardından resimleri düzenliyoruz. İstediğiniz kadar resim ekleyebilirsiniz:

1 2 3 4 5 6 7 8

...

Ve resimlere bir açıklama eklemek için (demo 4 ve 5'te olduğu gibi) özniteliği kullanmanız gerekir. veri yazısı:

1 2 3 4 5 6 7 8

...

js parçası

1 2 3 4 5 6 7 8 9

$(".gallery" ) .flipping_gallery (( direction: "ileri" , seçici: "> a" , boşluk: 10 , showMaximum: 15 , enableScroll: true , flipDirection: "bottom" , autoplay: 500 ) ) );

Her yöntemin ne anlama geldiğini görelim:

yön - görüntülerin nasıl görüneceğinden sorumlu bir yöntem. Eğer "ileri" ise, o zaman başlangıçtaki görüntü sona yerleştirilecektir, eğer "geri" ise - bunun tersi de geçerlidir. Varsayılan değer "ileri"dir.
seçici - görüntüleri seçtiğimiz seçici, istenildiği gibi değiştirilebilir.
boşluk - perspektifteki görüntüler arasındaki boşluğu ayarlar.
showMaximum - kullanıcı tarafından görülebilen görüntülerin sayısını ayarlar. En az 100 resim kullanabilirsiniz, ancak yalnızca ilk 15 görüntü gösterilecektir, bu çok kullanışlıdır ve tarayıcıyı yüklemez.
enableScroll - resimleri fare tekerleğini kullanarak görüntüleyebilirsiniz.
flipDirection - görüntünün nereye kayacağını belirler: "sol" - sola, "sağ" - sağa, "yukarı" - yukarı ve "alt" - aşağı. Varsayılan olarak aşağı kayar.
otomatik oynatma - galeri otomatik oynatma. Milisaniye cinsinden belirtilir, örn. Resimlerin değişmesi ne kadar sürer?

Çözüm

Artık fotoğraflarınızı gönderirken kullanabileceğiniz harika bir galeriniz var.

Yetkin bir şekilde oluşturulmuş ve görsel olarak tasarlanmış, bizim durumumuzda bu ayrı bir sayfadır, mesleki faaliyetlerinde belirli bir beceri düzeyine ulaşmış herhangi bir uzmanın kişisel web sitesinin veya blogunun önemli bir unsurudur.
Portföy sayfası, sitenin / blogun okuyucularına ve ziyaretçilerine, fotoğraflar, makaleler, yayınlar, tasarım öğeleri vb.
Böyle bir sayfam yok ve benim açımdan bu, şu anda gerçekten üzerinde çalıştığım ve mümkün olan en kısa sürede düzeltilmesi gereken talihsiz bir eksiklik.
Küresel ağın geniş alanlarında, bir portföy düzenlemek için çok sayıda hazır sayfa şablonu bulabilirsiniz ve bu tür sayfaların çeşitliliği gerçekten etkileyicidir. Bu nedenle, web tasarımı ve geliştirmenin tüm inceliklerini önemseyen herkes, her zaman kendileri için uygun bir seçenek bulabilecektir. Pekala, web sitesi oluşturma bilgisinden muzdarip olanlar için, uyarlanabilir bir düzen örneğini, basit bir portföy sayfasını, tamamlanmış çalışmanın kategoriye göre filtrelendiği, üzerinde yapılmış, çekici bir geçiş efektiyle seyreltilmiş, animasyon öğeleriyle analiz etmeyi öneriyorum.

Sayfanın düzeni, yürütülebilir javascript ve bazı tasarım öğeleri, harika bir web tasarımcısı ve geliştiricisi Kevin Liew'in (queness.com) "dağlara" olduğunu ortaya koydu. seçerken en uygun çözüm, benim için yürütme kolaylığı, jQuery eklentisinin işlevselliği, tüm modern tarayıcılarda doğru çalışma ve İnternette gezinmek için çeşitli mobil cihazların kullanımının artan popülaritesi göz önüne alındığında, tasarımın uyarlanabilir olması önemliydi. İddialı, tasarımcı çanları ve ıslıkları ve ağır eklentiler yok.

Temel düzen, oluşturmamız gereken iki ana UI öğesinden, gönderilen çalışmanın kategorilerini filtrelemek için sekme gezintisinden ve üzerine gelindiğinde açıklama yazısı efektine sahip küçük resim ızgarasından oluşur.
Yeni başlayanlar için, sonunda her şeyin çalışması için jQuery'nin en az 1.7.0 sürümü gerekli olacaktır. Henüz bağlamadıysanız, etiketin önüne aşağıdaki satırı ekleyin:

MixItUp eklentisini çalıştırın, yukarıdaki dosyalardan sonra bu kodu yapıştırın:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] , easing: "snap" , // hover efektini çağır onMixEnd: filterList.hoverEffect() ) ) ; ), hoverEffect : function () ( $("#portfoliolist .portfolio" ) . hover( function () ( $(this) . find(".label" ) . stop() . animate(( bottom: 0 ) , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate(( top: - 30 ) , 500 , "easeOut Dörtlü " ) ; ) , function () ( $(this) . find(".label" ) . stop() . animate((alt: - 40 ) , 200 , "easeInQuad" ) ; $(this) . find("img" ) . stop() . animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ;filterList.init() ; ) ) ;

$(function () ( var filterList = ( init: function () ( $("#portfoliolist")). mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing: "snap", // hover efektini çağır onMixEnd: filterList.hoverEffect() )); ), hoverEffect: function () ( $("#portfoliolist .port fo lio").hover(function () ( $(this).find(".label").stop().animate((bottom: 0), 200, "easeOutQuad"); $(this).find("img").stop().animate((top: -30), 500, "easeOutQuad"); ), function () ( $(this).find(".label").stop().animate((bottom: -40) ), 200 , "easeInQuad"); $(this).find("img").stop().animate((top: 0), 300, "easeOutQuad"); )); ) ); filterList.init(); ));

Tüm eklenti seçeneklerini ayrı ayrı değerlendirmenin bir anlamı yok, varsayılan oldukça en iyi seçenektir. Pekala, herhangi biri parametrelerle deneylere tabi tutulursa, lütfen, her şey sizin gücünüzde.

Sayfa düzenini ve öğelerin görünümünü oluşturmak için birkaç . , biri temel stiller için, buna layout.css ve varsayılan stilde daha iyi tarayıcı tutarlılığı için başka bir küçük CSS dosyası normalize.css diyelim:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Şimdi her şeyi sırayla, mümkünse gereksiz su olmadan, erişilebilir ve anlaşılır bir şekilde, anadilimizde, sabırlı dilimizde analiz edeceğiz.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Tüm< li>< span class = "filter" data- filter= "app" >Uygulamalar< li>< span class = "filter" data- filter= "card" >kartvizitler< li>< span class = "filter" data- filter= "icon" >simgeler< li>< span class = "filter" data- filter= "logo" >Logo< li>< span class = "filter" data- filter= "web" >Web tasarımı

Tüm
Uygulamalar
kartvizitler
simgeler
Logo
Web tasarımı

Gezinme panelinde, tüm eser listesini kategorilere ayırarak yerleştiriyoruz. Her bir portföy kategorisini data-cat özniteliği aracılığıyla, data-filtre özniteliğindeki değere uygun olarak bir veya başka gezinme çubuğu öğesiyle bağlamamız gerekir. data-filter değerleri data-cat ile eşleştirilerek, portföy öğeleri kategoriye göre filtrelenecektir.
Küçük resme ek olarak, şimdilik gizlenmiş olan eserin adını ve yalnızca görüntünün üzerine geldiğinizde açılan kategori başlığını içeren küçük bir panel ekleyeceğiz. Şekil vermeyi kolaylaştırmak için dış görünüş CSS'deki tüm bu yapılardan, ilgili sınıfları öğelere yazacağız:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Beget'i barındırma. Ru< span class = "text-category" >Logo< div class = "label-bg" > .........

Beget.Ru'yu barındırma Logo.........

Kullanıcının tüm çalışmalarınızı tam olarak görebilmesi için resme veya doğrudan imzaya bağlantılar ekleyebileceğinizi lütfen unutmayın.

css

Şimdi, sessizce bezler, en ilginç kısma, portföy sayfamızın kullanıcı arayüzünün genel stillerinin ve uyarlanabilir sürümünün CSS'de oluşturulmasına geçelim. Makalede yalnızca temel (varsayılan) değerleri belirteceğim, yani herhangi bir arka plan görüntüsü ve bağlı yazı tipi olmadan, kimin ihtiyacı varsa demoda görülebilir veya kaynak arşivde bulunabilir.

.container ( konum : göreli ; genişlik : 960 piksel ; kenar boşluğu : 0 otomatik ; /* Tarayıcı penceresini yeniden boyutlandırırken geçiş zincirini görebileceksiniz */ -webkit-transition: tümü 1 saniye kolaylık; -moz-geçiş: tümü 1 saniye kolaylık; -o-geçiş: tümü 1 saniye kolaylık; geçiş : tümü 1'ler kolaylık; ) #filters ( marjin : %1 ; dolgu : 0 ; liste stili : yok ; ) # filter li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* biraz metin gölgesi ekleyin */ text-shadow : 1px 1px #FFFFFF ; imleç : işaretçi ; ) /* üzerine gelindiğinde kategori arka planını değiştir */ #filters li span: hover ( background : # 34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* aktif kategori öğesinin arka planı */ #filters li span.active ( background : rgb (62 , 151 , 221 ) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box; -o-box-sizing: border-box; genişlik: %23 marj: %1 görüntü yok ; kayan nokta: sol; taşma: gizli ) .portfolio-wrapper ( taşma : gizli ; konum : göreceli !önemli; arka plan : #666 ; imleç : işaretçi ; ) .portfolio img (maksimum genişlik : %100 ; konum : göreli ; ) /* etiketler varsayılan olarak gizlenir */ .portfolio .label ( konum : mutlak ; genişlik : %100 ; yükseklik : 40 piksel ; alt : -40 piksel ; ) .portföy .label-bg ( arka plan : rgb (62 , 151 , 221 ) ; genişlik : %100 ; yükseklik : %100 ; konum : mutlak ; üst : 0 ; sol : 0 ; ) folio .text-category (ekran: blok; yazı tipi boyutu: 9 piksel;)

Kapsayıcı ( konum: göreli; genişlik: 960px; marj: 0 auto; /* Tarayıcı penceresini yeniden boyutlandırırken geçiş zincirini görebileceksiniz */ -webkit-transition: tümü 1'ler kolaylık; -moz-geçiş: tümü 1'ler kolaylık; -o-geçiş: tümü 1'ler kolaylık; geçiş: tümü 1'ler kolaylık; ) #filters ( marjin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* biraz metin gölgesi ekleyin */ text-shadow: 1px 1px #FFFFFF; imleç: işaretçi; ) /* üzerine gelindiğinde kategori arka planını değiştir */ #filters li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* kategori etkin öğe arka planı */ #filters li span.active ( arka plan: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:23%; margin :1%; display :yok; float:left; taşma:gizli; ) .portfolio-wrapper ( taşma:gizli; pozisyon: göreceli !önemli; arka plan: #666; imleç:işaretçi; ) .portfolio img ( maks-genişlik:100%; konum: göreceli; ) /* etiketler varsayılan olarak gizlenir */ .portfolio .label ( konum: mutlak; genişlik: %100; yükseklik:40px; alt:-40px; ) .portfolio .label-bg ( arka plan: rgb(62, 151, 221); genişlik: %100; yükseklik:%100; konum : mutlak ; top:0; left:0; ) .portföy .label-text ( color:#fff; konum: göreli; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

İkinci bölümde, aynı stil sayfasında, çeşitli medya sorgularının yardımıyla, alternatif CSS bölümleri oluşturacağız. Sayfamızın yerleşim düzeninin çeşitli mobil cihazların ekranlarında doğru görüntülenmesi için bu bölümlere farklı ekranlar için alternatif CSS kuralları ekleyeceğiz. Böylece, normal tarayıcılar için CSS tablomuzda önceden belirlenmiş kuralları kolayca geçersiz kılıyoruz ve çok istenen uyarlanabilirliği elde ediyoruz.

/* Tablet */ @media yalnızca ekran ve (min-width : 768px ) ve (max-width : 959px ) ( .container (width : 768px ; ) ) /* Mobil - Not: 320px genişlik*/ @media yalnızca ekran ve (max-width : 767px ) ( .container (genişlik : 95% ; ) #portfo liolist .portfolio (genişlik : %48 ; kenar boşluğu : %1 ; ) ) /* Mobil - Not: 480 piksel genişlik */ @medya yalnızca ekran ve (min-genişlik : 480 piksel ) ve (maks-genişlik : 767 piksel ) ( .container (genişlik : %70 ; ) )

/* Tablet */ @media yalnızca ekran ve (min-width: 768px) ve (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobil - Not: 320px genişlik için tasarlayın*/ @media yalnızca ekran ve (max-width: 767px) ( .container (width: 95%; ) #portfoliolist .portfolio (genişlik: %48; marj:1%; ) ) /* Mobil - Not: 480px genişlik */ @media yalnızca ekran ve (min-genişlik: 480px) ve (maks-genişlik: 767px) ( .container (genişlik: %70; ) )

Bu kadar. Kapsamlı "Portföy" adı altındaki harika sayfamız hazır, geriye sadece onu sizin kadar harika ve seçkin çalışmalarınızla doldurmak ve tüm dünya için sergilemek kalıyor. Yine de sessizce, alçakgönüllülükle kendinle gurur duyabilirsin. Asıl mesele bu konuda aşırıya kaçmamak.
Örneğe tekrar bakın ve gerekirse kaynak kodunu alın, boş zamanlarınızda, sessiz bir ev ortamında, bu işi mükemmelliğe getirebilirsiniz.

Ders oluşturulurken kullanılan materyal şuydu: . Orijinal, bozulmamış, sadece yazarın kaleminden, portföy sayfasından, orada yer almaktadır.

Herkese iyi şanslar ve vücudun yararına, kısa yazın geri kalanını geçirin!

1. jquery galerisi sayfa çevirme efekti ile

Benzer bir çözüm, en son blog makalelerini görüntülemek veya ürünleri sunmak için kullanılabilir.

Fotoğraflarınızı şık bir jQuery galerisi olarak görüntülemenin benzersiz bir yolu.

3. jQuery ürün resim galerisi, slideJS eklentisi

jQuery eklentisi, birden çok resim içeren bir ürün sayfası uygulamak için harikadır. Görüntüler arasındaki geçiş, küçük resimler veya gezinme okları kullanılarak yapılabilir.

Fare imlecini üzerine getirdiğinizde görüntü büyütülür.

5. Zarif Lightbox galerisi "ppGallery" 6. Mini jQuery "Touch-Galeri" 7. Küçük resimler içeren yeni jQuery galerisi

Profesyonel jQuery galerisi 2011.

8. jQuery Nivo Yakınlaştırma Eklentisi

Nivo Slider geliştiricilerinden bir başka kaliteli jQuery eklentisi. Küçük resme tıklayarak görüntüyü büyütün.

9. jQuery 3d Duvar Galerisi

Yeni jQuery galerisi 2011. Görüntü beslemesi, ekranın tam genişliğine kadar uzatılır. Fotoğraflar arasında gezinme üç şekilde gerçekleştirilir: fare tekerleğini kullanarak, galerinin üstünden kaydırarak ve alttan küçük resimlerin bulunduğu bloğu kullanarak. Galeri çok etkileyici görünüyor.

Galerideki resimler rasgele artıp tekrar azalarak bir baloncuk etkisi yaratır.

11. jQuery galerisinde olağandışı görüntüler

Bir yığındaki görüntüler arasındaki boşluğu değiştirmek için üstteki kaydırıcıyı kullanabilirsiniz. Bir resme tıklamak onu döndürür.

12. jQuery galeri eklentisi "MB.Gallery" 13. Tam ekrana uzanan jQuery galerisi

Eklenti 2011. Boyutu ne olursa olsun, tarayıcı penceresinin tüm alanına yayılan, resim açıklamaları içeren yeni bir galeri. Görüntülerin küçük resimleri ilginç bir şekilde gerçekleştirilir. Fotoğraflar arasındaki geçiş, küçük resmin yanındaki oklar ve fare tekerleği kullanılarak gerçekleştirilir.

14. Hafif jQuery galerisi

Eklenti, klasörü otomatik olarak tarar ve resimlerin küçük resimlerini oluşturur.

16. jQuery ve Raphael kitaplıklarını kullanan şık galeri

Fareyi küçük resmin üzerine getirdiğinizde ilginç bir etki.

17. Yeni bir versiyon jQuery eklentisi "Süper Boyutlu" sürüm 3.1

Daha yakın zamanlarda, tam ekran galeriler oluşturmak için bu jQuery çözümünden bahsetmiştim. Bugün size bu profesyonel eklentinin en son sürümünü sunmak istiyorum. Komut dosyası tamamen yeniden yazıldı, artık galeri daha da hızlı çalışıyor ve klavye gezintisi, değişken görüntü hızı, ekran boyutu ve diğerleri gibi bazı ilginç ayarlar eklendi.

18. jQuery eklentisi "Galleria 1.2.2"

Projeleriniz için yeni jQuery galerisi.

Galeri, bir düğmeyi tıklatarak sayfada açılır. Büyütülmüş görüntünün etrafında küçük resimler görüntülenir. Otomatik görüntü değişimini kontrol edebilirsiniz. Kullanılan teknolojiler: jQuery, CSS, PHP.

20. Zamanlayıcı Galeri eklentisi

jquery galerisi. Çok fazla varsa, otomatik slayt değiştirme ve küçük resim kaydırma uygulandı.

jQuery resim galerisi eklentisi.

22. javascript galerisi görüntülemek için mobil cihazlar Fotoğraf Kaydırma

Mobil cihazlarda (telefon veya tablet) görüntülenmek üzere optimize edilmiş bir resim galerisi.

23. 3B efektli javascript galerisi 24. jQuery geçiş galerisi

Yeni jQuery kaydırıcısı. Slaytları değiştirirken birkaç harika animasyon efekti.

25. jQuery Eklentisi "Galleria 1.2.3" 26. jQuery Resim Galerisi "Görüntü Duvarı"

Orijinal galeri, resim olarak stilize edilmiş, ekrana dağılmış çeşitli boyutlarda minyatürler biçimindedir. Bir küçük resme tıkladığınızda, görüntünün açıklamasını içeren bir alan görünür ve tekrar tıkladığınızda, orijinal büyük görüntü açılır.

27. CSS3 Galerisi

İlginç vurgulu etkisi.

28. Küçük resimlerle birlikte TN3 Galerisi

jQuery küçük resim galerisi. Kompakt bir pencerede ve tam ekran bir pencerede görüntüleme yeteneğinin yanı sıra otomatik slayt değiştirmeyi devre dışı bırakma / etkinleştirme yeteneği uygulanmıştır.

29. Izgara-Galeri Görüntü Izgarası

Görüntü ızgarası, tarayıcı penceresinin genişliğine göre genişler. İlginç bir fareyle üzerine gelme efekti: etkin satır ve sütun vurgulanır.

30. jQuery Takas Galerisi

Birkaç kod satırında hafif bir jQuery galerisi.

Demo sayfası, çeşitli stillerde açılan mega menüler için çeşitli seçenekler gösterir. Bu menüde, bırakma efektini, bırakma hızını ayarlayabilir ve ayrıca tıklayarak veya fareyi öğenin üzerine getirerek bırakma arasında seçim yapabilirsiniz.

31. jQuery Resim Galerisi

resim altyazılı jQuery galerisi. Çoklu slayt geçiş efektleri. Resimler arasında gezinme, oklar kullanılarak veya küçük resme tıklanarak gerçekleştirilir.

Resim ve minyatürleri daire şeklinde yapılmıştır.

33. Fotoğrafçı Portföyü jQuery Portfolio Görüntü Gezinme Eklentisi

Fotoğrafçının portföy tasarımı için orijinal javascript çözümü. Görüntüler arasında gezinme, Yukarı/Sol/Sağ oklar ve mini kareler (2B alanda hareketin taklidi) kullanılarak gerçekleştirilir. Farklı fotoğraf oturumlarından fotoğrafları farklı dikey sıralarda gruplandırabilir ve gezinme kontrollerini kullanarak aralarında gezinebilirsiniz. Demoya bakın.

34. "jmFullZoom" Eklentisi

Tarayıcı penceresinin tam boyutuna kadar uzanan görüntüleri görüntülemek için eklenti. Portföy çalışmasını görüntülemek için kullanılabilir.

35. Fotoğraf kartı

Google haritası ile entegre galeri. Sağ alt köşedeki simgeye tıklayarak tam ekrana genişletebilirsiniz. Seyahat siteleri için harika.

36. Küçük resimli resim galerisi

jQuery küçük resim galerisi.

37. jQuery galerisi "Galleriffic"

Küçük resimlerle slayt gösterisi.

38. jQuery CSS3 Wave Ekran Efekti Eklentisi

Bir sayfadaki görüntülerin ve içeriğin dalga benzeri temsili. Bir küçük resme tıkladığınızda, tüm resimler büyütülür ve isimleri görünür. Başka bir tıklama, fotoğrafın açıklamasını içeren bir blok açar.

Çok sayıda ekran seçeneği ve ayarı.

42. Plogger 43. Komut dosyası kullanılmadan CSS ile yapılmış basit, hoş bir galeri

Güzel görünüyor ve tüm modern tarayıcılarda harika çalışıyor

Otomatik slayt gösterisini (başlat / durdur), klavye oklarını kullanarak slaytlar arasında geçiş yapabilir, çok sayıda varsa slayt başlıklarının otomatik olarak sayfalandırılmasını, bir sayfada birden fazla galeri desteklenir, slayt açıklamalarını, API desteğini ve kendi slayt geçiş efektlerinizi oluşturma becerisini kontrol edebilirsiniz.

46. Bir fotoğraf yığını şeklinde galeri

Oluşturacağımız galerinin sonucu bu şekilde görünmelidir. Demosunu görebilir ve dilerseniz galerinin nihai sonucunu indirebilirsiniz.

kaydeden Dmitry Semenov
bir jQuery resim galerisidir ve içerik kaydırıcı Eklenti. Tamamen duyarlı, dokunmatik dostudur ve yalnızca dosya boyutunu ve performansını optimize etmek için ihtiyaç duyduğunuz özellikleri dahil etmenize izin veren modüler bir mimariye sahiptir.

Andy tarafından
jQuery için oldukça özelleştirilebilir bir galeri/vitrin eklentisi.

tarafından Trent
Galleriffic, bant genişliğini korurken yüksek hacimli fotoğrafları işlemek için optimize edilmiş zengin, geri göndermesiz bir deneyim sağlayan bir jQuery eklentisidir.

Tonik Galerisi - jQuery XML Portföy Galerisi | 6 dolar

tarafından Aino
Galleria, jQuery kitaplığı üzerine inşa edilmiş bir JavaScript resim galerisi çerçevesidir. Amaç, web ve mobil cihazlar için profesyonel resim galerileri oluşturma sürecini basitleştirmektir.

tarafından CatchMyFame
Geçen gün, bir sayfadaki bir dizi resim arasında geçiş yapmak için jQuery kullanmanın basit bir yolunu aramaya başladım. Bu yüzden bir kodlayıcı olarak kendi eklentimi oluşturmak için yola çıktım.

Thomas Kahn tarafından
Smooth Div Scroll, içeriği yatay olarak sola veya sağa kaydıran bir jQuery eklentisidir. Smooth Div Scroll, jQuery için yazılmış diğer birçok kaydırma eklentisinin yanı sıra, kaydırmayı farklı adımlarla sınırlamaz.

yazan Victor Zambrano – frwrd.net
Minishowcase küçük ve basit bir php/javascript çevrimiçi fotoğraf galerisidir, AJAX tarafından desteklenmektedir ve karmaşık veritabanları veya kodlama olmadan resimlerinizi çevrimiçi olarak kolayca göstermenizi sağlar ve birkaç dakika içinde çalışır durumda bir galeriye sahip olmanızı sağlar.

kaydeden Caspar David Friedrich
EOGallery, jQuery ile yapılmış bir web animasyonlu slayt gösterisi galerisidir. Daha büyük resimleri görüntülemek için yalnızca temel jQuery işlevlerini ve Cody Lindley'in Thickbox'ını kullanır.

kaydeden Arnault Pachot
jQuery için çok formatlı bir döngü, birden çok ortamı destekleyen, rahatsız edici olmayan ve erişilebilir bir portföy: fotoğraflar, video (flv), ses (mp3). Bu jQuery eklentisi, her ortamın uzantısını otomatik olarak algılar ve uyarlanmış oynatıcıyı uygular.

The Wall - Medya Galerisi - jQuery destekli | 5 dolar

Stefan Peter tarafından
Uzay efektli, çok hafif ve basit bir eklenti olan başka bir resim galerisi eklentisi.

kaydeden Moreno Di Domenico
jmFullWall, etkileyici bir portföy oluşturmak için bir jQuery eklentisidir.

kaydeden Fabrizio Calderan
Mosaiqy, Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome ve IE7+ üzerinde çalışan fotoğrafları görüntülemek ve yakınlaştırmak için kullanılan bir jQuery eklentisidir. Fotoğraflar bir JSON/JSONP veri yapısından alınır ve ızgara içinde rastgele taşınır. Tüm pahalı animasyonlar, CPU ek yükünü en aza indirerek, CSS3 geçişlerini kullanan yeni tarayıcılarda GPU'nuz tarafından devralınır.

tarafından Cody
Aşağıdaki jQuery eklentisi, bir dizi görüntüyü çeşitli seçeneklerle küçük bir galeriye dönüştürür. Mikro Görüntü Galerisi, görüntülerin önizlemesini küçük resimler olarak gösteren bir tablo görünümü ile yalnızca bir görüntüyü gösteren tek bir görünüm arasında geçiş yapılmasına izin verir.

VION - jQuery Resim Galerisi Eklentisi | 7 dolar

tarafından Malihu
jQuery çerçevesi ve bazı basit CSS ile oluşturulmuş basit ama zarif bir tam ekran resim galerisi.

Herkese selam! Bugün muhtemelen en iyi ücretsiz fotoğraf galerisi, video ve fotoğraf kaydırıcı hakkında konuşacağız, hadi "fotoğraf çerçevesi" hakkında konuşalım. Senaryonun 2 yıldır desteklenmemesine ve yazarın benzer temalı bir projeye geçmesine rağmen harika çalışıyor ve göze hoş gelmeye devam ediyor.

Ana artılar (+)

Kurulumu, yapılandırması ve kullanımı kolaydır. JQuery'nin yanı sıra ihtiyacınız olacak sadece 2 dosya dahil ve galeriyi görüntülemek için orada yalnızca resimlere bağlantılar belirtmeniz gerekir.

Site yükleme hızını biraz etkiler.

Uyarlanabilirlik. Galeriniz telefonunuzda, dizüstü bilgisayarınızda ve hatta TV ekranınızda güzel görünür.

HTML etiketlerinin nitelikleri aracılığıyla ayrı ayrı bağlanan çok sayıda ayar ve işlev.

Dokunmatik cihazlar için destek.

Görüntülü destek.

Görüntüleri tembel yükleme yeteneği.

Ve bilgili kullanıcılara hitap edecek pek çok başka şey.

eksiler (-)

Kullanıcı desteği eksikliği. Sorununuzun dikkate alınma veya düzeltilme olasılığı neredeyse sıfırdır. Evet, kötü ama ölümcül değil.

Fotorama'yı bağlamak için ilk seçenek

Bu bağlantı seçeneği en kolayıdır, ancak en iyisi değildir, yalnızca galeriyi sitenin çoğu sayfasında görüntülemeniz gerekiyorsa kullanılmalıdır. Bu seçeneğin avantajı bir CDN kullanılmasıdır.

jQuery için kontrol ediliyor. Sitenin kaynak koduna gidin (kısayol Ctrl + U) → şu satıra benzer bir şey bulmaya çalışın: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

Aramayı kolaylaştırmak için Ctrl + F tuşlarını kullanın. Sevilen bir satır yoksa, jQuery'yi dahil etmeniz gerekecektir. WordPress'te bu, aşağıdaki kodu temanın işlevler dosyasına (işlevler.php) yapıştırarak yapılabilir. Aslında, bu komut dosyası, jQuery'nin farklı sürümleri arasında çakışmalar olduğunda kullanılır ve aşağıdaki şemaya göre çalışır: önceden kaydedilmiş jQuery'yi siler, yenisini kaydeder ve komut dosyasını çıkarır. jQuery kitaplığının güncel sürümleri burada bulunabilir.

Bu satırı ve arasına kolayca ekleyebilirsiniz:

Fotorama.css ve fotorama.js'yi dahil ediyoruz. Aşağıdaki kodu ve etiketleri arasına yapıştırın, WordPress'te bu, temanın başlık dosyasında (header.php) yapılır.

Bu, galerinin bağlantısını ilk şekilde tamamlar. Nasıl kullanılacağı "Doğrudan galeri oluşturma" bölümünde yazılmıştır.

İkinci bağlantı seçeneği [kısa kod + Autoptimize]

Bu bağlantı seçeneğinde script dosyaları [shortcode] aracılığıyla sadece gerekli sayfalarda görüntülenecektir. Autoptimize eklentisini kullanırsanız, komut dosyası kodu ek olarak tema dosyalarına entegre edilecektir. Bu basit manipülasyonlar, sitenin yüklenme hızını artırmalıdır.

jQuery için kontrol ediliyor. İlk seçenekte olduğu gibi, yukarıya bakın.

Fotoğraf çerçevesi dosyalarını indirin → paketten çıkarın → sitenin kök dizinindeki ayrı bir klasöre yükleyin.

Temanın işlevler dosyasında (işlevler.php) bir kısa kod oluşturmak için aşağıdaki kodu yapıştırın, dosyaların bağlantılarını ..js"> " olarak değiştirin; ) add_shortcode("foto","sd");

Şimdi, bir makale yazarken, sonundaki kısa kodu girin

Galerinin doğrudan oluşturulması

Galeri kullanılarak HTML kodunda işlenir kapsayıcı c sınıfı="fotorama", kap, görüntüyü görüntülemek için kodu içerir veya bir görselin bağlantısı . WordPress motorunda bir makale yazarken, düzenleyiciyi metin moduna geçirin ve kapsayıcıyı class="fotorama" ile girin.

Şuna benziyor:

Veya bunun gibi (bağlantı numaralandırması isteğe bağlıdır):

1 3 4

Fotorama ayarları örnekleri Konteyner boyutları

Çerçeve bloğunun boyutu, ilk görüntünün boyutudur, diğer görüntüler ilkine orantılı olarak ölçeklenir. Bu durumu düzeltmek için boyutları manuel olarak belirleyebilirsiniz.

Başka ayarlar da var:

data-width="98%" // göreceli genişlik data-ratio="800/600" // en-boy oranı data-minwidth="420" // min. genişlik data-maxwidth="900" // maks. genişlik data-minheight="320" // min. yükseklik data-maxheight="%100 // bağıl maksimum yükseklik data-height="%100 // bağıl yükseklik

Minyatürler

Küçük resimlerden Data-nav="thumbs" sorumludur

Ancak bu yöntem çok verimli değildir, çünkü komut dosyasının küçük resimler oluşturmak için tüm fotoğrafları bir kerede yüklemesi gerekir, bu nedenle resimlerin küçük kopyalarını önceden hazırlamak daha mantıklı olacaktır. WordPress otomatik olarak küçük resimler oluşturur ve biz onları kullanacağız. Küçük resmin bağlantısını almak için dosya adına -70x70 ekleyin (https://website/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://website/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).

Varsayılan olarak küçük resim 64 × 64'tür. Bu parametreyi data-thumbwidth (genişlik) ve data-thumbheight (yükseklik) kullanarak ayarlayabilirsiniz. Küçük resmin kendi boyutuna sahip olmasını istiyorsanız, küçük resim dosyası için genişlik ve yükseklik parametrelerini ayarlayın:

HTML kodu + Fotorama

Fotoğraf çerçevesi, betiğin işlevselliğini büyük ölçüde genişleten HTML ve CSS'yi mükemmel bir şekilde işler. Bağlantılar, bloklar, tablolar, paragraflar ile çalışın, CSS yazın ve daha fazlasını yapın. Aşağıda galerinin çalışmalarından bazı örnekler verilmiştir. Görsel kısım görüntülenmiyorsa, "Sonuç" düğmesine tıklayın.

Örnekleri Göster / Gizle

CodePen'de Ivanov Klim'in (@DreamerKlim) kalemine bakın.

CodePen'de Ivanov Klim'in (@DreamerKlim) Kalem aVEEVb'sine bakın.

Tam ekran modu data-allowfullscreen="true" //tarayıcı penceresinde data-allowfullscreen="native" //tüm monitör için

Data-full aracılığıyla tam ekran modu için ayrı bir büyük resim eklemek mümkündür: