jquery portföy galerisi. Fotorama - uyarlanabilir jQuery galerisi, kurulu ve özelleştirilmiş. JQuery galerisini kullanarak bir portföyün uygulanması

Komut dosyaları koleksiyonumuzda web siteniz için küçük, hatta basit ve işlevsel eklentiler bulabilirsiniz. Maliyete kadar yuvarlanma jQueryGaleri, kaydırma, yakınlaştırma, küçük resimleri görüntüleme ve çok daha fazlasını sağlayan kullanıcı dostu bir tasarımla dijital fotoğraflardan oluşan bir galeriyi kolayca düzenleyin coris fonksiyonları. Profesyonel web siteleri için bir çözüm olmasının yanı sıra, önemli projeler için de animasyon ve diğer özel efektler sunmaktadır.

Yardım için Koshtiv jQuery görselleri Sayfayı tekrar meşgul etmeden ve trafik akışını arttırmadan tekrar izleyebilirsiniz. Eklentinin görünümleri, galeriyi manuel ve kullanıcı dostu bir görünümde görüntüleyerek görüntü geliştirmeyi gerçek zamanlı olarak optimize etmenize olanak tanır. Çözümlerin kullanılabilirliğinin tamamı sizin elinizde jQuery fotoğraf galerisi Artık bunu eğlenceli bulduğunuz için tam olarak böyle görünebilirsiniz. Senaryoların sunumları çeşitli platformlarda test edilmiş ve mucizevi bir çılgınlıkla karşılanmıştır.

Merhaba sevgili okuyucular! Bu derste size minimalist ama el yapımı ve işlevsel bir tasarımın nasıl oluşturulacağını göstereceğim. jQuery fotoğraf galerisi, veya isterseniz galeriyi tasvir edin. Galeride gelişmiş filtrelemeye sahip kategoriler oluşturabilirsiniz. Bir slayt gösterisi başlatmak da mümkündür. Galeri tüm tarayıcılarda çalıştığı için adaptasyonda herhangi bir sorun yaşanmayacak.

Bu galeriyi oluşturmak için iki seçim olacak kedisiz kütüphaneler : Bataklıkі Güzel fotoğraf. Koku kesinlikle galeriden uzaklaşacaktır. Çalışmanın sonucunu gördüğünüz anda demo sayfasında görüntüleyebilir, ayrıca çalışan galerinin arşivlerini ve tüm çıktı dosyalarını indirebilirsiniz. Tabiri caizse tek dezavantajı, büyük resimler için minyatürlerin manuel olarak oluşturulmasıdır. Ve bu diğer şekilde galeri Varta uvagi. Aynen böyle!

HTML düzeni

İlk olarak, bir kategori listesi, bir etiket listesi içeren panele bir göz atalım. Üstelik listedeki dış görünüm öğesi benzersiz bir sınıfa ait.

1
2
3
4
5
6
7
8

<ul class = "portföy kategorisi filtresi" >
<li > Kategoriler:</li>
<li sınıfı = "tümü aktif" > Tümü</a>
<li sınıfı = "kedi-öğesi-1" > Kategori 1</a>
<li sınıfı = "kedi-öğesi-2" > Kategori 2</a>
<li sınıfı = "kedi-öğesi-3" > Kategori 3</a>
<li sınıfı = "kedi-öğesi-4" > Kategori 4</a>
</ul>

1
2
3
4
5
6
7
8
9
10
11

Resmin adı

yayınlanma tarihi: 2012

Yukarıda da söylendiği gibi listedeki öğeler galerideki görsellerdir. Listedeki deri ürünleri arasında depolar da yer alıyor. Bu görüntünün kendisi, daha doğrusu minyatür ve açıklamadır. Minyatür görüntüye dayanmaktadır. rel özelliği, JavaScript tıklamaları ve ana görselin görüntülenmesi için gereklidir.

Ayrıca 2 önemli kelimeyi de unutmayın; liste öğesi veya veri kimliği özelliği benzersiz olmalıdır. Veri türü özelliği, listesi öğeyi açıklayan kategori sınıfını içerir. İşaretlemeyle ilgili her şeyi okuyun.

CSS Stilleri

Hazır bir vikoryist kütüphanemiz olduğu için tarzlara özellikle dikkat etmeyeceğim. Güzel fotoğraf, Bu daha büyük bir görseli ve çok sayıda CSS kodunu belirtir. Bununla birlikte, daha büyük bir görüntü tasarlamak için 5 seçeneğin olduğu unutulmamalıdır, ancak iki seçenekte yuvarlaklık kaldırıldığı için ideal olarak 3 olacaktır.

Bu yüzden size küçük resimler için CSS stillerini ve kategori listesini göstereceğim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Portföy kategorisi ( kenar boşluğu alt : 30 piksel ; )
.portföy-categli (
ekran: satır içi;
sağ kenar boşluğu: 10 piksel;
}
.image-block(
Ekran bloğu;
konum: göreceli;
}
.image-block img (
kenarlık: 1 piksel düz #d5d5d5;
sınır yarıçapı: 4px 4px 4px 4px;
arka plan: #FFFFFF;
dolgu: 10 piksel;
}
.image-block img: vurgulu (
kenarlık: 1 piksel düz #A9CF54;
kutu gölgesi : 0 0 5px #A9CF54 ;
}
.portföy alanı li (
şamandıra: sol;
kenar boşluğu: 0 12 piksel 20 piksel 0;
taşma: gizli;
genişlik: 245 piksel;
dolgu: 5px;
}
.home-portföy-metni (kenar boşluğu üst: 10px;)
li.active a (metin dekorasyonu: altı çizili;)

Prensip olarak bu tarzlar anlamlıdır. Kategorilerin güç satırına eklenebilmesi için ekran değerleri satır içi olarak atanır. Görüntünün ana hatlarını çizme efekti oluşturmak için arka plan rengini (beyaz) ve kenar boşluğunu 10 piksele ayarlayın. Liste elemanlarının boyutları .portfolio-area li'de belirtilir.

jQuery

Ve en önemlisi, tüm ders bunun için. Bu jQuery kodudur. Resimleri kategorilere göre filtrelemekle başlayalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Portfolyo alanının tüm alt elemanlarını seçip isme yazıyoruz
var $veri = $(".portfolio-area" ) .clone() ;

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

var filterClass= $(this ) .attr ("class") .split("") .slice(-1) [0];

if (filtreSınıfı == "hepsi") (
var $filteredData = $data.find(".portfolio-item2");
) başka (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area") .quicksand ($filteredData, (
üç değerlilik: 600,
Yükseklik ayarı: "otomatik"
) , işlev () (

LightboxPhoto() ;
} ) ;
$(this).addClass("aktif");
yanlış döndür;
} ) ;

clone() metodunu ve seçiciyi kullanarak .portfolio-area'nin tüm alt elemanlarını seçip $data değişkenine yazıyoruz. Daha sonra, kategorilerden birine, listedeki .portfolio-categ sınıfına sahip li öğesine tıklayabilirsiniz. Eğer tüm kategoriler aktif değilse kimseyi rahatsız etmemek için RemoveClass(“active”) seçeneğini kullanın, bu durumda tüm kategoriler aktif olacak ve filtreleme duracaktır.

Yani, listedeki bir öğeye tıkladığımızda, bu seçiciye liste öğesini li olarak yerleştiririz, buradan sınıf niteliğinin değerini alırız ve ek bölme yöntemini kullanarak sınıfın adını birkaç parçaya böleriz. parçalar, bir kordon ve bir boşluk (bu durumda “tümü aktif” sınıfı la olur. Diziyi “tümü” ve “aktif”ten ayırabiliriz). Daha sonra dilim yöntemini kullanarak dizinin ilk elemanını seçiyoruz (seçimimizde “tümü”) ve sonucu filterClass değişkenine yazıyoruz. Boşluk yoksa sınıfın adı değişmeyecektir.

Daha sonra değiştirilen filterClass satırını kontrol ediyoruz Tümü, ardından .find yöntemini kullanarak yukarıda incelediğimiz $data dizisinden portföy-item2 sınıfına sahip tüm öğeleri seçiyoruz. Seçilen öğeler (yani listedeki tüm öğeler, yani tüm resimler) filteredData değişikliğine yerleştirilir.

Aksi halde filterClass eşdeğer değildir Tümü, kategori sınıfıyla herhangi bir veri türü özelliği ilişkilendirilmediği sürece filtaData değişkeni liste öğesine yerleştirilebilir. Kısacası elementlerin tek bir kategorisi var gibi görünüyor.

Ve ganimet kaldırılarak kütüphaneye aktarılıyor jquery bataklık, görüntüleri filtreleyen. Her şey filtrelemeyle ilgili.

Artık drenaj penceresindeki görüntüde bir artış var. Burada her şey çok daha basit.

1
2
3
4
5
6
7

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

rel niteliği güzel Fotoğraf ile başlayan bir mesaja tıklayabilirsiniz. Bundan sonra kütüphane sağa geliyor güzel fotoğraf ve görüntü mucizevi bir şekilde büyür. Konuşmadan önce bir dizi parametre de iletilir. Animasyonun hızı - hızı, slayt gösterisinin süresi - 5 saniye, Facebook tasarımının teması (images/prettyPhoto klasöründe 5 tema bulunabilir) ve ayrıca resmin adının görüntülenmesi gibi ve üzerine gelindiğinde büyütülmüş bir resim engellenir. Daha fazla belge güzel fotoğraf Biliyorsundur

En son makaleler ve derslerden haberdar olmak için abone olun

Herkese merhaba! Bugün muhtemelen kedisiz bir fotoğraf galerisi, video ve fotoğraf kaydırıcısını çalmaktan bahsedeceğiz, hadi "fotoğraf" hakkında konuşalım. Senaryonun 2 yıldır desteklenmediği ve yazarın geçiş yaptığı umurlarında değil benzer bir konuyla ilgili proje Mucizevi bir şekilde çalışıyor ve göze hoş gelmeye devam ediyor.

Ana avantajlar (+)

Basitlik kurulumlar, ayarlamalar ve wikiler. jQuery kremine ihtiyacın var Toplamda 2 dosya ekleyin ve galeriyi orada görüntülemek için resimlere daha fazla bilgi eklemeniz gerekir.
Hafifçe akıyor akışkanlık siteyle ilgileniyorum
Uyarlanabilirlik. Galeriniz telefonunuzda, dizüstü bilgisayarınızda veya TV ekranınızda harika görünüyor.
İşlevlerin büyük miktarda özelleştirilmesi vardır, HTML etiketlerinin nitelikleri aracılığıyla doğrudan bağlananlar.
Duyusal cihazlar için destek
Destek video.
Olasılık Tembel Kibir resimler.
Ve tanınmış koristuvache'nin ruhuna dokunan pek çok şey.

Eksileri (-)

Koristuvach'lar için desteğin varlığı. Sorununuza bakma veya düzeltme olasılığı neredeyse sıfırdır. Kötü ama ölümcül değil.

İlk bağlantı seçeneği

Bu bağlantı seçeneği en basit olanıdır ancak en parlak olanıdır ve galeriyi sitenin çoğu sayfasında görüntülemeniz gerektiğini anlamak önemlidir. Bu seçeneğin avantajı CDN kullanılmasıdır.

JQuery'nin geçerliliğini kontrol ediyoruz. Sitenin çıkış koduna gidin (aynı tuş Ctrl + U'dur) → şunun gibi bir şey bulabilirsiniz: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js
Aramanızı kolaylaştırmak için Ctrl+F tuşlarını kullanın. Gerekli satır yoksa jQuery'yi eklemeniz gerekecektir. WordPress'te aşağıdaki kodu tema işlevleri dosyasına (functions.php) ekleyerek para kazanabilirsiniz. Aslında bu komut dosyası, jQuery'nin farklı sürümleri arasında çakışma olması durumunda kullanılır ve aşağıdaki şemayı takip eder: jQuery'den önceki kayıtları siler, yenisini kaydeder ve komut dosyasını görüntüler. JQuery kütüphanesinin en son versiyonlarını burada bulabilirsiniz.
Araya böyle bir satır ekleyebilirsiniz. і :
<komut dosyası kaynağı = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> komut dosyası >
Fotorama.css ve fotorama.js'yi ekliyoruz. Saldırgan kodu etiketlerin arasına ekleyin і WordPress'te tema başlık dosyasını (header.php) kullanmanız gerekir. "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel = "stil sayfası" >
На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

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

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

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

Merkezsiz galeri

Galeri, ek yardım için HTML koduyla görüntülenir konteyner

c sınıfı = "fotoroma", kap resmin görüntülenmesine ilişkin kodu içerir yoksa görüntü üzerinde biraz çalışma yaptım . WordPress motorunda bir makale yazarken düzenleyiciyi metin moduna geçirin ve bir kapsayıcı girin

c sınıfı = "fotoroma" .

Şuna benziyor:

Ya da öyle (posilan neobo'yazkova'yı numaralandırarak):

1 3 4

Fotorama'da bazı ince ayarlar uygulayın

Konteyner boyutları

Fotoğraf bloğunu ilk görüntünün boyutuna göre boyutlandırın, diğer resimler ilkine orantılı olarak ölçeklendirilir. Durumu düzeltmek için boyutları manuel olarak girebilirsiniz.

Diğer ayarlamaları öğrenin:

Data-width="98%" // width data-ratio="800/600" // Kenarların yayılması data-minwidth="420" // xv. genişlik data-maxwidth = "900" // maks. genişlik veri-minyükseklik = "320" // xv. height data-maxheight = "100% // maksimum yükseklik data-height = "% 100 // maksimum yükseklik"

Minyatürler

Küçük resimler için data-nav='thumbs''u görebilirsiniz.

Ancak bu yöntem çok etkili değildir, çünkü senaryonun minyatür oluşturmak için tüm fotoğrafları anında içe aktarması gerektiğinden, gelecekte resimlerin küçük kopyalarını hazırlamak daha mantıklı olacaktır. WordPress otomatik olarak küçük resimler oluşturacak ve biz onları vikorize edeceğiz. Küçük resim seçmek için dosya adına -70x70 ekleyin (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).

Varsayılan minyatür 64 × 64'tür. Bu parametreyi data-thumbwidth (genişlik) ve data-thumbheight (yükseklik) kullanarak özelleştirebilirsiniz. Küçük resmin boyutunun küçük olmasını istiyorsanız, genişlik parametreleri ve küçük resim dosyasının yüksekliği:

HTML kodu + Fotorama

Fotoğraf çerçevesi HTML ve CSS'yi verimli bir şekilde işler ve bu da komut dosyasının işlevselliğini önemli ölçüde artırır. Çizgilerle, bloklarla, tablolarla, paragraflarla çalışın, CSS yazın ve çok daha fazlasını yapın. Aşağıda galerinin bazı izmaritlerini görebilirsiniz. Eğer görsel kısım görüntülenmiyorsa "Sonuç" butonuna tıklayın.

Göster / Uygula

CodePen'de Ivanov Klim'in (@DreamerKlim) yazdığı Pen ooppwb'ye gidin.

CodePen'de Ivanov Klim (@DreamerKlim) tarafından yazılan Pen aVEEV'e gidin.

Tam ekran modu

data-allowfullscreen = "true" //tarayıcı penceresinde data-allowfullscreen = "native" // monitörün tamamında

Okreme eklemek mümkündür harika görüntüİçin tam ekran modu veri dolu aracılığıyla:

aksi takdirde

