Merhaba arkadaşlar. Yayınladığımız slider konulu makalelere gösterdiğiniz alaka sebebiyle aynı konuyu tekrar işlemeye karar verdik. Bugün sizlere kolay kullanımı ve gelişmiş özellikleriyle Fotorama Slider‘ı tanıtacağız. Yapımcıların yorumu şöyle :
Alıntı:
| “Basit, şaşırtıcı, jQuery ile hazırlanmış gülçlü bir resim galerisi.” |
Nasıl kullanılır? Siteme nasıl slider eklerim?
Fotorama‘nın en büyük özelliği kolay kurulabilir ve değiştirilebilir olması. Sadece 51KB boyutundaki jQuery, Fotorama.JS ve Fotorama.CSS dosyalarını kodlarınıza eklemeniz yeterli. Eklemeniz gereken javascript ve css kodları :
HTML Kodu:
<!-- jQuery (1.8 veya sonrası), -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- 33 KB -->
<!-- fotorama.css & fotorama.js. -->
<link href="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.js"></script> <!-- 15 KB -->
HTML Kodu:
<div class="fotorama" data-autoplay="true">
<img src="1.jpg">
<img src="2.jpg">
</div>
Eğer sliderın boyut, geçiş veya mobil uyumu gibi özelliklerini değiştirmek istiyorsanız makaleyi okumaya devam edin.
Özellikler
Fotorama onlarca değiştirilebilir özelliğe sahip. Sizler için en çok ihtiyaç duyacağınız özelliklerini belirledik ve detaylı bir şekilde anlattık.
Boyutlandırma
Fotorama boyutlandırılması gayet basit bir slider. Yapımcılar bize boyut ölçeği, yükseklik ve genişlik değerlerini tanımlama şansı tanıyor. İster sabit boyutlarda bir sunum yapıyoruz, ister responsive, içerisinde bulunduğu öğeye göre şekil alan bir sunum yapıyoruz. Aşağıdaki tanımlamaları class=”fotorama” tanımlaması yaptığınız div öğesine ekleyin.
Aşağıdaki kod içerisinde bulunan data-height ve data-width sayesinde sliderın boyutlarını piksel bazında değiştirebilirsiniz.
HTML Kodu:
<div class="fotorama" data-width="800" data-height="600">
<img src="1.jpg">
<img src="2.jpg">
</div>
Eğer her tip ekran çözünürlüğe uyum sağlayıp içerisinde bulunduğu öğeye göre kısalıp uzayabilen bir slider yapmak istiyorsanız kullanacağınız ölçü birimi piksel değil, yüzdeler ve ölçekler olmalı.
HTML Kodu:
<div class="fotorama" data-width="100%" data-ratio="800/600">
<img src="1.jpg">
<img src="2.jpg">
</div>
100% genişlik ve yükseklikte slider
Tüm sayfayı hem dikey hem de yatay olarak kaplayan bir slider eklemek istiyorsanız da body elemanınıza margin:0 tanımlaması yapmanız, beraberinde de her iki çözünürlüğü de 100%‘e eşitlemeniz gerekiyor.
HTML Kodu:
<body style="margin: 0;">
<div class="fotorama" data-width="100%" data-height="100%">
<img src="1.jpg">
<img src="2.jpg">
</div>
</body>
Görsellerin kendiliğinden değişmesini istiyorsanız da auto-play elemanını true olarak değiştirmeniz gerekiyor. Örnek verecek olursak :
HTML Kodu:
<div class="fotorama" data-autoplay="true">
<img src="1.jpg">
<img src="2.jpg">
</div>
Slide içerisinde bulunan tüm görseller bittikten sonra tekrar başa sarmasını istiyorsanız data-loop elemanını true olarak değiştirmeniz gerekiyor. Örnek verecek olursak :
HTML Kodu:
<div class="fotorama" data-loop="true">
<img src="1.jpg">
<img src="2.jpg">
</div>
Sırayla oynatmasın
Eğer slidera eklediğiniz görsellerin belirli bir sıraya göre değişmesini istemiyorsanız data-shuffle tanımlamasını true olarak değiştirmeniz gerekiyor. Örnek verecek olursak :
HTML Kodu:
<div class="fotorama" data-shuffle="true">
<img src="1.jpg">
<img src="2.jpg">
</div>
Slider iki tip geçiş efektini kullanmanızı mümkün kılıyor. Birincisi ve varsayılan olanı “slide”, diğeri ise “crossfade” olarak tanımlanıyor. Tanımlama elemanımız ise data-transition. Örnek bir çalışma yapalım ve crossfade geçişini kullanalım.
HTML Kodu:
<div class="fotorama" data-transition="crossfade">
<img src="1.jpg">
<img src="2.jpg">
</div>
Slider içerisinde sadece resimler değil, videolar da döndürmek istiyorsanız yapmanız gereken işlem gayet basit. A href tanımlamasıyla istediğiniz videoyu ekleyebilirsiniz.
HTML Kodu:
<div class="fotorama">
<a href="http://www.youtube.com/watch?v=Uwnzu3_aobo">Karakalem Efekti</a>
<a href="http://www.youtube.com/watch?v=V9MKWGMZago">Çift Yüz İllüzyonu</a>
</div>
Sliderınıza “tam ekran göster” buttonu koymak istiyorsanız yapmanız gereken data-allowfullscreen tanımlamasını true olarak döndürmek.
HTML Kodu:
<div class="fotorama" data-allowfullscreen="true">
<img src="1.jpg">
<img src="2.jpg">
</div>
Bu makalemizde kullanım kolaylığıyla büyük avantaj sağlayan Fotorama Slider’ı inceledik. Yazılımın tüm önemli detaylarına değinmeye çalıştık. Atladığımız veya az değindiğimiz şeyler olursa yorum alanından belirtirseniz seviniriz. Ayrıca Fotorama’nın internet sitesine buradan erişebilirsiniz.
Bir sonraki makalemizde görüşmek üzere, iyi çalışmalar.
Yorum Gönder