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.

<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.

/*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

<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)

<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.

<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.