veri-otomatik oynatma= "true" //autoplay data-autoplay="3000" //ms cinsinden slaytlar arasındaki aralık data-caption = "Bir" // resimlerden önceki yorumlar data-keyboard = "true" // oklarla gezinme veri karıştırma = "doğru" //çeşitli görseller veri-navposition= "üst" // küçük resimler yukarı veri döngüsü= "true" //döngüsel kaydırma Her şeyi bağlamaya ve video eklemeye çalışalım

data-caption = "Bir" data-keyboard = "true" data-shuffle = "true" data-navposition = "top" data-autoplay = "true" data-loop = "true">

"hangi yorum 1">

"ne yorum 2"> Sevdiğiniz işi bulana kadar

1. Ek bir jQuery galerisi kullanarak portföyün uygulanması

Fare imlecinin sol sütundaki konumunu değiştirdiğinizde proje küçük resimleri kayar. Alan bunun yerine projelerin adını, açıklamasını ve seçilen teknolojilerin listesini içeren daha büyük bir resim görüntüler. Küçük resimler arasında hareket ettikçe projelerle ilgili bilgiler çarpıcı bir animasyon efektiyle birer birer değişir. Sayfada açıklama içeren bir görsele tıkladığınızda ek jQuery animasyonu da alırsınız. Ayrıca bu portföy sayfasının şık, zarif ve modern görünümünü de vurgulamak isterim. Demoyu izleyin.

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

Fotoğrafçının portföy web sitesinin harika uygulaması. Bir menü öğesine tıkladığınızda ekrana dağılmış kareler arasından sabit yükseklik ve genişlikte içeriğe sahip bir alan seçilir. Sabit alana daha fazla bilgi sığdırmak için bunun yerine kaydırma eklendi. Bir portföydeki çalışmaları görüntüleme uygulaması benzersiz bir şekilde uygulanmıştır: küçük resme tıkladığınızda, fotoğraf, tarayıcı penceresinin boyutunu değiştirdiğinizde otomatik olarak ölçeklenen bir arka plan görüntüsü olarak görüntülenir.

3. jQuery'deki portföy duvarı

Çevrimiçi bir portföy oluşturmak için orijinal bir çözüm. Proje blokları (mesajların küçük resimleri ve kısa açıklamaları) tek tek görüntülenir ve tarayıcı penceresini değiştirdiğinizde bloklar animasyon efektiyle sayfada eşit olarak yeniden dağıtılır. Her proje küçük resim olarak kullanılabilir; ok düğmesini kullanarak bunlar arasında geçiş yapabilirsiniz. Bir mesaja tıkladığınızda, sabit yükseklikteki görünür blokta kaydırmalı olarak tesis metninin daha ayrıntılı bir açıklamasını içeren bir sayfa açılır. Proje görüntüsünü ölçeklendirmek için yan sayfanın arka planının nasıl ölçeklendirildiği. Gösteriye hayret etmek harika görünüyor.

4. Sayfaların jQuery'de düzgün kaydırılması

Dikey ve yatay kaydırmanın uygulanması.

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

Gerdirilen ağ, görüntü yerine bloklardan oluşuyor. Ağ, ayının diğer tarafına çekilebilir (fare düğmesine basın ve istediğiniz tarafa çekin). Küçük resim üzerindeki küçük resme bastığınızda, görüntü ekranın tüm genişliği boyunca yanıp söner. Metin içeren karanlık bir bloğa tıkladığınızda daha fazla bilgi içeren bir alan ortaya çıkacaktır.

6. Tek taraflı portföy sitesi

Bunun yerine animasyonlu bir değişikliğe sahip tek taraflı bir site. Daha iyi sonuçlar almak için demo sayfasında menü sekmelerini inceleyin.

7. Blok ekranının tipini jQuery olarak değiştirmek

