Panoramik resim eklentisi – Cyclotron.js

Günümüzde teknoloji ve internet kullanımı bir hayli ilerledi ve artık çoğu kişi alışverişlerini bile internet üzerinden yapıyorlar. Bir şekilde bizlerin de bu döneme ayak uydurmamız gerektiğini düşünüyorum. Bu yazıda sizlere anlatacağım Cyclotron.js uygulaması özellikle emlak sektörü ile ilgilenenler için oldukça faydalı bir çalışmadır.

Bir emlakçıya ev almak veya kiralamak için gittiğiniz  zaman emlakçının elindeki seçenekleri görebilmeniz için teker teker gezmeniz gerekmekte. Çok zaman alan ve bir o kadar da uğraştıran bir yöntemdir. Sene 2000’lerin başında emlakçılar için 3D mekan sistemi geliştirmiş olan bir Amerika’lı şirket dahi vardır. Top şeklinde bir küre içine alıcılar girip kürenin içinde yürüdüklerinde adeta evin içindeymiş gibi bir görüntü ile karşılaşıyorlardı. Böyle bir sistemi taa Amerika’lardan tutup ülkemize emlak işi için getirmek o kadarda ucuz değil hani. Halbuki bunun yerine bir bilgisayar ve panoramik (evin içini 360 derece gösterebilen) bir sistem elinizde olsaydı gayet iyi olurdu.

jQuery Cyclotron eklentisi bu tarz çalışmalar için birebir bir örnektir. Bazı akıllı telefonlar sayesinde panoramik fotoğraf çekip Cyclotron uygulaması ile müşterilerinize çok daha kolay bir şekilde elinizdeki seçenekleri sunabilirsiniz . Sürükle bırak yöntemi ile çalışıyor ve resmin sonuna geldiği zaman resmin diğer ucu adeta birleşikmiş gibi görünür.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri : 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="jquery.cyclotron.js"></script>

JavaScript : 

<script>
$(document).ready(function ($) {
    $('.cycle').cyclotron();
});
</script>

Css kodu : 

<style>
html, body {
    margin: 0;
    padding: 0;
}
.cycle {
    background-image: url(cyclotron.jpg);
    height: 512px;
    cursor: move;
}
.box {
    width: 512px;
    margin: 0 auto;
    font-family: arial, sans-serif;
}
</style>

• Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="cycle"></div>