360 Panoramik Fotoğraf Gösterme Hazır Kodu

Android telefonlardan çekilen, panaromik fotoğrafları bilirsiniz. peki bu fotoğrafları, içerisinde gezilebilecek hale getirebileceğinizi söylesek? Basit bir kod yardımıyla sitelerinize ekleyebileceğiniz bu 360 derecelik fotoğrafları ziyaretçileriniz mouse ile sürükleyerek gezebilecek! Kod içerisindeki "https://lh4.googleusercontent.com" ile başlayan resim adresleri yerine kendi resimlerinizin adreslerini yazmanız yeterli!

<style>
#koddostu-sphere{width:510px;height:340px;background:#fff;}#koddostu-ptpr{width:509px;height:30px;display:block;font-size:0px;border-bottom:1px solid #ddd;-webkit-border-bottom-left-radius: 30px;border-bottom-left-radius: 30px;border-right:1px solid #ddd;}</style><script src="http://kdostu.googlecode.com/svn/cquery.js" charset="windows-1254"></script><style>.foto-koddostu{background:#fff;color:#e46f61;cursor:pointer;font-size:13px;display:inline-block;height:30px;border:1px solid #ddd;width:84px;font-weight:bold;-webkit-border-bottom-left-radius: 30px;border-bottom-left-radius: 30px;border-right:none;border-bottom:none;}
</style>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div id="koddostu-sphere" style="border-top:4px solid #e46f61;">
<g:panoembed imageurl="https://lh4.googleusercontent.com/-i33QMLbEr2s/USMVeyAujaI/AAAAAAAATsc/s3uLcQgV14E/w1062-h531/PANO_20130218_143011.jpg" fullsize="4096,2048" croppedsize="4096,1580" offset="0,350" displaysize="510,340"/>
</div>
<koddostu>
<div id="koddostu-ptpr">
<button class="foto-koddostu" onclick="kdsphere(1);">1</button>
<button class="foto-koddostu" onclick="kdsphere(2);">2</button>
<button class="foto-koddostu" onclick="kdsphere(3);">3</button>
<button class="foto-koddostu" onclick="kdsphere(4);">4</button>
<button class="foto-koddostu" onclick="kdsphere(5);">5</button>
<button class="foto-koddostu" onclick="kdsphere(6);">6</button>
</div>
</koddostu>
<script> gapi.panoembed.go();function kdsphere(koddostufoto){
var kalip = document.getElementById('koddostu-sphere');
var koddostufot = new Array();
koddostufot[1] = "https://lh4.googleusercontent.com/-i33QMLbEr2s/USMVeyAujaI/AAAAAAAATsc/s3uLcQgV14E/w1062-h531/PANO_20130218_143011.jpg";
koddostufot[2] = "https://lh4.googleusercontent.com/-1Sp2poEK2fs/UWS7SRff8KI/AAAAAAAAtZU/H9CqPdtOyn8/w1062-h531/PANO_20130410_073352_1.jpg";
koddostufot[3] = "https://lh4.googleusercontent.com/-CzDt3FtUUVo/UT0Wfq35RaI/AAAAAAAAqHE/xzNcCBDk9Rk/w1062-h531/2013+-+1";
koddostufot[4] = "https://lh3.googleusercontent.com/-sNKTEX_4_aE/UTtc4u4jPzI/AAAAAAAAZGA/ltFusLDpA48/w1061-h443/PANO_20130309_105426.jpg";
koddostufot[5] = "https://lh5.googleusercontent.com/-iunTIaJxzF0/USx9qPq14cI/AAAAAAAALKc/uFauM7UFbQQ/w1062-h531/13+-+1";
koddostufot[6] = "https://lh4.googleusercontent.com/-Jt9RFiNtf68/UUt1lIoxcZI/AAAAAAAAqcE/3V7dGV_se8A/w1062-h531/PANO_20130322_070002.jpg";
kalip.innerHTML='<g:panoembed imageurl="' + koddostufot[koddostufoto] + '" fullsize="4096,2048" croppedsize="4096,1580" offset="0,480" displaysize="510,340"/>'
gapi.panoembed.go();
}
</script>

Nasıl ekleyeceğinizi öğrenmek için,sitenizi oluştururken kullandığınız platformu seçin: