Jquery Slider Eklentisi #Fotorama

Hemen hemen her sitede olmazsa olmazlardan birisidir sliderlar. Bu yazıda az kod(hiç javascript kodu yazmadan) bir slider nasıl oluşturulur onu anlatacağım.

Kullanacağım slider eklentisi FOTORAMA;

sliderı kullanmadan önce jquery kütüphanesi ve fotorama dosyalarını indirmelisiniz.

Jquery fotorama

Dosyaları indirdikten sonra örnek bir html dosyası içine kütüphanemizi ve css dosyamızı çağırıyoruz.

Unutmayın sitenizde jquery eklentisi kullanıyorsanız. Öncelikle jquery kütüphanesini yükleyin sonra kullanacağınız kütüphaneyi dahil edin.

Peki fotorama slider nasıl kullanılır?

Ekranda göstermek istediğimiz resimleri fotorama classında bir div içine yerleştirmemiz yeterli olacaktır.

Örneği indirmek için ornek

<div class="fotorama" >
   <img src="galeri/faktoriyel-javascript.png" >
   <img src="galeri/orn_2.png" >
   <img src="galeri/sayi_tahmin.jpg" >
</div>

Html sayfamızın genel görünümü ve kodları da aşağıdaki gibi olacaktır.

<!DOCTYPE html>
<html>
<head>
<title>Basic fotorama</title>
<meta charset="utf-8">
<script src="jquery-1.12.1.min.js"></script>
<script src="fotorama.js"></script>
<link rel="stylesheet" type="text/css" href="fotorama.css">

</head>

<body>

<div class="fotorama">
<img src="galeri/faktoriyel-javascript.png" >
<img src="galeri/orn_2.png" >
<img src="galeri/sayi_tahmin.jpg" >
</div>
</body>
</html>

Sliderın içinde basit ayarlamalar yapmakta mümkün;

data- attribute yöntemi ile etiket içine yazarak ayarlamaları yapıyoruz.

sliderda resimlerin küçük hallerini göstermek (thumnail) için yazılacak kod: data-nav=“thumbs”

<div class="fotorama" data-nav="thumbs">
<img src="galeri/orn_2.png" >
<img src="galeri/faktoriyel-javascript.png" >
<img src="galeri/sayi_tahmin.jpg" >
</div>

tam ekran moduna izin vermek için yazılacak kod: data-allowfullscreen=”true”

<div class="fotorama" 
data-nav="thumbs"
data-allowfullscreen="true"
>
<img src="galeri/orn_2.png" >
<img src="galeri/faktoriyel-javascript.png" >
<img src="galeri/sayi_tahmin.jpg" >
</div>

Animasyon şeklini değiştirmek istiyorsak yazılacak kod: data-transition=”crossfade”

iki tane animasyon seçeneği var: slide yada crossfade

<div class="fotorama" 
data-nav="thumbs"
data-allowfullscreen="true"
data-keyboard="true"
data-shuffle="true"
data-autoplay="true"
data-transition="crossfade"
>
<img src="galeri/orn_2.png" data-caption="Ekranda görüncek yazı" >
<img src="galeri/faktoriyel-javascript.png" data-caption="başka bir yazı" >
<img src="galeri/sayi_tahmin.jpg" >
</div>

klavye tuşları ile resimler arasında geçiş yapılıp yapılamayacağı belirten kod: data-keyboard=“true”

<div class="fotorama" 
data-nav="thumbs"
data-allowfullscreen="true"
data-keyboard="true"
>
<img src="galeri/orn_2.png" >
<img src="galeri/faktoriyel-javascript.png" >
<img src="galeri/sayi_tahmin.jpg" >
</div>

Resimlerin sayfanın her açılışında karışık sırada gelmesini istiyorsak yazılacak kod: data-shuffle=“true”

<div class="fotorama" 
data-nav="thumbs"
data-allowfullscreen="true"
data-keyboard="true"
data-shuffle="true"
>
<img src="galeri/orn_2.png" >
<img src="galeri/faktoriyel-javascript.png" >
<img src="galeri/sayi_tahmin.jpg" >
</div>

Resimlere açıklama yazmak istiyorsak her bir resmin içine yazılacak başlık yazısı data-caption=“Ekranda görüncek yazı”

<div class="fotorama" 
data-nav="thumbs"
data-allowfullscreen="true"
data-keyboard="true"
data-shuffle="true"
>
<img src="galeri/orn_2.png" data-caption="Ekranda görüncek yazı" >
<img src="galeri/faktoriyel-javascript.png" data-caption="başka bir yazı" >
<img src="galeri/sayi_tahmin.jpg" >
</div>

Sliderın otomatik çalışıp çalışmayacağı ile ilgili yazılacak kod:data-autoplay=“true”

<div class="fotorama" 
data-nav="thumbs"
data-allowfullscreen="true"
data-keyboard="true"
data-shuffle="true"
data-autoplay="true"
>
<img src="galeri/orn_2.png" data-caption="Ekranda görüncek yazı" >
<img src="galeri/faktoriyel-javascript.png" data-caption="başka bir yazı" >
<img src="galeri/sayi_tahmin.jpg" >
</div>

sliderın genişlik yada yükseklik ayarlarını değiştirmek için yazılacak kod: data-width=“800” data-height=“600”

orantısal, maksimum ve minimum genişlik ve yükseklik değerlerini vermekte mümkün;

data-ratio=“800/600” genişlik yükseklik oranı

data-width=“80%” bulunduğu etiketin içindeki ne kadar oranda görüneceği

data-minwidth=“400” mininum ne kadar genişlikte olacağı

data-maxwidth=“1000” maksimum ne kadar genişlikte olacağı

data-minheight=“300”minimum ne kadar yükseklikte olacağı

data-maxheight=“100%” maksimum ne kadar yükseklikte olacağı

<div class="fotorama" 
data-nav="thumbs"
data-allowfullscreen="true"
data-width="700"
>
<img src="galeri/orn_2.png" >
<img src="galeri/faktoriyel-javascript.png" >
<img src="galeri/sayi_tahmin.jpg" >
</div>