digital tour (foto 360°) omgeving herhalen.
Ik ben aan het experimenteren om iets te maken als google streatvieuw, echter bots ik tegen een probleem.
Met onderstaande code kan ik al slepen zoals in google, maar wanneer ik de foto eindig krijg ik zwart (wat normaal is want dat is de achtergrondkleur). Hoe kan ik de foto zo laten herhalen dat de div (.deur) ook mee herhaalt zowel aan de linker als aan de rechter kant en dat de onnodige foto's worden gewist?
Ik dacht aan een trigger met de margin-left van de (.room) - de scherm breedte maar dit triggerde de verkeerde kant
Alvast bedankt,
Mvg. Knipper
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="placeholder">
<div class="room">
<img draggable="false" style="-moz-user-select: none;float:left;" src="img.jpg" height="100%">
<div class="deur" style="background: rgba(0, 0, 0, 0.5);width: 100px;height: 100px;z-index: 8;position: relative;top: 20;left: 800;"></div>
</div>
</div>
<script>
$( document ).ready(function() {
var muis_ingedrukt = false; /*trigger muis ingedrukt (true) of niet (false)*/
var muis_klik = 0; /*horizontale pixel op moment van klikken van muis*/
var muis_sleep = 0; /*horizontale pixel tijdens sleep van muis*/
var margin_nieuw = 0; /*margin die moet worden toegevoegd of verwijderdt*/
var margin_foto = 0; /*huidige margin van de foto*/
$('.room').mousedown(function(e){
muis_ingedrukt = true;
muis_klik = e.clientX;
margin_foto_dummy = margin_foto;
});
$(document).mouseup(function(){
muis_ingedrukt = false;
})
$('.room').mousemove(function(event){
if(muis_ingedrukt == true) {
/*Slepen van de image*/
muis_sleep = event.pageX;
margin_nieuw = muis_sleep - muis_klik; /*berekenen van de nieuwe margin*/
$(".log").text(margin_foto);
margin_foto = margin_foto_dummy + margin_nieuw ;
$(".room").css("margin-left", margin_foto + "px");
}
});
});
</script>
<div class="room">
<img draggable="false" style="-moz-user-select: none;float:left;" src="img.jpg" height="100%">
<div class="deur" style="background: rgba(0, 0, 0, 0.5);width: 100px;height: 100px;z-index: 8;position: relative;top: 20;left: 800;"></div>
</div>
</div>
<script>
$( document ).ready(function() {
var muis_ingedrukt = false; /*trigger muis ingedrukt (true) of niet (false)*/
var muis_klik = 0; /*horizontale pixel op moment van klikken van muis*/
var muis_sleep = 0; /*horizontale pixel tijdens sleep van muis*/
var margin_nieuw = 0; /*margin die moet worden toegevoegd of verwijderdt*/
var margin_foto = 0; /*huidige margin van de foto*/
$('.room').mousedown(function(e){
muis_ingedrukt = true;
muis_klik = e.clientX;
margin_foto_dummy = margin_foto;
});
$(document).mouseup(function(){
muis_ingedrukt = false;
})
$('.room').mousemove(function(event){
if(muis_ingedrukt == true) {
/*Slepen van de image*/
muis_sleep = event.pageX;
margin_nieuw = muis_sleep - muis_klik; /*berekenen van de nieuwe margin*/
$(".log").text(margin_foto);
margin_foto = margin_foto_dummy + margin_nieuw ;
$(".room").css("margin-left", margin_foto + "px");
}
});
});
</script>
Iemand een idee om dit te fixen?
Alvast bedankt