JQuery Portfolio Gallery. Galeri ISSAIN Portföyü

Uzun zamandır bugünün konusu için konuyu seçti. Sonuç olarak, henüz bir seçim yapmadığımızı fark ettim. görüntülerin Galerisi. Mükemmel konuumda, galeriler Birçok sitede mevcut. Açıkçası, hepsi çok çekici değil. Mevcut gelişim eğilimleri göz önüne alındığında jquery, html5 vb Düşündüm, çünkü daha önce benimle tanışanlardan daha çekici bir çözüm olmalı. Yani. Günü geçirdikten sonra, çok sayıda komut dosyası bulmak mümkündü. Bütün bu dağdan, sadece almaya karar verdim, çünkü önceki yazılarda nasıl farkettiğinizi seviyorum.
Görüntülerin Galerisi Sadece durumunda değil fotoğraf albümleri ile. Komut dosyası kullanılabilir, sanırım doğru olacağını düşünüyorum. fotoğrafçılar için portföy, tasarımcılar vb. Jquery etkileri Ziyaretçilerin dikkatini çekmeye ve sitenize şıklık yapmanıza yardımcı olacaklar.
Yani. Dikkatine bir koleksiyon jQuery Eklentileri Site İçin Görüntü Galerileri.
Yorum yapmayı ve hatırlamayı unutmayın, bu seçimi kaybetmemek için, makalenin altındaki bir yıldız işareti tıklayarak favorilerinize ekleyebilirsiniz.

Fotoğraf Kutusu.

Ücretsiz, Kolay, Uyarlanabilir Resim GalerisiTüm etkilerin, geçişler CSS3 tarafından yapılır. Fotoğrafçının Site-Troyolio'yu oluşturmak için idealdir.

S galerisi.

Çekici Jquery eklentisi galeri görüntüleri. Animasyon CSS3 ile çalışır.

Diamonds.js.

Orijinal görüntülerin bir galerisi oluşturmak için eklenti. Minyatürler şekildir rombaŞu anda çok popüler. Bu form CSS3 kullanılarak yapılır. Bu galerinin tek eksi, fotoğrafın tam boyutta açılacağı Görsel Sepetine Ekle olmamasıdır. Yani, kanserlerin Lightbox eklentisini bağlamaları için gerekli olacaktır. Bu komut dosyası, eşkenar dörtgen görüntülerin uyarlanabilir bir mesaj oluşturur.

Superbox.

Görüntülerin modern galerisi JQuery, CSS3 ve HTML5. Hepimiz, önizlemeye tıkladığınızda, tüm resim Buna göre açılır. Görsel Sepetine Ekle (açılır pencere). Bu eklentinin geliştiricileri, Böylece Book biberinin zaten konuşulduğuna karar verdi. Bu galerideki görüntüler önizlemenin altına açık. Demoya bakın ve böyle bir çözümün çok modern gibi göründüğünden emin olun.
|

Pürüzsüz çapraz solma galerisi

Görüntülerin modern galerisi Önizlemeler ekran boşluğu boyunca dağıtılır. Komut dosyası, klasörü sunucudaki fotoğrafla tarayabilir, yani her görüntüyü ayrı ayrı eklemeniz gerekmez. Sunucudaki klasöre resim yüklemek ve ayarlardaki dizine giden yolu belirtmek yeterlidir. Daha sonra, senaryo her şeyi kendin yapacak.

Gamma Galerisi.

Şimdi çok popüler olan Pinterest tarzında bir ızgara ile şık, kolay, adaptif görüntü galerisi. Komut dosyası hem sabit bilgisayarlarda hem de açık çalışıyor mobil cihazlar Herhangi bir ekran çözünürlüğü ile. Bir web tasarımcısı portföyü oluşturmak için mükemmel bir çözüm.

Genişleyen Önizleme ile Küçük Resim Grid

Eklenti resimlerin uyarlanabilir ızgarası. Aşağıda tıklandığında, fotoğraf daha fazla başlatılır ve açıklama. Portföy oluşturmak için uygun.

jgallery.

jgallery tam ekran, Uyarlanabilir Resim Galerisi. Efektler, geçişler ve hatta stil kolayca ayarlanır.

