spin-360
> npm install spin-360
spin-360 360 derece detaylı resim gösterimi için geliştirilmiş ve geliştirilmektedir.
360 derece ürün gösterimi ve özellikle e-ticaret siteleri için uygundur.
API
$(element).spin360(options);
Parametreler
- width: (Integer) - Görsel alanının genişliği - Default (500)
- height: (Integer) - Görsel alanının yüksekliği - Default (500)
- images: (Array) - 360 derece gösterilmesi istenen nesnenin sıralı listesi.
- imgClass: (String) - Görsellerin alacağı class değeri - Default (spin-image)
- type: (String) - 'images' ya da 'video' - Default (images)
- lazyLoad: (Boolean) - Aktif olmayan görsellerin sayfaya yüklenmesini bekletir. Aktif
olduktan sonra yükleyip, yüklenme zamanını dengeler - Default(true)
Image ile spin 360
Video ile spin 360
Kullanımı
İlk olarak 'Jquery' ve 'spin-360' scriptleri sayfaya dahil edilir.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/spin360.js"></script>
/* Daha sonra 360 derece görselimizin görüneceği alan oluşturulur. */
<div id="360Image"></div>
<div id="360Video"></div>
Son olarak spin-360 pluginimiz tetiklendikten sonra projemiz kullanılmaya hazırdır.
var spin = $('#360Image').spin360({
width: 500,
height: 500,
imgClass: 'spin-image',
datas: [
"images/Tv/product01.jpg",
"images/Tv/product02.jpg",
"images/Tv/product03.jpg",
"images/Tv/product04.jpg",
"images/Tv/product05.jpg",
"images/Tv/product06.jpg",
"images/Tv/product07.jpg",
"images/Tv/product08.jpg",
"images/Tv/product09.jpg",
"images/Tv/product10.jpg",
"images/Tv/product11.jpg",
"images/Tv/product12.jpg",
"images/Tv/product13.jpg",
"images/Tv/product14.jpg",
"images/Tv/product15.jpg",
"images/Tv/product16.jpg",
"images/Tv/product17.jpg",
"images/Tv/product18.jpg",
"images/Tv/product19.jpg",
"images/Tv/product20.jpg",
"images/Tv/product21.jpg",
"images/Tv/product22.jpg",
"images/Tv/product23.jpg",
"images/Tv/product24.jpg",
"images/Tv/product25.jpg",
"images/Tv/product26.jpg",
"images/Tv/product27.jpg",
"images/Tv/product28.jpg",
"images/Tv/product29.jpg",
"images/Tv/product30.jpg",
"images/Tv/product31.jpg",
"images/Tv/product32.jpg",
"images/Tv/product33.jpg",
"images/Tv/product34.jpg",
"images/Tv/product35.jpg",
"images/Tv/product36.jpg"
],
lazyLoad: true
});
Video ile çalıştırma
var spin = $('#360Video').spin360({
width: 500,
height: 300,
type: 'video',
datas: [
"videos/Tv/20Ms.mp4",
]
});
Projeyi çalıştırdıktan sonra durdurmak istiyorsanız:
spin.destroy();
