Jquery Slider Eklentisi #CameraJS

[DumanInc]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

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

1. Jquery kütüphanesini indirin.
   Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
2. Jqury migrate kütüphanesini indirin.
   Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
   (Camera jquerynin eski versiyonlarında bulunan bir özelliği kullanıyor.)
3. Jquery easing kütüphanesini yada UI kütüphanesini indirin.
   Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
4. camera kütüphanesini indirin.(js-css-img)
   Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
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.

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=" Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir. " 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

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

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

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