• JQuery'de sıralama ile güzel galeri. İlginç efektli jQuery'deki resim galerisi Jquery galerisi

    Herkese merhaba!
    Her türden geliştirici, bir sonraki web projesini oluştururken, kullanıcılarına ister fotoğraf ister resim seti olsun, farklı türde görüntülerin nasıl sunulacağı sorusuyla ilgilenir. Bunu yapmak için, çevrimiçi alanın meraklı beyinleri, elbette bu alanın çoğu "burjuva", muhteşem, renkli ve en önemlisi işlevsel slayt gösterileri ve fotoğraf galerileri oluşturmak için giderek daha fazla yeni çözüm arıyor. Çoğunlukla, geliştiriciler tarafından oluşturulan web projesinin şablonunun tasarımına göre veya belirli bir site yönetim motoru için eklentiler ve modüller biçiminde özelleştirilirler. Nadir istisnalar dışında tek bir tema için modern şablonlara bakmaya değer, bir tür eklenti kaydırıcısı veya basit bir görüntü döndürücü olmadan tamamlanmış değildir. Bu nedenle, birçok web geliştiricisinin cephaneliklerine böyle bir şey almak istemeleri ve sitelerinde görselleri etkili bir şekilde sunarak okuyucularını sonuna kadar şaşırtmaları anlaşılabilir.

    Ortaya çıkan yeni oluşturma çözümleriyle ilgili inceleme dizime devam ederken, jQuery'nin büyüsü kullanılarak oluşturulmuş, şimdiye kadar gördüğüm ilginç ve etkili slayt gösterileri ve fotoğraf galerilerinden oluşan daha eksiksiz bir koleksiyon toplamaya karar verdim.
    İncelemede tartışılacak kaynakların çoğunlukla İngilizce olduğu konusunda sizi hemen uyarmak istiyorum, ancak buna kimin ihtiyacı varsa sezgisel olarak veya en az bir düzine olan çevirmenlerin yardımıyla anlayacağını düşünüyorum. . Ve dikkatlice ararsanız, bazı galeriler ve kaydırıcılar oluşturma tekniğinin açıklamalarını Rusça olarak bulabilirsiniz, çünkü web geliştiricilerimizin çoğu belirli bir proje üzerinde çalışma sürecinde önce kendileri için çeviri yapar ve ardından tümünün ayrıntılı açıklamalarını yayınlar. serbest erişimdeki manipülasyonları.
    Yani mesela ben de aynısını yaptım, bir ara yaratım mekanizması üzerinde çalışırken, önce burjuvazide bana uygun bir galeri seçeneği buldum, ne yaptığımı daha iyi anlamak için tercüme ettim ve daha sonra cüret ettim. Umarım, Highslide betiğinin kullanımı hakkında çeşitli uygulama varyasyonlarında çalışma örnekleriyle ilgili kötü bir makale değildir.
    Ve böylece, yeterince gereksiz şarkı sözü, hadi doğrudan incelemeye gidelim, bakalım, kısa açıklamaları okuyalım ve sitelerinize ilginç resim kaydırıcıları, fotoğraf galerileri, slayt gösterileri uygulamak için çok sayıda yeni jQuery eklentisi ve komut dosyası arasından seçim yapalım: otomatik ve manuel değişiklikle slaytlar, arka plan resmi kaydırıcıları, küçük resimli ve küçük resimsiz vb. ve benzeri...

    Of.Site | Demo

    Slayt gösterisi öğeleri, geçiş efektleri ve çoklu albüm seçenekleriyle eksiksiz, özelleştirilebilir bir jQuery resim galerisi. Tüm modern masaüstü ve mobil tarayıcılarla uyumludur.

    jQuery tabanlı tam ekran galeri oluşturmaya yönelik bir kılavuz. Buradaki fikir, gösterilen tam ekran görüntünün küçük resminin, oklar veya fare kokaini kullanarak görüntüler arasında hareket ederken yansımalarla birlikte yan tarafta gösterilmesidir. Büyük resimler, seçtiğiniz geçişe bağlı olarak slayt gösterisi stilinde yukarı veya aşağı doğru değişir. Görüntüyü tam ekran modunda görüntülemek veya sayfa boyutuna sığdırmak için arka planda yapan görüntüyü ölçeklendirme yeteneği.

    Paralaks Kaydırıcısı

    Paralaks Kaydırıcısı manuel kontrollerle slayt gösterisi şeklinde görüntüleri görüntülemek için ilginç bir çözüm. Resimlerin küçük resimlerinin orijinal yerleşimini çeker. Resmi site, kaydırıcının entegrasyonu ve yapılandırmasının tam bir dökümüne sahiptir.

    jQuery ile Minimalist Slayt Gösterisi Galerisi otomatik görüntü değiştirme öğelerinin yanı sıra ekranı manuel olarak kontrol etme ve küçük resimlerden oluşan bir açılır bloktan görüntüleri seçme özelliğine sahip mükemmel bir resim galerisi. Eksilerden, tam ölçekli görüntülerin izlenmediğine dikkat çekilebilir, ancak bu, bu galerinin minimalizmidir.

    Bu, otomatik olarak değişen görüntülere sahip tam ekran bir slayt gösterisi, akıllara durgunluk veren efektler yok, her şey basit ve zevkli.

    Mini Galeriçok çeşitli görüntü geçişlerine sahip, oldukça özelleştirilebilir bir jQuery eklentisidir. Minimit Gallery'yi kullanarak bir atlıkarınca, slayt gösterisi, basit bir döndürücü ve normal bir görüntü kaydırıcı biçiminde bir görüntü gösterimi düzenleyebilirsiniz.

    görüntüleri bir slayt gösterisi olarak görüntülemek için basit ve anlamsız bir yol sağlayan küçük (2kb) bir jQuery eklentisidir.

    tüm bilgisayarlarda, iPhone'larda ve mobil cihazlarda sezgisel kontrollere ve kusursuz uyumluluğa sahip hoş görünümlü bir javascript galerisidir. Kurulumu ve yapılandırması çok kolay

    Birçok Javascript ve jQuery resim kaydırıcısının aksine Slider.js, CSS3 geçişlerinin ve animasyonlarının verimliliğine dayalı hibrit bir çözümdür.

    Bu, HTML5 ve CSS3'te çeşitli sunumlar oluşturmak için tek sayfalık bir şablondur.

    diapo slayt gösterisi açık kaynaklı bir projedir. İsterseniz değişiklik veya iyileştirme önermekten çekinmeyin. Ücretsiz olarak indirip kullanabilirsiniz ve hiçbir şey ve hiç kimse bu kaydırıcıyı projelerinizde kullanmanızı engellemez. Kaydırıcının kurulumu kolaydır, sunulan içerik arasında ilginç geçişler vardır ve kaydırıcıya her şeyi yerleştirebilirsiniz, herhangi bir pervaz olmadan oldukça hızlı çalışır.

    web sitelerinde ve diğer web projelerinde slayt gösterileri oluşturmak için başka bir araçtan başka bir şey değildir. Tüm modern tarayıcılar, yatay ve dikey animasyonlar, özel geçişler için destek, geri arama API'si ve daha fazlası tarafından desteklenir. Slaytlarda herhangi bir html öğesini kullanabilirsiniz, anlaşılır ve yeni başlayanlar için erişilebilir, tamamen ücretsiz olarak dağıtılır.

    Çevik Geliştirme için JavaScript Slayt Gösterisi

    Bu harika jQuery eklentisi ile slayt gösterilerinizi özelleştirin. İçerik sunumunuzu gereksinimlerinize göre oluşturabilmeniz için son derece özelleştirilebilir bir araç. Harici verilerle veya CMS'nizdeki verilerle daha kolay entegrasyon için veri biçimi . Bu yeni bir sürüm ve sıfırdan yazılmıştır. Geliştiriciler, beyin çocukları ile tüm çalışma sürecini en anlaşılır ve anlaşılır şekilde açıklamaya çalıştılar.

    sıralanmamış listeleri çekici animasyon efektleriyle slayt gösterilerine dönüştürmenize izin veren bir jQuery eklentisidir. Bir slayt gösterisinde, sayıları veya küçük resimleri veya Önceki ve Sonraki düğmelerini kullanarak bir slayt listesi görüntüleyebilirsiniz. Kaydırıcı, bir küp (çeşitli alt görünümlerle), bir boru, bir blok ve daha fazlasını içeren birçok ilk animasyon türüne sahiptir.

    Web projelerinizde çeşitli içeriklerin her türlü sunumunu düzenlemek için eksiksiz bir araç seti. Burjuva adamlar, jQuery'nin büyüsünü kullanarak hemen hemen her türden çeşitli kaydırıcı ve galerileri klibe dahil ederek ellerinden gelenin en iyisini yaptılar. Fotoğraf kaydırıcı, fotoğraf galerisi, dinamik slayt gösterisi, karusel, içerik kaydırıcı, sekmeler menüsü ve genel olarak çok daha fazlası, yorulmak bilmez hayal gücümüzün dolaşması için yer var.

    Bu, basitlik göz önünde bulundurularak oluşturulmuş bir jQuery slayt gösterisi eklentisidir. Hem yeni başlayanlar hem de ileri düzey geliştiriciler için yalnızca en kullanışlı özelliklerle dolu olup, basit ama son derece etkili, kullanıcı dostu slayt gösterileri oluşturma yeteneği sağlar.

    - jQuery üzerine inşa edilmiş basit bir kaydırıcı, her açıdan basit, özel beceriler gerektirmiyor, birçok kişinin sitelerinde bir slayt gösterisi uygulamasının kullanışlı olacağını düşünüyorum. Eklenti, yavaş IE dahil tüm modern tarayıcılarda test edilmiştir.

    jbgallery jQuery javascript kitaplığında yazılmış bir tür kullanıcı arabirimi gerecidir. İşlevi, tam ekran modunda sitenin arka planı olarak büyük bir resim, kaydırıcı olarak birkaç resim göstermektir. Tüm görünüm modlarında görünüm kontrolleri bulunur. Kendi yolunda ilginç bir çözüm, bir yerde standart bile değil.

    Fotoğraflarınızı görüntüler arasında geçiş efektleriyle (görülen ve daha ilginç) bir slayt gösterisi olarak görüntülemek için kullanımı kolay bir jQuery eklentisidir. jqFancyTransitions, Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+ ile uyumludur ve kapsamlı bir şekilde test edilmiştir.

    Lightbox formundaki resimleri ve diğer bilgileri görüntülemek için ücretsiz bir jQuery eklentisidir. Kontroller, gölgeli arka plan ve her şey, basit ve zevkli açılır pencere.

    Lightbox serisinden başka bir jQuery eklentisi, utanç verici derecede küçük (9 KB) olmasına rağmen, birçok çalışma fırsatına sahip. CSS ile her zaman geliştirebileceğiniz veya özelleştirebileceğiniz, iyi tasarlanmış bir arayüz var.

    Zaten adından da anlaşılacağı gibi, hiçbir şey fantezi değil, tamamen eksik kontrollerle çok basit bir otomatik görüntü kaydırıcımız var. Kim bilir belki de minimalizmi ile bu slider dikkatinizi çekecektir.

    Farklı geçiş türlerine sahip görüntü döndürücü. Hem otomatik modda hem de tıklandığında çalışır, kurulumu oldukça kolaydır.

    - sadece bir kaydırıcı yerine tam teşekküllü bir resim galerisi. Küçük resim önizlemesi ve geçiş efektini seçme yeteneği, tüm tarayıcılar için tam destek, bir web projesine entegrasyonun ayrıntılı açıklaması ve ücretsiz dağıtım.

    Bu, scriptaculous/prototype veya jQuery kullanan kullanıma hazır slayt gösterilerinin bir uygulamasıdır. Horinaja, kaydırıcıya yerleştirilen içerikte gezinmek için tekerleği kullanmanıza izin verdiği için bir nevi yenilikçidir. Fare işaretçisi slayt gösterisi alanının dışındayken, değişiklik otomatik olarak gerçekleşir, fare işaretçisi slayt gösterisinin üzerine getirildiğinde kaydırma durur.

    Bir dizi en basit görüntü kaydırıcıdan bir çip, sırasıyla görüntüleme kontrollerinin varlığına rağmen, hem otomatik hem de manuel modlarda çalışır.

    s3kaydırıcı- jQuery eklentisi, sırasız bir resim listesinden bir slayt gösterisi oluşturur ve herhangi bir web sitesinde kolayca uygulanabilir.

    Bu, bant genişliğini korurken büyük miktarda fotoğrafı işlemek için optimize edilmiş bir jQuery eklentisidir.

    Vegas arka planı

    Vegas Background jQuery eklentisi, tümü slayt gösterisi öğeleriyle web sayfalarınıza güzel tam ekran arka plan resimleri eklemenizi sağlar. Eklentiyle çalışmanın inceliklerini dikkatlice incelerseniz, elbette yalnızca ihtiyacınız varsa birçok ilginç çözüm bulabilirsiniz.

    - "dürtme" yöntemini kullanarak makalelerin resimleri veya duyuruları için altyazılar ve basit kontroller içeren, kaydırıcı gibi bir kaydırıcı.

    görüntüleri görüntülemek için hafif (yaklaşık 5 KB) bir javascript. Büyük resimlerin otomatik olarak yeniden boyutlandırılması ve ölçeklenmesi, resmi tarayıcı penceresinde tam boyutta görüntülemenizi sağlar

    PikaChoose jQuery resim galerisinin 4. versiyonu çıktı! Pikachoose harika özelliklere sahip hafif bir jQuery slayt gösterisidir! Fancybox ile entegrasyon, mükemmel temalar (ücretsiz olmasa da) ve çok daha fazlası, eklenti geliştiricileri tarafından dikkatinize sunulmaktadır.

    Listenizdeki görüntülerin sayısını kontrol eder ve dijital gezinme olarak dinamik olarak bir dizi fotoğraf bağlantısı oluşturur. Ayrıca her bir görsele tıklamak ileri veya geri hareket edecek ve ayrıca resim üzerinde tıkladığınız alana göre görseller arasında gezinebileceksiniz (örneğin: resmin sol tarafına tıklamak slaytları ileri geri hareket ettirecek, sırasıyla, görüntünün sağ tarafı için).

    Herhangi bir WordPress şablonuna mükemmel şekilde uyan başka bir jQuery kaydırıcısı.

    "Nivo"nun bir başka geliştirmesi, bu stüdyodaki adamların yaptığı her şey gibi, eklenti yüksek kalitede yapılmıştır, 16 benzersiz geçiş efekti, klavyede gezinme ve çok daha fazlasını içerir. Bu sürüm, doğrudan WordPress için özel bir eklenti içerir. Bu nedenle, bu blog motorunun tüm hayranları için Nivo Slider, konu için tam olarak doğru olacaktır.

    Her boyuttaki görüntü için hızlı bir şekilde basit, etkili ve güzel bir kaydırıcı oluşturmanıza olanak tanıyan jQuery eklentisi.

    Pirobox- Bu, hafif bir jQuery "lightbox" komut dosyasıdır, görünüm, tüm kontrollerle görüntünün boyutuna göre otomatik olarak ayarlanan bir açılır pencere bloğunda gerçekleştirilir.

    Bu galerinin yaratıcıları, oldukça orijinal bir resim sunumu sunuyor. Görüntüler bir dalga biçiminde küçük resimler olarak gösteriliyor, küçük resme tıkladığınızda resmin orta boyutlu bir versiyonunu göreceğiz, ikinci kez tıklayın ve büyük bir resme sahip olacaksınız. Bunu bir deney olarak düşünebilirsiniz, ancak kabul etmelisiniz ki yeni, sıra dışı bir şey her zaman ilgi çekicidir.

    HTML5 ve jQuery ile tam ekran slayt gösterisi

    Slayt gösterileri oluşturmak ve görüntüleri tam ekran modunda görüntülemek için geliştiriciler, grubun makalelerinde daha önce ayrıntılı olarak açıklanan birçok fikir ve tekniği içeren, size zaten tanıdık gelen Vegas jQuery eklentisini kullandılar. HTML5 ses öğelerinin varlığı ve görüntüler arasındaki geçişlerin stili ilgi çekiyor.

    Codrops ekibinin bir başka gelişmesi, tam teşekküllü ve işlevsel bir resim galerisi, ancak onu anlatmanın ne anlamı var, onu görmelisiniz.

    Resim slayt gösterisi, resimler gözlerinizin önünde kayboluyor, efekt tek kelimeyle harika.

    JQuery kitaplığına dayalı bir JavaScript resim galerisi çerçevesidir. Amaç, web ve mobil cihazlar için profesyonel bir resim galerisi geliştirme sürecini basitleştirmektir. Bir açılır pencerede ve tam ekran modunda görüntülemek mümkündür.

    Yavaş yavaş alışmaya başladık ve Codrops ekibinden yeni çalışmalar bekliyoruz. Resimleri tam ekran modunda görüntülemek için lütfen harika bir 3B geçiş efektine sahip harika bir görüntü kaydırıcı edinin.

    WordPress için başka bir slayt gösterisi düzenleyici eklentisi. Hemen hemen her tasarıma kolayca entegre olur ve hem ileri düzey kullanıcılar hem de deneyimsiz kullanıcılar için çok sayıda özelleştirme seçeneği sunar.

    WordPress için yazılmış başka bir eklenti, bloglarınızdaki resimlerin veya diğer içeriklerin slayt gösterilerini düzenlemeyi çok daha kolaylaştıracaktır.

    Wordpress entegrasyonu için güzel bir slayt gösterisi eklentisi. Xili-floom-slayt gösterisi otomatik olarak yüklenir ve kişisel ayarlara da izin verilir.

    Slimbox2 görüntüleri "Lightbox" efektiyle görüntülemek için iyi kurulmuş bir WordPress eklentisidir. Tarayıcı penceresinde otomatik slayt gösterisini ve yeniden boyutlandırmayı destekler. Ve genel olarak, bu eklentinin bu serideki diğer eklentilere göre birçok avantajı vardır.

    Bu eklenti, pencere öğesi, WordPress tarafından desteklenen web siteniz veya blogunuz için dinamik, kontrol edilebilir slayt gösterileri ve sunumlar oluşturmanıza olanak tanır.

    Bu WordPress eklentisi, gömülü galeri görüntülerini basit ve esnek bir slayt gösterisine dönüştürür. Eklenti, FlexSlider jQuery görüntü kaydırıcısını ve kullanıcı tercihlerini kullanır.

    saf Javascript kullanılarak desteklenen ve görüntülenen SmugMug, Flickr, MobileMe, Picasa veya Photobucket RSS beslemesinden fotoğrafların, resimlerin slayt gösterilerini düzenlemek için bir WordPress eklentisidir.

    Sadece WordPress için basit bir kaydırıcı değil. Gereksiz ve hantal bir şey yok, iş minimalist tarzda yapılır, vurgu istikrar ve hızdır, blog yönetim motoruna mükemmel bir şekilde bağlanır.

    Bence Skitter, piyasadaki en iyi wordpress kaydırıcılarından biridir. Kararlılık ve hız, çok belirgin olmayan kontroller, geçiş efektleri ve temayla oldukça basit bir bağlantı çekiyor.

    Slayt gösterisi modunda görüntüleme özelliğiyle sitenizdeki bir resim galerisini kolayca ve hızlı bir şekilde düzenleyebileceğiniz bir WordPress eklentisidir. Ekran, otomatik veya küçük resimler ve resim yazılarıyla tamamen kontrol edilebilir.

    Of.Site | Demo

    Bir gönderi/sayfa için tüm resimleri slayt gösterisi olarak gösterir. Kolay kurulum. Bu eklenti, geçiş animasyonu sürümü için Adobe Flash gerektirir, Flash bulunamazsa kaydırıcı normal şekilde çalışır.

    Gönderiler için resimler ve makalelerin kısa önizlemelerini gösteren WordPress için başka bir basit kaydırıcı. Bu blogda zaman zaman böyle bir eklenti kullanıyorum.

    Meteor Slides, aralarından seçim yapabileceğiniz yirmiden fazla geçiş stiline sahip bir jQuery wordpress kaydırıcısıdır. Yazar, eklentiyi muhtemelen işin hızını ima eden bir "meteor" olarak adlandırdı, belki de meteorik bir şey fark etmedim.

    oQey Gallery, gömülü video ve müzik özelliklerine sahip, wordpress için slayt gösterisi öğeleri içeren eksiksiz bir resim galerisidir.

    Web sitelerinde ve bloglarda görüntüleri ve videoları görüntülemek için flash animasyon öğeleri içeren bir slayt gösterisidir. Bu kaydırıcıyı herhangi bir web sitesine koyabilir, istediğiniz boyutta ve istediğiniz içerikle koyabilirsiniz.

    Flash Galerisi eklentisi, gönderi başına birden çok albüm desteği, tam ekran göz atma ve slayt gösterisi moduyla normal galerilerinizi büyüleyici resim duvarlarına dönüştürür.

    WOW Slider, harika görsel efektler (Patlama, Uçma, Panjurlar, Kareler, Parçalar, Taban, Solma, Yığın, Dikey Yığın ve Doğrusal) ve profesyonelce oluşturulmuş şablonlara sahip WordPress için bir jQuery görüntü kaydırıcısıdır.

    Promosyon Kaydırıcısı, bir sayfada basit bir slayt gösterisi veya birden fazla dönen reklam bölgesi oluşturmayı kolaylaştıran bir jQuery eklentisidir, çünkü kaydırıcıda ne gösterdiğiniz ve modülün genel olarak nasıl çalıştığı üzerinde tam kontrole sahip olmanız için son derece özelleştirilebilir.

    | Demo

    Sürüm 2.4'teki yenilikler: doğrudan WordPress düzenleyici aracılığıyla fotoğrafları sürükleyip bırakma desteği ve ana görüntülere fotoğraf bağlantıları ekleme yeteneği. (IE8'de hatalar olabilir, tüm büyük tarayıcılarda harika çalışır. Yazarlar gelecekte IE8 için tam destek sözü verirler.)

    | Demo

    Bu incelemenin son akoru, görüntüleri seçme ve değiştirmenin ilginç görsel efektlerine sahip başka bir kaydırıcı olan WordPress için bu eklenti olacak.

    Yukarıdakilerin hepsine bakıyorum ve merak ediyorum, bir sürü havalı insan var ve bu, çeşitli web geliştiricilerinin son zamanlarda web projelerinde görüntüleri düzenleme konusuna yığdıkları her şeyden çok uzak. Galeriler ve slayt gösterileri oluşturmak için bu kadar harika çözümleri hayata geçirmenin artık mümkün olması harika.
    Sessizce, bu koleksiyonda kendiniz için ilginç bir şey bulacağınızı, kendi benzersiz galerinizi veya kaydırıcınızı kapatacağınızı, kullanıcılarınızın zevkine ve tabii ki sevdiklerinize ve onsuz nerede bulacağınızı ummaya cesaret ediyorum. .

    Bu eğitimde size minimalist ama aynı zamanda rahat ve işlevsel bir tasarımın nasıl oluşturulacağını göstereceğim. jQuery fotoğraf galerisi veya istediğiniz gibi bir resim galerisi. Galeri, kategoriler oluşturma ve ardından filtreleme özelliğine sahiptir. Bir slayt gösterisi çalıştırmak da mümkündür. Galeri tüm tarayıcılarda çalışır, bu nedenle uyum konusunda herhangi bir sorun yaşanmayacaktır.

    Bu galeriyi oluşturmak için iki ücretsiz kitaplık kullanılacak jQuery: Bataklık Ve Güzel fotoğraf. Galerinin oluşturulmasını büyük ölçüde basitleştirirler. Her zaman olduğu gibi, demo sayfasında çalışmanın sonucunu görebileceğiniz gibi, çalışma galerisinden ve tüm kaynak dosyalardan arşivi indirebilirsiniz. Tek olumsuz, söylemem gerekirse, büyük resimler için küçük resimlerin manuel olarak oluşturulmasıdır. Diğer her şey için bu galeri ilgiye değer.

    KAYNAKLAR

    HTML işaretlemesi

    Öncelikle, kategori listesiyle paneli inceleyelim, bu madde işaretli bir listedir ul . Ayrıca, listedeki her öğenin benzersiz bir sınıf adı olmalıdır.


    • Kategoriler:

    • Tüm

    • Kategori 1

    • Kategori 2

    • Kategori 3

    • Kategori 4







  • resim adı




    • Yukarıda bahsedildiği gibi, liste öğeleri galerideki resimlerdir. Listenin her öğesi bileşenleri içerir. Bu, görüntünün kendisi veya daha doğrusu küçük resmi ve açıklamasıdır. Küçük resim, ana resme bir bağlantıdır. Javascript'i çağırmak ve ana görüntüyü açmak için rel özelliği gereklidir.

    Ayrıca 2 önemli şeyi de unutmayın, li list öğesinin benzersiz bir data-id özelliğine sahip olması gerekir. Veri tipi özelliği, listesini yukarıda açıkladığım kategori sınıfını içerir. Her şey işaretleme ile ilgili gibi görünüyor.

    CSS stilleri

    Hazır bir kitaplık kullandığımız için stiller üzerinde durmayacağım. Güzel fotoğraf, görüntüyü büyütmekten sorumlu olan ve çok fazla css kodu var. Bununla birlikte, büyütülmüş görüntü için 5 tasarım seçeneği olduğunu belirtmek gerekir, ancak ideal olarak yalnızca 3'tür, çünkü iki seçenekte yalnızca yuvarlama kaldırılır.

    Bu nedenle, küçük resimler ve kategori listesi için yalnızca CSS stillerini göstereceğim.

    Portföy kategorisi (margin-bottom:30px; )
    .portfolio-categ li(
    görüntüleme: satır içi;
    sağ kenar boşluğu: 10 piksel;
    }
    .resim bloğu(
    Ekran bloğu;
    konum: göreli;
    }
    .resim bloğu resmi(
    kenarlık: 1 piksel katı #d5d5d5;
    sınır yarıçapı: 4px 4px 4px 4px;
    arka plan:#FFFFFF;
    dolgu: 10 piksel;
    }
    .image-block img:hover (
    kenarlık: 1 piksel katı #A9CF54;
    kutu gölgesi:0 0 5px #A9CF54;
    }
    .portföy alanı li (
    kayan nokta: sol;
    kenar boşluğu: 0 12 piksel 20 piksel 0;
    taşma: gizli;
    genişlik: 245 piksel
    dolgu: 5 piksel;
    }
    .home-portfolio-text (margin-top:10px; )
    li.active a ( text-decoration:underline; )

    Prensip olarak, stillerle ilgili her şey açık olmalıdır. Kategorilerin sıralanmasını sağlamak için display özelliği satır içi olarak ayarlanır. Görüntüye kontur efekti vermek için arka plan rengi (beyaz) ve 10 piksellik dolgu ayarlanır. Liste öğesi boyutları .portfolio-area li'de ayarlanır.

    jQuery

    Ve son olarak, tüm dersin uğruna en önemli şey. Bu, jQuery kodudur. Resimleri kategoriye göre filtreleyerek başlayalım.

    // Portföy alanının tüm alt öğelerini seçin ve bir değişkene yazın
    var $data = $(".portfolio-area").clone();

    $(".portfolio-categ li").click(function(e) (
    $(".filter li").removeClass("aktif");

    Var filterClass=$(this).attr("class").split(" ").slice(-1);

    Eğer (filterClass == "all") (
    var $filteredData = $data.find(".portfolio-item2");
    ) başka (
    var $filteredData = $data.find(".portfolio-item2");
    }
    $(".portfolio-area").quicksand($filteredData, (
    süre: 600
    AdjustHeight: "otomatik"
    ), işlev() (

    LightboxPhoto();
    });
    $(this).addClass("etkin");
    yanlış dönüş;
    });

    clone() yöntemini ve bir seçiciyi kullanarak, .portfolio-area'nın tüm alt öğelerini seçip $data değişkenine yazarız. Ardından, .portfolio-categ sınıfıyla listenin li öğesi olan kategorilerden birine yapılan tıklamayı izleriz. RemoveClass'ı("aktif") kaldırarak tüm kategorileri pasif hale getiriyoruz, eğer bu yapılmazsa, zamanla tüm kategoriler aktif olacak ve filtreleme duracaktır.

    Liste elemanına tıkladığımız için, bu seçici liste elemanını, yani li'yi içerir, ondan sınıf özniteliğinin değerini alırız ve sınıf adını birkaç parçaya bölmek için bölme yöntemini kullanırız, sınır bir boşluktur (yani, sınıf "all active" ise, bölme işleminden sonra bir "all" ve "active" dizisi elde ederiz). Ardından, dilim yöntemini kullanarak dizinin ilk öğesini (bizim durumumuzda "all") seçiyoruz ve elde edilen sonucu filterClass değişkenine yazıyoruz. Boşluk yoksa sınıf adı değişmez.

    Ardından, filterClass değişkenindeki dizenin olup olmadığını kontrol ederiz. Tümü, ardından .find yöntemini kullanarak yukarıda ele aldığımız $data dizisinden portföy-item2 sınıfına sahip tüm öğeleri seçiyoruz. Seçilen öğeler (ve bunlar listenin tüm öğeleridir, yani tüm resimlerdir) filteredData değişkenine yerleştirilir.

    Aksi takdirde, filterClass şuna eşit değilse: Tümü, o zaman filterData değişkenine listenin tüm öğelerini değil, yalnızca veri türü özniteliği kategori sınıfıyla eşleşenleri koyacağız. Kısacası, yalnızca bir kategorinin öğeleri.

    Son olarak, ortaya çıkan değişkeni kütüphaneye aktarıyoruz. jquery bataklık, görüntü filtreleme gerçekleştirir. Her şey filtreleme ile ilgili.

    Şimdi, açılır penceredeki görüntünün yakınlaştırılmasıyla ilgili. Burada her şey çok daha basit.

    jQuery("a").prettyPhoto((
    animasyon Hızı: "hızlı",
    slayt gösterisi: 5000
    tema: "facebook",
    show_title: yanlış
    overlay_gallery: yanlış
    });

    rel özniteliği prettyPhoto ile başlayan bir bağlantıya yapılan tıklamayı izler. Daha sonra kütüphane devreye giriyor. güzel fotoğraf ve görüntü mucizevi bir şekilde büyür. Bu arada, birkaç parametreyi de geçiyoruz. Animasyon hızının hızlı olması, slayt gösterisinde gecikmenin 5 saniye olması, Facebook teması (toplamda 5 tema vardır, bunlar images / prettyPhoto klasöründedir) ve ayrıca resim adının görüntülenmesini yasaklıyoruz ve fare ile üzerine gelindiğinde resmin büyütülmesi.

    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. Komut dosyasının 2 yıldır desteklenmemesine ve yazarın geçiş yapmasına rağmen benzer proje harika çalışıyor ve göze hoş gelmeye devam ediyor.

    Ana artılar (+)

    1. Basitlik kurulum, konfigürasyon ve kullanım. 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.
    2. Biraz etkiler hız site yükleniyor
    3. uyarlanabilirlik. Galeriniz telefonunuzda, dizüstü bilgisayarınızda ve hatta TV ekranınızda güzel görünür.
    4. Ayarların ve işlevlerin bolluğu, HTML etiketlerinin nitelikleri aracılığıyla ayrı ayrı bağlanır.
    5. Dokunmatik cihazlar için destek.
    6. Destek video.
    7. Fırsat yavaş yüklenme resimler.
    8. Ve bilgili kullanıcılara hitap edecek pek çok başka şey.

    eksiler (-)

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

    1. 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ı arasına ekleyebilirsiniz. Ve :

      <komut dosyası kaynağı= "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> komut dosyası>
    2. Fotorama.css ve fotorama.js'yi dahil ediyoruz. Etiketlerin arasına aşağıdaki kodu yapıştırın Ve, WordPress'te bu, temanın başlık dosyasında (header.php) yapılır. "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stil sayfası">
    3. На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

    Второй вариант подключения [шорткод + Autoptimize]

    В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

    1. Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
    2. Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
    3. Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> "; ) add_shortcode("foto","sd");
    4. Şimdi, bir makale yazarken, sonundaki kısa kodu girin

    Galerinin doğrudan oluşturulması

    Galeri kullanılarak HTML kodunda işlenir konteyner

    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ıya girin
    c sınıfı="fotorama" .

    Ş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 resme bağlantı vermek 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:

    Diğer

    data-autoplay= "true" //autoplay data-autoplay="3000" //ms cinsinden slaytlar arasındaki aralık data-caption ="Bir" //resimlere yapılan yorumlar data-keyboard = "true" //oklarla gezin veri karıştırma= "true" //resimler karışık veri gezinme= "top" // küçük resimler üstte veri döngüsü = "true" //döngü kaydırma Her şeyi bağlamayı deneyelim ve bir video ekleyelim
    data-caption ="Bir" data-keyboard ="true" data-shuffle ="true" data-navposition ="top" data-autoplay ="true" data-loop ="true"> "bazı yorumlar 1"> "bazı yorumlar 2"> Sevdiğin işi bulmak için

    Herkese selam! Bu yazıda, jQuery ile güzel ve uygun şekilde sıralanabilir bir galeri nasıl yapılır.

    Güzel, kolayca sıralanabilir bir galeri, siteniz için sizi ve ziyaretçilerinizi memnun edecek harika bir şeydir. Bugün, kütüphane için kurulumu ve yapılandırması çok kolay bir eklentiye bakacağız. jQuery– Filtreleme .

    Kullanım kolaylığına rağmen, eklenti oldukça hafif ve etkilidir. Daha ayrıntılı olarak bakalım.

    Gösteri

    Eklentinin nasıl çalıştığını görmek için resmi siteye gidin ve işte karşınızda!

    Şehre, doğaya, sektöre, gün doğumuna, gün batımına göre sıralamayı veya tüm fotoğrafları göstermeyi (varsayılan) seçebilirsiniz. bir düğme var Karıştır, görüntüleri karıştırmanıza olanak tanır. düğmeler ASC Ve TANIM resimleri sırasıyla artan ve azalan düzende sıralayın. Bir görseli konuma veya açıklamaya göre aramak istiyorsanız, açılır listeden istediğiniz öğeyi seçin ve arama alanına bir sorgu girin. Fare ile görüntünün üzerine geldiğinizde, görüntü siyah beyazdan renkliye dönüşür.

    Kurulum

    Kütüphaneyi indirmek için butona tıklayın İndirmek veya kullan NPM:

    npm filterizr'ı kur

    Eklenti zaten kutudan çıktığı gibi yapılandırılmıştır, ancak varsayılanları geçersiz kılmak istiyorsanız aşağıdakilerden birini yapabilirsiniz:

    1) Parametreleri olan bir nesneyi yapıcıya iletin jQuery

    var filterizd = $(".filtr-container").filterizr((
    // seçenekler
    })

    2) kullanarak parametreleri yeniden yazın setOptions() nesnedeki yöntem Filtreleyici.

    Filterizd.filterizr("seçenekleri ayarla", (
    // seçenekler
    })

    Seçenekler

    Varsayılan Seçenekler:

    Seçenekler = (
    animasyonSüresi: 0.5
    geri aramalar: (
    onFilteringStart: function() ( ),
    onFilteringEnd: function() ( )
    },
    gecikme: 0
    gecikmeModu: "aşamalı",
    kolaylaştırma: "kolaylaştırma",
    filtre: "hepsi",
    filtreOutCss: (
    opaklık: 0
    dönüştürme: "ölçek(0,5)"
    },
    filtreInCss: (
    opaklık: 0
    dönüştürme: "ölçek(1)"
    },
    düzen: "aynıBoyut",
    seçici: ".filtr-container",
    kurulum Kontrolleri: doğru
    }

    Daha ayrıntılı talimatlar ve her bir parametrenin açıklaması şu adreste bulunabilir:

    1. jQuery galerisini kullanarak portföy uygulaması

    Proje küçük resimleri, sol sütundaki fare imlecinin konumu değiştirilerek kaydırılır. İçerik alanı, projelerin adı, açıklaması ve kullanılan teknolojilerin listesiyle birlikte büyütülmüş bir görüntü görüntüler. Küçük resimler arasında gezinirken, proje bilgileri çarpıcı bir animasyon efektiyle birinden diğerine değişir. Açıklama sayfasındaki bir resme tıklandığında, jQuery animasyonu kullanılarak da büyütülür. Ayrıca tüm portföy sayfasının çarpıcı zarif görünümünü de not etmek istiyorum. Demoya bakın.

    2. CSS ve jQuery kullanarak bir portföy sitesinin süper uygulaması

    Bir fotoğrafçının portföy sitesinin mükemmel bir uygulaması. Bir menü öğesine tıkladığınızda, ekrana dağılmış karelerden içeriği sabit yükseklik ve genişlikte bir alan toplanır. Daha fazla bilgiyi sabit bir alana sığdırmak için içerik kaydırma sağlanır. Portföyden çalışma gösterme uygulaması alışılmadık bir şekilde uygulanır: küçük resme tıkladığınızda, fotoğraf, tarayıcı penceresi yeniden boyutlandırıldığında otomatik olarak ölçeklenen bir arka plan görüntüsü olarak görüntülenir.

    3. jQuery ile portföy duvarı

    Çevrimiçi bir portföy oluşturmak için orijinal çözüm. Proje blokları (küçük resimler ve bağlantı içeren kısa bir açıklama) arka arkaya birkaç kez görüntülenir; tarayıcı penceresi değiştiğinde, bloklar animasyonlu bir efektle sayfada eşit olarak yeniden dağıtılır. Her projede, aralarında geçiş oklar kullanılarak gerçekleştirilen birkaç küçük resim olabilir. Bağlantıya tıklamak, metnin kaydırılarak yarı saydam sabit yükseklikte bir blok üzerine yerleştirildiği tam açıklamalı bir sayfa açar. Projenin ölçeklenebilir görüntüsü sayfanın arka planı olarak kullanılır. Harika görünüyor - demoya bakın.

    4. Pürüzsüz jQuery sayfası kaydırma

    Dikey ve yatay kaydırmanın uygulanması.

    5. jQuery Eklentisi "Sürüklenebilir Görüntü Kutuları Izgarası"

    İçerik blokları ve resimlerden oluşan sürüklenebilir bir ızgara. Izgara fare ile sürüklenebilir (herhangi bir fare düğmesine basın ve istenen yönde sürükleyin). Bir küçük resme tıkladığınızda, ana görüntü ekranın tam genişliğine genişler. Metin içeren karanlık bir bloğa tıkladığınızda, daha ayrıntılı bir açıklama içeren bir alan ortaya çıkar.

    6. Tek Sayfa Portföy Sitesi

    Animasyonlu içerik değişikliği ile tek sayfa site. Demo sayfasında, efekti görmek için menü sekmelerinde gezinin.

    7. Blokların görüntüsünü jQuery olarak değiştirme

    Bu jQuery eklentisi "Görüntüleme Seçeneklerini Değiştir" ile sayfada, ziyaretçinin tablo şeklindeki bilgi ekranından blokların açıklamasını içeren tam bir görünüme geçeceği bir anahtar uygulayabilirsiniz. Bir portföy için mükemmel.

    8. Google'dan jQuery galerisi ve harita içeren bir restoran web sitesi şablonu

    Bir kafe web sitesi için oluşturulmuş özgün bir jQuery çözümü. Şablon, menüden yemekleri görüntülemek için ilginç bir jQuery galerisine sahiptir. Galerideki resimler, tarayıcı penceresinin boyutuna göre ölçeklenir. İlk olarak, galeri, yemeklerin adı ve kısa açıklamasıyla birlikte küçük resimleri gösterirken, tam boyutlu fotoğraf arka planda karartılmış olarak görüntülenir. Mevcut fotoğraflar arasında gezinme, oklar veya fare tekerleği kullanılarak yapılır. Galeri modunda fareye tıklamak, açıklamaları olan küçük resimleri kaldıracak ve orijinal büyük resimleri pencerenin tam genişliğine kadar uzatılmış olarak görüntülemenizi sağlayacaktır. Galeriden site menüsüne dönmek için sağ üst köşedeki linke tıklamanız gerekmektedir. Şık jQuery galerisine ek olarak, şablona çok etkili bir şekilde Google'dan bir harita entegre edilmiştir.

    9. Plasm The Wall eklentisi

    Sabit bir alan içinde ekranın etrafında fareyle sürüklenebilen bir tür fotoğraf "duvarı" veya HTML blokları oluşturmak.

    10. Öğeleri bir daire içinde görüntülemek için eklenti

    Belirli bir çaptaki bir daire boyunca çeşitli öğelerin sayfada görüntülenmesi.

    11. "Site geliştirme aşamasında" saplama sayfası

    Sayfa, veritabanına kaydedilen ve sitenin açılışı hakkında bildirim göndermenin mümkün olacağı bir e-posta adresi gönderme özelliğini uygular. Sayfa ayrıca, jQuery eklentisi Nivo Slider v.100 temelinde uygulanan küçük bir slayt gösterisi ile dekore edilmiştir. 2.3.

    12. QuickFlip 2 Eklentisi

    Bununla birlikte, bir bağlantıya tıkladığınızda dönen bir kartvizitin ilginç bir efektini oluşturabilirsiniz.

    13. jQuery tıklama haritası

    Fikir, kullanıcı tıklamalarını izlemektir. Eklentiyi demo sayfasında çalışırken görmek için tıklayın ve ardından "Analiz Et" düğmesine tıklayın. Yarı saydam bir arka plan üzerinde ise fare ile tıkladığınız noktalar görüntülenecektir.

    Güzel bir ekran klavyesinin uygulanması. Asla bilemezsin, işe yarayacağın bir şey için.

    15. jQuery Notları

    Notlarla broşürlerin uygulanması. Metin düzenlenebilir ve notların kendisi silinebilir veya ekranda taşınabilir. Bir örnek görmek için demo sayfasına "Demo" sekmesine gidin.

    16. jQuery ile Derecelendirme

    17. HoverAttribute

    Bağlantıların ilginç tasarımı: Bir bağlantının üzerine geldiğinizde bağlantısı değişir. Havalı görünüyor.

    18. Kayıt formu için jQuery Fancy captcha

    Kayıt formu için captcha'nın uygulanması. Eklenti, sürükleyip bırakarak artan sırada ayarlamanız gereken bir dizi sayıdır. Kaydın bir robot değil, gerçek bir kişi olduğunu doğrulamanın oldukça ilginç bir yolu.

    Sayfayı düzgün bir şekilde yukarı veya aşağı kaydırmak için kullanılabilecek ekranın alt kısmında düğmeler görüntülenir.

    20. Çevirmen. jQuery eklentisi "jTextTranslate"

    Eklenti, Google Language API'yi kullanır ve metni Google tarafından sağlanan herhangi bir dile çevirebilir. Çeviri yapmak için paragrafın yanındaki simgeye tıklamanız ve açılır listeden çevirmek istediğiniz dili seçmeniz gerekir.

    21. jQuery sayfalandırma eklentisi

    Sayfalandırma için kaydırılabilir bağlantıların harika uygulaması. jQuery kullanılarak uygulandı.

    22. jQuery Notlar Eklentisi

    Bu jQuery eklentisi, sitenize "kağıt" notlar uygulamanıza izin verecektir.

    23. jQuery eklentisi "Catch404"

    24. jQuery eklentisi jBreadCrumb

    Animasyonlu bir gezinme zinciri "Breadcrumbs" oluşturmak için eklenti

    25. Makara eklentisi

    26. jQuery eklentisi "Dans Pisti"

    ürün sayfası uygulaması için jQuery eklentisi. Bir ürün resmine tıkladığınızda, açıklaması görünür.

    27. jQuery eklentisi "3D etiket bulutu"

    28. 3D CSS Düğmeleri

    29. Animasyonlu yatay sayfa kaydırma

    jQuery dikey kaydırma efekti. Tek sayfalık siteleri ve portföy sitelerini uygulamak için mükemmeldir. Efekti görüntülemek için demo sayfasındaki menü öğesine tıklayın.

    30. jQuery Derecelendirme Sistemi Eklentisi

    Bir şeyin değerlendirmesini uygulamak için jQuery etkisi. Dairelerin rengi ve altındaki metin, fare imlecinin hangisinin üzerinde olduğuna bağlı olarak değişir.

    31. jQuery Panelinin Büyüsü

    Sitede gezinmeyi uygulayan bir eklenti. Bu durumda, siteniz, ilginç bir jQuery efekti ile geçişin gerçekleştirildiği bir belgeler ızgarası olarak sunulur.

    Küçük web siteleri ve web uygulamaları oluşturmak için bu eklentiyi kolayca kullanabilirsiniz. Ayrıca portföy sitelerinde de fena durmayacaktır.

    32. Mootools, MoogressBar eklentisinde yükleme göstergesi

    Etkili yükleme göstergesi.

    33. Mootools eklentisi "CwComplete"

    Eklenti, alanı doldururken Ajax kullanarak olası doldurma seçeneklerini önerirken, yalnızca alana zaten girilmiş olan metni karşılayan seçenekleri filtreleyip gösterir.

    34. jQuery ve CSS3 ile harika ajax sohbeti

    İletişime başlamadan önce, ziyaretçinin takma adını ve e-posta adresini girmesi gerekir. Sağdaki sütun, sohbete kaç kişinin giriş yaptığını gösterir. Kullanılan teknolojiler: PHP, MySQL, jQuery, CSS.

    35. "Proje önerin" sayfasının uygulanması

    Ziyaretçiler yeni bir teklif ekleyebilir veya mevcut bir teklif için oy kullanabilir. İzleyicilerinin site hakkındaki görüşlerini öğrenmek isteyenler için mükemmel bir çözüm. Ayrıca, bu sayfa projenizin daha da geliştirilmesi için yeni fikirler toplamak için kullanılabilir. Kullanılan teknolojiler: PHP, MySQL, jQuery, CSS

    36. PHP ve jQuery ile Oylama/Yoklama Uygulaması

    37. Ajax "TinyEditor" için oylama

    Sitede anketlerin doğru uygulanması. Kullanılan teknolojiler: jQuery, Ajax, PHP ve MySQL.

    Sitede oylamanın uygulanması için çok ilginç bir çözüm. Blokları yukarı ve aşağı sürükleyerek, resimleri fare ile yakalayarak, sayfa üzerinde istediğiniz sırayla düzenleyebilirsiniz. Bloğu ne kadar yükseğe bırakırsanız, o kadar iyi derecelendirilir ve buna göre blok en alta yerleştirilirse, onu en az sevdiğiniz anlamına gelir. Blokları istediğiniz sırayla düzenledikten sonra oyların dikkate alınması için "Anket gönder" butonuna tıklamanız gerekmektedir. Sonuçlar sayfası oylama sonuçlarını ve oy veren ziyaretçi sayısını gösterir. Kullanılan teknolojiler: CSS, PHP, MySQL, jQuery.

    Girilen bilgilerin doğrulanması ile basit bir Ajax yorum sistemi. Yorumlar bir veritabanında saklanır. Kullanılarak uygulandı: PHP, MySQL, CSS, jQuery.

    40. Dosya indirme sayacı

    41. PHP kullanan bir sayfada notlar

    Kullanılan teknolojiler: PHP, jQuery, CSS.

    Menü öğeleri arasında gezindiğinizde, sayfa yeniden yüklenmeden içerik yüklenir. Kullanılan teknolojiler: PHP, jQuery, CSS.

    43. Google teknolojisini kullanan jQuery site araması

    Google AJAX Arama API'sini kullanarak site aramasını uygulama. Ziyaretçiye hem sitenizde hem de internette arama yapma imkanı sağlayabileceksiniz. Aynı zamanda, arama sadece sitenin sayfalarında değil, resimlerde ve multimedya dosyalarında da yapılabilir.

    44. Görüntü efekti üzerinde jQuery bindirme açıklaması

    Etkisi çok ilginç, portföy uygulamasında kullanılabilir. Bir resme tıkladığınızda, yarı saydam bir arka planla karartılır ve nelere dikkat etmeniz gerektiğini açıklayan bir açıklama görüntülenir.

    45. jQuery ile Soru-Cevap Sayfası Uygulamak

    Sitedeki SSS sayfasının jQuery uygulaması. Sayfanın üst kısmında bir soru listesi görüntülenir. Bir soruya tıkladığınızda, sayfa sorunsuz bir şekilde seçtiğiniz soruya kayar ve yanıtıyla birlikte etkin soru farklı bir renkle vurgulanır. Etkin yanıt alanında soru listesine geri dönmek için bir bağlantı da görünür.

    46. ​​​​Ajax'ta web sitesi. İçerik, sayfayı yeniden yüklemeden yüklenir

    47. jQuery ile arka plan ve metin renklerini değiştirin

    Fareyi farenin üzerine getirdiğinizde renk değişir. Renk değişimini rastgele yapabilirsiniz.

    48. jQuery Kullanan Site Rehberi

    Bu ilginç eklenti ile, ziyaretçiye sitenize ilk kez geliyorsa ana işlevleri tanıtabilirsiniz. Sayfa yüklendiğinde, sağ üst köşede siteyi gezmenizi öneren bir blok açılır. Bir ziyaretçi sitenizi ilk kez ziyaret ediyorsa, ana özellikleri tanımak için küçük bir rehber kullanabilir. Bu durumda sayfa karartılır ve her adımda gerekli bloklar bir işaretle işaretlenir. Ziyaretçi sitenizi daha önce ziyaret etmişse, siteyi gezdirerek pencereyi kapatabilir.

    49. "Joyride Kit" sitesinde sanal tur

    Bu eklenti ile ziyaretçiye sayfanın ana işlevselliğini tanıtabilirsiniz. Bu, öğelerin sıralı bir açılır pencere açıklaması şeklinde yapılır. Ziyaretçi, İleri düğmesine tıklayarak tüm ipuçlarını görebilir veya haçı kullanarak çevrimiçi turu kapatabilir (bu sayfaya ilk gelişi değilse).

    ");

    Devamını oku: