spin-360
Version:
360 degree detailed image presentation plugin
229 lines (222 loc) • 12.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spin 360</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="icon" type="image/png" href="images/favicon.png"/>
</head>
<body>
<header>
<div class="global-container header">
<div class="logo">
<a class="vt-logo" href="/"></a>
<span>spin360</span>
</div>
</div>
</header>
<div class="global-container">
<div class="page-container">
<div class="description">
<h1>spin-360</h1>
<p>
<div class="terminal">
<span class="terminal-arrow">> </span>npm install spin-360
</div>
<br><br>
spin-360 360 derece detaylı resim gösterimi için geliştirilmiş ve geliştirilmektedir.
<br><br>
360 derece ürün gösterimi ve özellikle e-ticaret siteleri için uygundur.
</p>
</div>
<div class="description">
<h1>API</h1>
<div class="code">
$(element).spin360(options);
</div>
<h2>Parametreler</h2>
<ul>
<li><b>width:</b> (Integer) - Görsel alanının genişliği - Default (500)</li>
<li><b>height:</b> (Integer) - Görsel alanının yüksekliği - Default (500)</li>
<li><b>images:</b> (Array) - 360 derece gösterilmesi istenen nesnenin sıralı listesi.</li>
<li><b>imgClass:</b> (String) - Görsellerin alacağı class değeri - Default (spin-image)</li>
<li><b>type:</b> (String) - 'images' ya da 'video' - Default (images)</li>
<li><b>lazyLoad:</b> (Boolean) - Aktif olmayan görsellerin sayfaya yüklenmesini bekletir. Aktif
olduktan sonra yükleyip, yüklenme zamanını dengeler - Default(true)
</li>
</ul>
<br>
<br>
</div>
<div class="description">
<h2>Image ile spin 360</h2>
</div>
<div id="360Image"></div>
<br>
<br>
<div class="description">
<h2>Video ile spin 360</h2>
</div>
<div id="360Video"></div>
<br>
<br>
<div class="description">
<h2>Kullanımı</h2>
İlk olarak 'Jquery' ve 'spin-360' scriptleri sayfaya dahil edilir.
<br>
<br>
<div class="code">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<br>
<script type="text/javascript" src="scripts/spin360.js"></script>
<br>
<br>
<span class="note">/* Daha sonra 360 derece görselimizin görüneceği alan oluşturulur. */</span>
</div>
<br>
<br>
<div class="code">
<div id="360Image"></div>
<br>
<br>
<div id="360Video"></div>
</div>
</div>
<div class="description">
<p>
Son olarak spin-360 pluginimiz tetiklendikten sonra projemiz kullanılmaya hazırdır.
</p>
<br>
<div class="code">
var spin = $('#360Image').spin360({<br>
          width: 500,<br>
          height: 500,<br>
          imgClass: 'spin-image',<br>
          datas: [<br>
                    "images/Tv/product01.jpg",<br>
                    "images/Tv/product02.jpg",<br>
                    "images/Tv/product03.jpg",<br>
                    "images/Tv/product04.jpg",<br>
                    "images/Tv/product05.jpg",<br>
                    "images/Tv/product06.jpg",<br>
                    "images/Tv/product07.jpg",<br>
                    "images/Tv/product08.jpg",<br>
                    "images/Tv/product09.jpg",<br>
                    "images/Tv/product10.jpg",<br>
                    "images/Tv/product11.jpg",<br>
                    "images/Tv/product12.jpg",<br>
                    "images/Tv/product13.jpg",<br>
                    "images/Tv/product14.jpg",<br>
                    "images/Tv/product15.jpg",<br>
                    "images/Tv/product16.jpg",<br>
                    "images/Tv/product17.jpg",<br>
                    "images/Tv/product18.jpg",<br>
                    "images/Tv/product19.jpg",<br>
                    "images/Tv/product20.jpg",<br>
                    "images/Tv/product21.jpg",<br>
                    "images/Tv/product22.jpg",<br>
                    "images/Tv/product23.jpg",<br>
                    "images/Tv/product24.jpg",<br>
                    "images/Tv/product25.jpg",<br>
                    "images/Tv/product26.jpg",<br>
                    "images/Tv/product27.jpg",<br>
                    "images/Tv/product28.jpg",<br>
                    "images/Tv/product29.jpg",<br>
                    "images/Tv/product30.jpg",<br>
                    "images/Tv/product31.jpg",<br>
                    "images/Tv/product32.jpg",<br>
                    "images/Tv/product33.jpg",<br>
                    "images/Tv/product34.jpg",<br>
                    "images/Tv/product35.jpg",<br>
                    "images/Tv/product36.jpg"<br>
          ],<br>
          lazyLoad: true<br>
});<br>
</div>
<br>
<h3>Video ile çalıştırma</h3>
<br>
<div class="code">
var spin = $('#360Video').spin360({<br>
          width: 500,<br>
          height: 300,<br>
          type: 'video',<br>
          datas: [<br>
                    "videos/Tv/20Ms.mp4",<br>
          ]<br>
});<br>
</div>
</div>
<div class="description">
<p>
Projeyi çalıştırdıktan sonra durdurmak istiyorsanız:
<br>
<div class="code">spin.destroy();</div>
</p>
</div>
</div>
</div>
<a href="https://github.com/hepsiburada/spin-360">
<img style="position: absolute; top: 0; left: 0; border: 0;"
src="images/fork.png" alt="Fork me on GitHub">
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/spin360.js"></script>
<script type="text/javascript">
var spin = $('#360Image').spin360({
width: 500,
height: 300,
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: false
});
var spVideo = $('#360Video').spin360({
id: "360Video",
width: 500,
height: 300,
type: 'video',
datas: [
"videos/Tv/20Ms.mp4"
],
lazyLoad: false
});
</script>
</body>
</html>