Home JQuery 14 Adet JQuery Slider ve Resim Galerisi Örnekleri
14 Adet JQuery Slider ve Resim Galerisi Örnekleri

14 Adet JQuery Slider ve Resim Galerisi Örnekleri

8.42K
36

Merhaba arkadaşlar, Hepimiz biliyoruz ki, sitemizi görsel şekilde güçlendirmek için jquery ile hazırlanmış slider veya jquery ile hazırlanmış galerileri kullanırız. Bende, web sitelerinde en çok kullanılan 14 adet ve örneklerini nette ayrıntılı bir şekilde araştırarak sizlere sunmaya çalıştım. Tabi bazı örnekleri demo olarak  indirme imkanınız var. Birazda düzenleme yaparsanız sitenizde kullanabilirsiniz. İnşallah beğenirsiniz. Kolay gelsin. Yorumlarınızı bekliyorum.

1. TN3 GALERI

jquery galeri

Tüm modern masaüstü ve mobil tarayıcılar ile uyumludur. JQuery ile güçlendirilmiştir.

DemoButton

2. AD GALLERY

jquery slider

 

Bu resim galerisinin  Thickbox ve Lightbox gibi eklentileri biraz farklı bir galeri eklentisi var.

 

DemoButton

3. JQUERY CYCLE PLUGIN

jquery galeri

JQuery Cycle Plugin hafif bir slayt gösterisi eklentisi. Sitenizde çok hoş görüneceğinden eminim.  Sitesine girdiğinizde değişik efekleri olduğunu göreceksiniz.

DemoButton

4. PIKACHOOSE

jquery galeri

Bu slider çalışmasını resim galeri olarakta kullanabilirsiniz. Genelde şimdiki haber sliderlarında (manşet) çok kullanılan bir türdür. İstediğiniz gibi kullanabilirsiniz.  İndirme linki aşağıda mevcuttu.

 

DemoButton

5. S3SLIDER

jquery slider

 

Motion efekti verilen bir slider türüdür. Sitesinde nasıl kullanıldığı yani nasıl düzenlendiği bilgisi verilmekte. Hemde indirme linki bulunmaktadır. Güzel ve basit bir slider türüdür.

DemoButton

6. POPEYE

jquery slider galeri

 

Bu çalışmayı resim galerilerinizde kullanabilirsiniz. Resmin üzerine geldiğinizde slayt gibi ileri geri butonları bulunmakta ve resmi büyültüp küçültebiliyorsunuz. Siteden indirebilirsiniz.

DemoButton

7. GALLERIFFIC JQUERY PLUGIN

jquery galeri plugin

 

Sitenizde kullanabileceğiniz resim galeri türlerinden birisi. Siteye girdiğinizde examples başlığı altında birçok örneğine ulaşabilirsiniz. Nasıl kullanıldığı hakkında da site bilgi vermektedir.

DemoButton

8. SLIDEVIEWER

SLIDEVIEWER

Yine farklı bir slider örneği. Slideviewer slider ı wordpres sitenizde bile kullanabiliyorsunuz. Sitede indirme linki bulunmakta ve nasıl kullanacağınız konusunda size bilgi vermektedir.

DemoButton

9- JFLOW

jquery_galeri10

 

Standart jquery galerilerden birisi . Sitesinde kayak kodları bulunmakta bilgisayarınıza indirip sitenizde istediğiniz gibi kullanabilirsiniz.

DemoButton

10. IMAGE FLOW

IMAGE FLOW

Çalışma apple’ın resim galerisinden esinlenerek yapılmıştır. Fare ve klavyeden kontrol edilebilen bir resim galerisi örneğidir. Beğendiklerimden birtanesi diyebilirim. Çalışmayı aşağıdaki linkten indirebilirsiniz. İndirmek için biraz uğraştırıyor dikkat edin:)

DemoButton

 

11. SPACEGALLERY

 SPACEGALLERY

 

Yine farklı bir resim galerisi beğenen arkadaşlar sitesinde kullanabilir çünkü indirme linkide bulunmakta.

DemoButton

12. AÇIKLAMALI RESİM ROTATOR (CSS / JQUERY) OLUŞTURMA

CREATE AN IMAGE ROTATOR WITH DESCRIPTION (CSS/JQUERY)

 

Açıklamalı şekilde bir resim galerisi . Çoğu sitede bu uygulamayı görebilirsiniz. Sizde sitenizde görmek istiyorsanız çalışmayı aşağıdaki linkten indirebilirsiniz. Sitede kullanımı hakkında bilgilerde bulunmaktadır.

DemoButton


13. BASİT JQUERY RESİM SLIDER – TRANSPARAN YAZI ALANI

jquery_galeri16

 

DemoButton

 

14. TAM EKRAN RESİM GALLERİ-  JQUERY ve FLICKR KULLANILMIŞTIR

 

jquery_galeri17

 

Çok güzel jquery slider örneği. Bu çalışmada jquery ve flickr kullanılmıştır. Bir çok özelliğiyle sizleri bekliyor. Aşağıdaki linkten indirebilirsiniz.

DemoButton

 

(8420)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(36)

  1. ya abi bu sliderı baştan sona ayrıntılı bir şekilde yaparak anlatan video falan yok mu varsa yardımcı olabilir misin???

    1. Hasan girdiğin sayfada nasıl yapıldığı hakkında çalışma yapılmış. İngilizce anlatım var lakin google çeviriden türkçeye çevirebilirsin. Zaten css veya html bilgin varsa kodları kopyala yapıştır yaparakta yapabilirsin.

  2. Hocam emeginize sağlık.Bir ricam var ; Kodlarinizda ki açıklama satirlarini çoğaltır mısın? Neyi ne için yaptığımızı bilerek yapsak daha iyi olur. Çok Teşekkürler site için. SAYGILAR..

    1. Sumeyye , bu sliderlar sitelerde bulunan örnek çalışmalar. Kullanımını bilen arkadaşlar için verilmiştir. Eğer nasıl yapıldığını öğrenmek isterseniz. Sitemizde slider ile anlatım yapılmış 2-3 video var , onları izlemenizi tavsiye ederim. Arama bölümüne slider yazarsanız diğer videoları görebilirsiniz.

  3. Ömer Bey çalışmalarınızdan dolayı çok teşekkür ederim. Emeğinize sağlık. Web sayfamda denedim çalışıyor. Ama kurum bilgisayarlarının web tarayıcısında gözükmüyor. Flash sürümü düşük olduğundan galiba. bu slider in Flash ın diğer sürümlerinde de çalışması için ne yapabilirim.

  4. Ömer hocam emeğine sağlık.Birşey sormak istiyorum size ilk slider örneği olan Tn3 galerideki örnekler ücretli mi ben defult skin adlı slideri beğendim ama indirme linkini göremedim de?
    Yardımlarınız için teşekkürler.

    1. Murat arkadaşım Tn3 adresindeki slider tarzındaki galeriler ücretli. ama free download kısmında yer alan galeri ücretsiz olarak sizlere verilmektedir. Email adresini veriyorsun sana indirme linkini gönderiyorlar.
      Kolay gelsin.

  5. HOCAM TAM EKRANLI BİR RESİM GALERİSİ ARIYORUM.YUKARIDA VERMİŞ OLDUĞUNUZ GALERİNİN DEMOSU FULL EKRANA İZİN VERMİYOR.ÜCRETSİZ OLARAK BULABİLECEĞİM BİR SİTE VEYA ÖRNEK VAR MI ACABA?

    1. file:///C:/Users/alihaydar/Desktop/malihu-jquery-image-gallery/malihu-jquery-image-gallery/malihu-jquery-image-gallery.html
      araştırırken bu örneği buldum arkadaşlar buna bi göz atabilir fena değil

      1. Ali haydar arkadaşım, o sitedeki dosyanı link olarak gönderirsen arkadaşlarla paylaşabilirim. Sen kendi bilgisayarındaki uzantıyı paylaşmışsın. O yüzden göremiyoruz.

  6. Hocam admin panelli slider nasıl yapılır önemli olan konu o php için bahsedermisiniz ya da ders yaparmısınız

  7. hocam ilk galeri nin demosuna tıkladığımda bir site açılıyo orda
    tn3 Aura adında bir galeri var onu nasıl indirebilirim…

    1. Muhammed girdiğin sitedeki freedownload yazan butona tıklıyorsun ve email adresini yazıyorsun. İndirme linki gönderiyorlar. Lakin hangisini indireceğini bilmiyorum.

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.