jQuery 360 derece slider, ertan3d-slider
jQuery ile yazmış olduğumuz 360° slider eklentisi. 360 derece ürün çevirme için birebir jquery plug'ini.
Web sitenizde ürünlerinizi her yönden göstermek isteyenlere birebir, 360 derece veya her yönden gösterebileceğiniz bir jquery eklentimiz. Kısaca eklentinin özelliklerinden bahsedecek olursak;
- Sadece belli sayıda fotoğraf ekleme değil, sınırsız sayıda fotoğraf eklemek mümkün,
- Eklentinin 2 modu bulunuyor; 1. modda arkaplanları değiştirerek, 2. modda ise CSS3 desteği sunan birden çok arkaplan gösterme özelliği ile çalışmaktadır,
- ertan3d-slider'da 2 adet çevirme modu bulunmaktadır; 1. modda kare kare ilerleme, 2. modda ise belirttiğiniz duraklarda durarak ilerleme şeklindedir: 2. mod için 2 adet dönme animasyonu vardır, 1. animasyon ve varsayılan animasyon ile kareler arası geçiş süresi eşittir. 2. animasyonda ise hızlıdan yavaşa doğru bir efekt bulunmaktadır.
- Klavye ile çevirme desteği vardır
ertan3d-slider Dökümantasyonu
En az jquery 1.6+ bir jquery kütüphanesine ihtiyaç duymaktadır.
Ön Bilgi:
jQuery aktırımından hemen sonrasınra kullanabilirsiniz.
Kurulum
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ertan3d-slider.js"></script>
Kullanım
<script>
$(".ertan-3d-rotator").ertan3d({
elements:['bg/001.jpg','bg/002.jpg']
?});
</script>
Ayarlamalar ve Seçenekler
mode: 1 | 2 (optional, integer, opsiyonel, sadece sayı, 1,2, varsayılan 1) /* 1. modda eski browserları da destekler, 2. mod yeni ve css3 desteği olan browserlar içindir, 2. mod önerilir*/
start_index: 0 (optional, integer, unsigned, >= 0, opsiyonel, varsayılan 0, sadecece rakam) /* sliderin başlamasını istediğiniz karenin indexi (yani hangi kare ise bir öncekinin sırası)*/
elements : [] (required, array of strings, zorunlu, dizi şeklinde) /* sliderin her bir karesinin resim url'leridir, slider çalışması için zorunludur*/
stops: [] ( optional, array of indexes, default [], opsiyonel, durak noktalarının indexleri dizi olarak, varsayılan boş dizi) /* sliderin ileri geri butonlarına basıldığında bu durak noktalarına kadar gitmesini ve durakta durmasını sağlar*/
animate: true|false ( optional, boolean, default true, opsiyonel, doğru|yanlış, varsayılan true) /* slider eğer 2. modda ise ve durak girilmişse durağa yaklaştıkça yavaşlayarak hareket etmesini sağlar*/
left: string ( required, string, jquery selector string, zorunlu, sola (geri) butonunun seçici jquery değişkeni) /* slideri sola (geri) ilerleten butonun jquery seçici değişkeni*/
right: string (required, string, jquery selector string, zorunlu, sağa (ileri) butonunun seçici jquery değişkeni) /* slideri sağa (ileri) ilerleten butonun jquery seçici değişkeni*/
load_num: integer (optional, integer unsigned, default 0, opsiyonel, sadece rakam, varsayılan 0) /* slider yüklenmeden önce yüklenecek kare sayısı, 0 = tüm kareler, >0 = girilen kadar geri ve ileri kare yükler*/
press_time: integer ( optional, integer, > 0, default 100, opsiyonel, sadece sıfırdan büyük sayı, varsayılan 100) /* tıklama veya klavye butonuna basmada durmadan hareket etmesi için beklenen milisaniye türünden süre*/
delay: integer ( optional, integer, > 0, default 200, opsiyonel, sadece sıfırdan büyük sayı, varsayılan 200) /* durak olmaması durumunda kareler arası geçiş süresi, durak olması durumunda duraklar arası toplam geçiş süresi, milisaniye*/
Olaylar
onnext , onprev, onsetted, oninited events
onnext : on next event, function (ileri gittiğindeki olay, olay tamamlanınca çalışır, fonksiyon)
onprev: on prev event, function (geri gittiğindeki olay, olay tamamlanınca çalışır, fonksiyon)
onsetted: on set event, function (kare değiştiğindeki olay, olay tamamlanınca çalışır, fonksiyon)
oninited : on init event, function (slider entegre olduğunda ve tek sefer çalışır, fonksiyon)
Yazar
Ertan BÖLER, 2013
Lisans/Versiyon
* Version: 1.2 (3/11/2013) * Requires: jQuery v1.6+ * * Copyright (c) 2013 Ertan BÖLER * Under MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html
Demo için buraya tıklayınız.
Eklentiyi indirmek için buraya tıklayınız.