Glisse.js.

Basit, ama çok muhteşem eklenti galeri görüntüleri. Bu, bir fotoğraf albümü oluşturmanız gerektiğinde bu tam olarak çözümdür. Eklenti, albümleri destekler ve çevirmenin çok havalı bir etkisi vardır.

Mozaik akışı.

Basit, adaptif pinterest tarzında bir ızgara ile görüntü galerisi.

Galereya.

Kategoriye göre bir filtre ile bir pinterest tarzında bir ızgara ile şık bir galeri. Tarayıcılarda çalışır: Chrome, Safari, Firefox, Opera, IE7 +, Android Browner, Chrome Mobile, Firefox Mobile.

en az .js.

Mükemmel görüntülerin ücretsiz galerisi JQuery, 5 ve CSS3 kullanarak. Çok çekici bir görünüme sahip ve şüphesiz, ziyaretçilerinizin dikkatini çekecek.

fliplightbox.

Basit bir görüntü galerisi. Önizlemeyi tıklatırken, Buna uygun bir görüntü açılır.

bluePM Galerisi.

Esnek galeri. Modal pencerede yalnızca görüntüler değil, aynı zamanda görüntüler de görüntüleyebilir video. Duyusal cihazlarda mükemmel bir şekilde çalışın. Kolayca özelleştirilir ve ek eklentiler kullanılarak fonksiyonelin genişletilmesi olasılığı vardır (aşağıdaki eklentiye bakın).

Yetkin şekilde derlenen ve görsel olarak dekore edilmiş, bizim durumumuzda, bu ayrı bir sayfa, kişisel bir sitenin veya blogun önemli bir unsuru, profesyonel faaliyetlerinde belirli bir yetenek seviyesine ulaşan herhangi bir uzmandır.
Portföy Sayfası, bu, böyle bir tür rapor ya da sitenin / blogun okuyucularını ve ziyaretçilerini açıkça gösterebileceğiniz, fotoğraflar, makaleler, yayınlar, tasarım öğeleri, vb. .
Böyle bir sayfam yok ve benim açımdan, mümkün olan en kısa sürede düzeltilmesi gereken sinir bozucu bir ihmal var, aslında şu anda çalışıyorum.
Küresel ağın sonsuz genişlemelerinde, portföyün organizasyonu için çok sayıda hazır sayfa şablonunu ve bu tür sayfaların çeşitli olduğunu, gerçekten etkileyebilirsiniz. Öyleyse, web tasarım ve geliştirmenin tüm incestlerine dalmak için hurda getirmek için, her zaman kendileri için uygun bir seçenek bulabileceklerdir. Site binasında muhteşem bilgi sahibi olanlar için, basit bir portföy sayfasına, basit bir portföy sayfasına, kategoriye göre yapılan çalışmaların filtrelenmesi, animasyonla, kategori ile yapılan işin filtrelemesi ile bir örnek oluşturmayı öneriyorum. elementler.

Sayfa düzeni, yürütülebilir javascript ve bazı tasarım öğeleri, "dağda", harika web tasarımcısı ve geliştirici Kevin LiEw (Queness.com) yayınlandı. Optimum bir çözüm seçerken, benim için önemliydi, bir icra basitliği, jquery eklentisinin işlevselliği, tüm modern tarayıcılarda doğru iş, internet sörfü için, çeşitli mobil cihazların kullanılmasının en popüler popülerliğini göz önünde bulundurarak, Gelecekteki sayfa tasarımının uyarlanabilirliği. Cenaze, tasarımcı fırfırlar ve ağır eklentiler yok.

Temel düzeni, inşa etmesi gereken kullanıcı arayüzünün iki temel unsurundan oluşur, bunlar sunulan işlerin kategorilerini filtrelemek için gezinme sekmeleridir ve ızgara, gezinirken bir pop-up etkisi olan bir minyatürdir.
Başlamak için, sonunda kazanılan her şey, 1.7.0 sürümünden daha düşük olmayacak şekilde jquery gerekli olacaktır. Henüz bağlı değilseniz, aşağıdaki dizeyi etikete ekleyin. :

Çalışmak için karışım eklentisini çalıştırın, yukarıdaki dosyalardan sonra bu kodu yerleştirin:

< script type= "text/javascript" > $ (Init: Function () () ($ # portfoliolist). MixItup (Targetselector: ".portfolio", Filterselector: ".Filter", Efektler: [solma], hafifletme: "Snap", // Hover Effect Onmixend: Filtre listesi . HoverEffect ()));), hovereffect: fonksiyon () () ($ (# portfolioist .portfolio "). Hover (İşlev () ($ ($ (bu). (" Etiket "). Durdur (). Animate (((). Alt: 0), 200, "EaseoutQuad"); $ (this). Bul ("img"). Durdur (). Animate ((üst: - 30), 500, "kolayca" () () () () () () () () () () $ (this). Bul (". Etiket"). Durdur (). Animate ((alt: - 40), 200, "easeinquad"); $ (this). Bul ("img"). Durdurunuz (). Animate ((Üst: 0), 300, "kolayca");));)); filtre listesi. İnit ();));

Ayrı ayrı eklentinin tüm seçeneklerini göz önünde bulundurun, hiçbir anlam yoktur, varsayılan, oldukça optimal bir seçenektir. Peki, eğer biri parametrelerle deneyler eklerse, lütfen, tüm gücünüzde.

Sayfanın bir düzenini oluşturmak ve öğelerin görünümünü oluşturmak için, bir çift dosyayı belgeye bağlayın. . Temel stiller için bir tane, örneğin arayalım: LATOUT.CSS ve başka bir küçük CSS dosyası normalize.css, tarayıcıların standart tasarımında en iyi sohbeti sağlamak için:

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

Şimdi, eğer mümkünse, aşırı su olmadan, doğal, uzun acı çeken, erişilebilir ve anlaşılabilir olması durumunda her şeyi analiz edeceğiz.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" > Her şey < li>< span class = "filter" data- filter= "app" > Başvurular < li>< span class = "filter" data- filter= "card" > İşletmeciler < 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ı

• Her şey
• Başvurular
• İşletmeciler
• Simgeler
• Logo
• Web tasarımı

Gezinti bölmesinde, tüm çalışma listesini girin, kategorilere ayrılmıştır. Veri-Cat özniteliğinde, veri filtresi özniteliğindeki değere uygun olarak bir veya başka bir Navigasyon bölmesi ile ilişkilendirmek için her portföy kategorisine ihtiyacımız var. Veri-filtre değerlerini veri-kediyle karşılaştırarak ve portföy elemanları kategoriye göre filtrelenecektir.
Ek olarak, zamandan önceki zamana kadar küçük resimlere, işin adına sahip küçük bir panel ve yalnızca resme girdiğinizde ortaya çıkan başlık kategorisi. Ve tüm şeyin CSS'deki görünümünü, karşılık gelen sınıfların elemanlarına görünmesi daha kolaydır:

< 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" > Beet Hosting. Ru < span class = "text-category" > Logo < div class = "label-bg" > .........

Lütfen resme veya doğrudan imzaya bağlantı ekleyebileceğinizi unutmayın, böylece kullanıcı tüm çalışmalarınızı tamamen hayal edebilecektir.

CSS.

Şimdi, sessiz bir SAP, portföy sayfamızın kullanıcı arayüzünün genel stillerinin oluşumuna ve uyarlamalı sürümünün oluşumuna en ilginç olanıdır. Makale, yalnızca herhangi bir arka plan resim ve bağlı yazı tipleri olmadan, bunlara ihtiyacı olan tüm bunlar, demoda görülebilir veya arşivde kaynaklarla bulabilecekleri temel (varsayılan) değerleri gösterecektir.

.Container (Konum: Göreceli; Genişlik: 960px; Marj: 0 Otomatik; / * Tarayıcı penceresi yeniden boyutlandırıldığında geçiş devresini görebilirsiniz * / -WebKit-Geçiş: Tüm 1S kolaylığı; -Moz-Geçiş: Tüm 1S kolaylığı; -O-geçiş: Tüm 1S kolaylığı; Geçiş: Tüm 1'lerin kolaylığı; ) #Filters (Marj:% 1; Dolgu: 0; Liste Stili: Yok;) #Filters Li (Float: Sol;) #Filters Li Span (Ekran: Dolgu: 5px 20px; Text-Decoration: Yok; Renk: # 666; / * Metin için küçük bir gölge ekleyin * / Metin gölge: 1px 1px #fffff; İmleç: İşaretçi; ) / * Hovering yaparken arka plan kategorisini değiştirin * / #Filters Li Span: Hover (Arka Plan: # 34B7CD; Metin-Gölge: 0 0 2PX # 004B7D; Renk: #FFF;) / * Aktif Kategori * / #Filter Li span.aktif (arka plan: RGB (62, 151, 221); Text-Gölge: 0 0 2PX # 004B7D; Renk: #FFF;) #portfoliolist .portfolio (-WebKit-Box-Boyutlandırma: sınır kutusu; -MOZ-BOX-Boyutlandırma: Sınır Kutusu; -O-Kutu Boyutlandırma: Bordür Kutusu; Genişlik: 23%; Marj:% 1; Ekran: Yok; Şamandıra: Sol; Taşma: gizlendi; Taşma: Gizli; Konum: Göreceli! Önemli; Arka Plan: # 666; İmleç: İşaretçi;) .Portfolio IMG (Maksimum Genişlik:% 100; Konum: Göreceli;) / * Varsayılan İmzalar Gizli * / .portfolio .Label (pozisyon: 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; Üst: 0; Sol: 0;) .Portfolio .Label-Metin (Renk: #FFFF; Konum: Göreceli; Z-Dizin: 500; Dolgu: 5px 8px;) .portfolio .Text-Kategori ( Ekran: blok; yazı tipi boyutu: 9px;)

Konteyner (Konum: Göreceli; Genişlik: 960px; Marjı: 0 Otomatik; / * Tarayıcı penceresinin boyutları * / -Webkit-Geçiş: Tüm 1S kolaylığı; -Moz-Geçiş: Tüm 1S kolaylığı; -O- Geçiş: Tüm 1S Kolaylık; Geçiş: Tüm 1S Kolaylık;) #Filters (Marj:% 1; Dolgu: 0; Liste Stili: Yok;) #Filters Li (Sol;) #Filters Li Span (Ekran : Blok; Dolgu: 5px 20px; Metin Dekorasyonu: Yok; Renk: # 666; / * Metin için biraz gölge ekleyin * / Metin-gölge: 1px 1px #ffffff; imleç: işaretçi;) / * Kategori kategorisini ne zaman değiştirin Hovering * / #filter Li Span: Hover (Arka Plan: # 34B7CD; Metin-Gölge: 0 0 2px # 004B7D; Renk: #FFF;) / * Aktif Kategori * / #Filters Li Span.Active (Arka Plan: RGB (62, 151, 221); Text-Gölge: 0 0 2PX # 004B7D; Renk: #fff;) #portoliolist .portfolio (-Webkit-Box-Boyutlandırma: sınır kutusu; -moz-kutu boyutlandırma: sınır kutusu; -O -Box Boyutlandırma: Sınır Kutusu; Genişlik:% 23; Marj:% 1; Ekran: Yok; Şamandıra: Sol; Taşma: Gizli;) .po RTFolio-Wrapper (Taşma: Gizli; Pozisyon: Göreceli! Önemli; Arka plan: # 666; İmleç: İşaretçi; ) .portfolio img (maksimum genişlik:% 100; pozisyon: göreceli;) / * Varsayılan olarak, imzalar gizlenir * / .portfolio .Label (pozisyon: mutlak; genişlik: 100%; yükseklik: 40px; alt: -40px ;). Portföy .Label-BG (Arka Plan: RGB (62, 151, 221); Genişlik:% 100; Yükseklik: 100%; Konum: Mutlak; Üst: 0; Sol: 0;) .portfolio. Label-Metin ( Renk: # FFF; Konum: Göreceli; Z-Dizin: 500; Dolgu: 5px 8px;) .Portfolio .Text-Kategori (Ekran: blok; Yazı tipi boyutu: 9px;)

İkinci kısımda, aynı stil tablosunda, birden fazla ortam isteği kullanılarak, alternatif CSS bölümleri oluşturun. Sayfamızın düzenini çeşitli mobil cihazların ekranlarında düzgün şekilde yapmak için, bu bölümlerde farklı ekranlar için CSS kuralları ekleyin ve alternatif olarak. Böylece, geleneksel tarayıcılar için CSS tablosunda daha önce belirlenen kuralları kolayca geçersiz kılar ve inanılan uyarlanabilirliğe ulaşın.

/ * Tablet * / @Media sadece ekran ve (min-genişlik: 768px) ve (maksimum genişlik: 959PX) (.Container (genişlik: 768px;)) / * MOBİL - NOT: 320PX genişlik tasarımı * / @Media Sadece ekran ve (maksimum genişlik: 767px) (.Container (genişlik:% 95;) #portiolist .portfolio (genişlik:% 48; marj:% 1;)))) / * MOBİL - NOT: Genişlik 480px için tasarım * / @Media Sadece ekran ve (min-genişlik: 480px) ve (maksimum genişlik: 767px) (.Container (genişlik:% 70;))

/ * Tablet * / @Media sadece ekran ve (min-genişlik: 768px) ve (maksimum genişlik: 959px) (.Container (genişlik: 768px;)) / * Mobil - Not: 320PX * / @MEDIA için Tasarım Sadece genişlik Ekran ve (maksimum genişlik: 767PX) (.Container (genişlik:% 95;) # loktfoliolist .portfolio (Genişlik: 48%; Marj:% 1;))) / * Mobil - Not: 480px * / @Media genişliği için tasarım Sadece ekran ve (min-genişlik: 480px) ve (maksimum genişlik: 767PX) (.Container (genişlik:% 70;))

Bu kadar. "Portföy" nin yetenekleri altındaki harika sayfamız hazırdır, sadece aynı derecede harika ve olağanüstü işleriyle doldurmak ve dünyayı sergilemek için kalır. Hala sessizce, mütevazı bir şekilde kendinizle gurur duyabilirsiniz. Asıl şey bu konuda abartmak değil.
Yine bir örnek ve gerekirse kaynakları, boş zamanlarda, sessiz bir ev ortamında, bu işi mükemmelliğe getirebilirsiniz.

Bir ders oluştururken, malzeme kullanılmıştır :. Orijinal, dokuz temiz, sadece yazarın kaleminin altından Portföy sayfası, orada.

Herkese ve vücut faydalarıyla iyi şanslar, kısa bir yazın kalıntılarını harcayın!

Bu derste jQuery, CSS3 ve zaman çizelgesi eklentisini kullanarak güzel bir portföy yazacağız. Zaman çizelgesi, haritalama olay kronolojisinde uzmanlaşmış bir jquery eklentisidir. Bu portföyde, farklı medya verileri türlerini ekleyebilirsiniz: tweetler, video, kartlar, resimler, kayıtlar ve tarihe göre yerleştirdikten sonra. Tasarımda çalışıyorsanız, ilgi alanlarınızı ve çalışmalarınızı gösterecek güzel bir portföy alacaksınız.

HTML.

Standart olarak, zaman çizelgesi eklentisi açık renk şeması içerir. Çoğu durumda çok uygun ve gereklidir. Her ne kadar, portföyümüz için, karanlık tasarım daha zarif. Bu nedenle, biz sevdiğimiz gibi optimize ediyoruz.

İlk önce, temel HTML ilan sayfasına bakalım:

indeks.html

Kafa bölümünde, tasarım çözümlerimizi içerecek olan timeline.css ve styles.css'ler var. Sayfanın sonunda, eklentinin çalışmasını başlatacak bir jquery kütüphanesi, zaman çizelgesi eklentisi ve scripts.js bağlarız.

Eklentiyi aradığımızda, ID \u003d zaman çizelgesi ile bir DIV bloğu bulur. Bloğun içinde HTML işaretlemesini bağlar, ardından sayfa daha sonra olur: