Panoramik resim eklentisi – Cyclotron.js

26Okunma
2 yorum

Panoramik

 

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>
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-10-01 tarihinde yayınlandı,Toplam 1740 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(2 yorum)
Yükleniyor...
gulet tur Yorumcu LV.1
2014-04-11 16:19:03 回 Yanıtla

Eklentiyi yaptım hali hazırda’da güzel anlatmışsınız hemen yaptım ödevimdi bu konu çok sağolun

Teknoloji Haberleri Yorumcu LV.1
2014-04-20 13:07:03 回 Yanıtla

Eklentiyi yaptım, çok güzel anlatmışsınız.