Ek jQuery eklentisi Ekran Seçeneklerini Değiştir'in yardımıyla, bilgilerin tablo halinde görüntülenmesinden blokların açıklamasının tam bir incelemesine geçebileceğiniz sayfada geçiş yapmayı uygulayabilirsiniz. Bir portföyün uygulanması için mükemmel şekilde uygundur.

8. jQuery galerisi ve Google haritası içeren bir restoran web sitesi şablonu

Bir kafe web sitesi için oluşturulmuş orijinal bir jQuery çözümü. Şablon, menüdeki sayfaları görüntülemek için bir jQuery galerisine sahiptir. Galeri resimleri tarayıcı penceresinin boyutuna göre ölçeklendirilir. İlk olarak, galeri, arka planda tam boyutlu bir fotoğrafın karanlık göründüğü, başlığı ve görselin kısa bir açıklamasıyla birlikte değiştirilmiş bir görseli görüntüler. Okları ve fare tekerleklerini kullanarak mevcut fotoğraflar arasında gezinebilirsiniz. Açıklama içeren bir küçük resim seçmek ve pencerenin tüm genişliğine yayılmış orijinal büyük görüntüleri görüntüleme fırsatı vermek için galeri modunda fareye tıklayın. Galerinin bulunduğu sitenin menüsüne dönmek için sağ üst köşedeki butona basmanız gerekiyor. Muhteşem jQuery galeri şablonuna ek olarak Google haritası da etkili bir şekilde entegre edilmiştir.

9. Plazma Duvar eklentisi

Fotoğraflardan veya HTML bloklarından kendi "duvarlarınızı" oluşturmak için, bunları sabit bir alan içinde fareyle ekran boyunca sürükleyebilirsiniz.

10. Elemanları hisseye göre görüntülemek için eklenti

Belirli bir çaptaki kazığa göre çeşitli elemanların yan tarafında görüntülenir.

11. Taslak tarafı “Rozrobtsi'nin Web Sitesi”

Sayfada veritabanına kayıtlı olacak adrese e-posta göndererek açılan site ile ilgili bildirimleri gönderebilirsiniz. Yan tarafta ayrıca jQuery eklentisi Nivo Slider v.1'e dayalı olarak uygulanan küçük bir slayt gösterisi ile dekore edilmiştir. 2.3.

12. QuickFlip 2 eklentisi

Bu yardım için para kazanabilirsiniz tsikavy etkisi Gönderiye basıldığında dönen kartvizitler.

13. JQuery tıklama haritası

Fikir, şirket aktivistlerinden oluşan bağlı bir gruptan geliyor. Robotun eklentisini demo sayfasında görmek için fareye tıklayın ve ardından “Analiz Et” düğmesine tıklayın. Ve net arka planda, siz hedefe tıkladıkça noktalar beliriyor.

Sevimliliğin gerçekleşmesi ekran klavyesi. İhtiyacınız olan pek bir şey yok.

15. jQuery Yapışkan Notları

Not levhalarının satışı. Metin düzenlenebilir ve notların kendisi ekranda silinebilir veya taşınabilir. Popoya bir göz atmak için demo sayfasına gidin ve “Demo” sekmesine gidin.

16. jQuery'de derecelendirme

17. Vurgulu Özellik

Bir mesaj tasarladığınızda: Fareyi mesajın üzerine getirdiğinizde bağlantı değişir. Havalı görünüyor.

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

Kayıt formu için captcha'nın uygulanması. Eklenti, artan sırada yerleştirilmesi gereken bir dizi sayı içerir. Sona ermek basit yol Kaydın bir robot tarafından değil, yaşayan bir kişi tarafından gerçekleştirildiğini doğrulamak için.

Ekranın alt kısmında sayfayı yukarı veya aşağı doğru kaydırmak için tıklanabilen düğmeler bulunur.

20. Transfer. jQuery eklentisi “jTextTranslate”

Eklenti, Google Dil API'sini kullanır ve metni Google'ın aradığı dile çevirebilir. Çevirmek için paragrafın yanındaki simgeye tıklayarak çevirmek istediğiniz dili listeden seçmeniz gerekir.

21. Yan gezinme için jQuery eklentisi

Ana uygulama, arka arkaya gezinme için kaydırma yapmak üzere bir mesaj göndermektir. jQuery kullanılarak uygulandı.

22. jQuery eklentisi “Notatki”

Tsey jQuery eklentisi Web sitenizde “kağıt” notların uygulanmasına izin verin.

23. jQuery eklentisi “Catch404”

24. jQuery eklentisi jBreadCrumb

Animasyonlu navigasyon kordonu “Bread Cry” oluşturmak için eklenti

25. Eklenti “Reel”

26. jQuery eklentisi “Dans Pisti”

Bir ürün sayfasını uygulamak için jQuery eklentisi. Ürünün görseline tıkladığınızda açıklaması çıkıyor.

27. jQuery eklentisi “3D işaretler”

28. Ses CSS düğmeleri

29. Sayfanın animasyonlu yatay kaydırılması

jQuery efekti dikey kaydırma hikayeler. Tek taraflı sitelerin ve portföy sitelerinin uygulanması için idealdir. Efekti görmek için demo sayfasındaki menü öğesine dokunun.

30. jQuery eklentisi “Derecelendirme Sistemi”

Bir şeyin değerlendirmesini uygulamak için jQuery efekti. Harflerin rengi ve altlarındaki metin, fare imlecinin hangisinin üzerine geldiğine bağlı olarak değişir.

31. jQuery Panel Sihri

Sitede gezinmeyi uygulayan bir eklenti. Bu durumda sunum siteniz, aralarında düzgün bir jQuery efektiyle geçişin olduğu bir belgeler ağı gibidir.

Bu eklentiyi küçük siteler ve web siteleri oluşturmak için rahatlıkla kullanabilirsiniz. Ayrıca portföy sitelerinde de kötü görünmüyor.

32. Mootools'taki ilgi göstergesi, "MoogressBar" eklentisi

Etkili bir çekicilik göstergesi.

33. Mootools eklentisi “CwComplete”

Alanlar doldurulmuşsa eklenti size gösterecektir Olası seçenekler doldurmak için wikiristannyam Ajax, yalnızca alana önceden girilmiş olan metinle eşleşen seçenekleri filtreleyecek ve gösterecektir.

34. jQuery ve CSS3'e dayalı güçlü ajax sohbeti

Yazdırmadan önce e-posta adresinizi girmeniz gerekebilir. Sağdaki sütun sohbette kaç kişinin yetkili olduğunu gösterir. İncelenen teknolojiler: PHP, MySQL, jQuery, CSS.

35. “Projeye abone olun” sayfasının uygulanması

Temsilciler yeni bir teklif ekleyebilir veya mevcut teklife oy verebilir. Hedef kitlesinin site hakkında ne düşündüğünü bilmek isteyenler için mükemmel bir çözüm. Bu sayfayı yeni fikirler toplamak için de kullanabilirsiniz. Daha fazla gelişme senin projen. Zafere kavuşturulacak teknolojiler: PHP, MySQL, jQuery, CSS

36. Ek PHP ve jQuery kullanarak oylama/yetkilendirmenin uygulanması

37. Ajax “TinyEditor”da oylama

Sitede testlerin dikkatli bir şekilde uygulanması. Vicky teknolojileri: JQuery, Ajax, PHP ve MySQL.

Duje tsikave kararı Sitede oylamayı uygulamak. Görsellerin arkasına ayı gibi düşen blokları yukarı aşağı çekerek istediğiniz sırayla yan tarafa taşıyabilirsiniz. Bloğu ne kadar mahrum bırakırsanız o kadar takdir edilecektir ve tabii ki bloğu en alta yerleştirirseniz en az değeri alacaksınız demektir. Blokları gerekli sıraya göre düzenledikten sonra oy vermek için Anketi gönder butonuna tıklamanız gerekir. Sonuçlar sayfasında oylama sonuçları ve oy veren seçmen sayısı görüntülenir. Zafere kavuşturulacak teknolojiler: CSS, PHP, MySQL, jQuery.

Girilen bilgilerin doğruluğunu kontrol eden, Ajax kullanan basit bir yorum sistemi. Yorumlar bir veritabanına kaydedilir. Ek yardımla uygulandı: PHP, MySQL, CSS, jQuery.

40. Doktor dosyayla çok ilgilendi

41. PHP wiki'lerinin bulunduğu sayfadaki notlar

Wikoristan teknolojileri: PHP, jQuery, CSS.

Menü öğelerine geçtiğinizde sayfaya tekrar girmeden üzerlerine tıklayabilirsiniz. Zafere kavuşturulacak teknolojiler: PHP, jQuery, CSS.

43. Google'ın wiki teknolojisini kullanarak jQuery site araması

Ek Google AJAX Arama API'sini kullanarak site aramasının uygulanması. Hem sitenizde hem de internette arama yapabileceksiniz. Bu durumda sitenin yalnızca sayfalarının arkasında değil, görsellerin ve multimedya dosyalarının arkasında da arama yapabilirsiniz.

44. jQuery görüntüye bindirme efekti

Bir portföy uygulanırken de benzer bir etki ortaya çıkabilir. Resme tıkladığınızda şeffaf bir arka plan olarak karartılır ve neye saygı göstermek istediğinizi açıklayan bir not görünür.

45. “Beslenme-video” sayfasının jQuery kullanılarak uygulanması

Sitedeki SSS sayfasının jQuery uygulaması. Sayfada siparişlerin listesi görüntülenir. Güç verilen tarafa bastığınızda, sayfa seçtiğiniz sayfaya sorunsuz bir şekilde kaydırılacak ve yeni olanın aktif güç kaynağı farklı bir renkle vurgulanacaktır. Ayrıca aktif dal alanı güç listesine çevrilmiş gibi görünüyor.

46. Ajax'ta web sitesi. Bunun yerine sayfayı yeniden etkinleştirmeden yedekleyin

47. jQuery kullanarak rengi ve metni değiştirin

Fare farenin üzerine geldiğinde renk değişir. Bunu, rengin rastgele değişeceği şekilde yapabilirsiniz.

48. jQuery wiki'lerini içeren siteye yönelik kılavuz

Bu kullanışlı eklentinin yardımıyla bir adım daha ileri gitseniz bile sitenizin ana işlevleri hakkında bilgi edinebilirsiniz. Sağ üst köşedeki sayfaya tıkladığınızda karşınıza bir blok çıkıyor ve siteyi gezmeniz isteniyor. Önce sitenize ulaştığınızda, ana işlevler hakkında bilgi edinmek için küçük bir gezginin yardımını kullanabilirsiniz. Bu durumda taraf karartılır ve cilt üzerinde gerekli bloklar bir simge ile gösterilir. Sitenizi daha önce ziyaret ettiyseniz siteyi gezmek için pencereyi kapatmanız yeterlidir.

49. “Joyride Kit” web sitesinde sanal tur

Bu eklentiyi kullanarak sayfanın ana işlevlerini tanıyabilirsiniz. Birleşen öğelerin sıralı bir açıklamasını aramamaya çalışın. Sonuç olarak İleri butonuna tıklayarak tüm ipuçlarını inceleyebilir veya çarpı işaretini hızlıca geçerek (artık bu tarafta durum böyle olmadığı için) çevrimiçi turu kapatabilirsiniz.

Bu unsurlardan hangisinin projenize ideal şekilde uyacağını seçin.

1. Önyükleme Kaydırıcısı

Bootstrap Slider – kaydırılabilir bir noktaya ve indirimlere sahip, ücretsiz, mobil cihazlar için optimize edilmiş bir görüntü kaydırıcısı. Her ekranda ve her tarayıcıda harika görünecekler. Kaydırıcılara resimler, videolar, metinler, küçük resimler ve düğmeler ekleyebilirsiniz.

Popüler