Perşembe , 19 Ekim 2017
Anasayfa » JavaScript » Jquery » Jquery Slider Eklentisi #CameraJS

Jquery Slider Eklentisi #CameraJS

Daha önce bir slider eklentisinden bahsetmiştim. Bazen sadece slider olması yeterli olmaz daha fazla özellik istersiniz. İşte bu slider eklentisi bir çok özelliği ile bir sliderdan isteyebileceğinizden fazlasını vererir.

 

Camera Slider  eklentisinin kurulumunu ve bazı temel özelliklerini detaylı açıkladım.

Slider eklentimizin kurulumu için gerekli kütüphaneler;

  1. Jquery kütüphanesini indirin.İNDİR
  2. Jqury migrate kütüphanesini indirin.İNDİR(Camera jquerynin eski versiyonlarında bulunan bir özelliği kullanıyor.)
  3. Jquery easing kütüphanesini yada UI kütüphanesini indirin.İNDİR
  4. camera kütüphanesini indirin.(js-css-img) İNDİR
  5. kodlarınızı yazacağınız js dosyasını oluşturun.

Yukarıdaki sıraylada sliderı yazacağınız sayfaya bu kütüphaneleri yükleyin.

Yada benim hazırladığım şablon dosyasını indirmek için tıklayın

Slider yapacağımız div  içine sliderda olacak resimleri yine div etiketlerini kullanarak ekliyoruz.

Her div etiketinin data-src attribute değerine resim yolunu yazıyoruz.

 

site.js dosyasını açıp slider  olması için gerekli olan slider kodunu ekliyoruz.

Slider nesnemizi biraz düzenleyelim.  Aşağıdaki CSS kodları ile sayfanın ortasında bir  bölümde düzgün bir şekilde görünmesini sağlayabiliriz.

Html kodlarının yeni şekli  ve css kodları aşağıdakine benzer olacaktır.

HTML

CSS(head etiketleri arasına yazılacak kodlar)

Resimlerin altına yazı getirmek için resimleri eklediğimiz div içine classı camera_caption etiket ekliyoruz. Aynı etiketin içine yazıların nasıl bir animasyon ile çalışacağını belirtmek için “moveFromLeft”, “moveFomRight”, “moveFromTop”, “moveFromBottom”, “fadeIn”, “fadeFromLeft”, “fadeFromRight”, “fadeFromTop”, “fadeFromBottom”  classlardan birini ekliyoruz.

Küçük resimlerini de göstermek istiyorsanız. Yüklenen resmin bulunduğu div etiketine data-thumb attribute eklemeniz gerekir.

Resimlere link vermek istiyorsak data-link ile sayfa içi, sayfa dışı, bir dosyaya link vermek mümkün.

Bu anlatımdan sonra html kodumuz nasıl şekillendiğini bir inceleyelim.

 

Gerekli düzenleme yapıldıktan sonra birazda sliderın ayarlarına bakalım. Sliderın sitesindedeki bağlantıya tıklayarak ayarlar kısmındaki bazı ayarları inceleyelim.

Ayalarını .camera(); metodunun içine süslü paranzetler ve aralarda virgüller ile ekliyoruz.

Örnek: camera({
ayar1:değeri,
ayar2:değeri
});

Bitmiş Örnek Uygulamayı indirmek için paylaşın

Örneğin bitmiş halini indirmek için tıklayın.

site.js dosyasındaki script kodlarını aşağıdaki ayarlar ile test edebilirsiniz.

Ayar Açıklama Yazılacaklar
alignment Resmin hangi konumdan itibaren yükleneceğini ifade ediyor. topLeft, topCenter, topRight,  centerLeft, center,  centerRight, bottomLeft, bottomCenter, bottomRight
autoAdvance Otomatik çalışıp çalışmayacağı true,false
mobileAutoAdvance ceptelefonlarında otomatik çalışıp çalışmayacağı true,false
barDirection yükleme çubuğu bar yapılırsa yününü gösterir. ‘leftToRight’, ‘rightToLeft’, ‘topToBottom’,  ‘bottomToTop’
fx animasyon çeşidini verir. random varsayılan çeşittir. ‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’,  ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’,  ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’,  ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’,  ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’,  ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’,  ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’,  ‘scrollBottom’, ‘scrollTop’
hover fare sliderın üzerine gelince durup durmyacağını ifade eder true,false
loader yükleyici şeklini gösterir. varsayılan pie dir. pie,bar,none
loaderColor

 

 yükleyici rengi #rrggbb
loaderBgColor: yükleyici arkaplan rengi #rrggbb
loaderOpacity yükleyici görünürlük 0-1 arasında bir değer örn: 0.8
pagination kaç tane resim olduğunu göstern daireler true,false
playPause duraklatma butonun gösterilip gösterilmeyeceği true,false
thumbnails küçük resimleri göstermek için kullanılır. html etiketinde data-thumb içindeki küçük hallerini koymayı unutmayın true, false
time: ekranda ne kadar görünceği (ms cinsinden) 7000
transPeriod: animasyonun ne kadar süreceği ms 1500

 

Hakkında Hayri

İlginizi Çekebilir

JQuery Checked Kullanımı

Bu örneğimizde JQuery ile checkbox kullanarak resim gizleyip göstermeyi yapacağız. Bunun için ilk olarak JQuery’nin sitesinden …

Bir Cevap Yazın

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