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;
- Jquery kütüphanesini indirin.İNDİR
- Jqury migrate kütüphanesini indirin.İNDİR(Camera jquerynin eski versiyonlarında bulunan bir özelliği kullanıyor.)
- Jquery easing kütüphanesini yada UI kütüphanesini indirin.İNDİR
- camera kütüphanesini indirin.(js-css-img) İNDİR
- 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.
|
1 2 3 4 5 6 7 8 9 |
<div class="camera-slider"> <div data-src="resim/r1.jpg"></div> <div data-src="resim/r2.jpg"></div> <div data-src="resim/r3.jpg"></div> <div data-src="resim/r4.jpg"></div> <div data-src="resim/r5.jpg"></div> </div> |
site.js dosyasını açıp slider olması için gerekli olan slider kodunu ekliyoruz.
|
1 2 3 4 |
/*JUQERY KODLARIMIZI BURAYA YAZACAĞIZ*/ $(".camera-slider").camera(); |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="panel"> <div class="camera-slider"> <div data-src="resim/r1.jpg"></div> <div data-src="resim/r2.jpg"></div> <div data-src="resim/r3.jpg"></div> <div data-src="resim/r4.jpg"></div> <div data-src="resim/r5.jpg"></div> </div> </div> |
CSS(head etiketleri arasına yazılacak kodlar)
|
1 2 3 4 5 6 7 8 |
<style> .panel{ width:800px; margin:0 auto; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="panel"> <div class="camera-slider"> <div data-src="resim/r1.jpg" data-link="http://www.google.com.tr" data-thumb="resim/kucuk/r1.jpg"> <div class="camera_caption moveFomRight"> Sokak hayvanları <i>açlıktan ölürken</i>, hayvan mağazalarından hayvan alanlar.<strong> Hayvanları sevmek yerine onlara en büyük eziyeti yapan insanlardır.</strong> </div> </div> <div data-src="resim/r2.jpg" data-thumb="resim/kucuk/r2.jpg"></div> <div data-src="resim/r3.jpg" data-thumb="resim/kucuk/r3.jpg"> <div class="camera_caption moveFromTop"> Pandalar nesnli tükenmek üzere olan ilginç hayvanlardır. </div> </div> <div data-src="resim/r4.jpg" data-thumb="resim/kucuk/r4.jpg"></div> <div data-src="resim/r5.jpg" data-thumb="resim/kucuk/r5.jpg"></div> </div> </div> |
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 |
[…] Jquery Slider (CameraJS) […]
[…] Jquery Slider Uygulaması […]