javascript - How to make the margin of an image dynamic -
what have long rectangular image http://www.openstudio.fr/jquery-virtual-tour/img/sculpteur.jpg
and 3 buttons move image left, right , pause.. can seen here. trying recreate virtual tour http://www.openstudio.fr/jquery-virtual-tour/
this html content
<div class="pan" style="margin-left:-500px"> <img src="sculpteur.jpg" /> </div> <button class="right"> --) </button> // move right >> <button class="left"> (-- </button> // move left << <button class="pause">||</button> // pause x
this javascript file. codes after right button clicked
$(document).ready(function() { $a=parseint($('.pan').css('marginleft')); $(".right").click(function(){ $('.pan').stop(); $direction = "right"; movepanorama($direction,$('.pan'), $a); }); ... ... }); function movepanorama($direction, $e, $a){ if($direction=="right"){ $e.animate({marginleft:$a--}, 1, function(){ movepanorama($direction,$e, $a); }); } ....... }
my problem that, whenever click left or right button, start again on -500px margin-left move, unlike in virtual tour example should smooth flow of photo, stops continue.
what tried insert div wraps photo using .after function in jquery this.. wherein .start , .end class name of div surrounds image. thought control value of margin later on.
$(".start").after("<div class=\"pan\" style=\"margin-left:-500px\">"); $(".end").before("</div>");
this code didn't work, didn't wrap photo.
so, have idea or suggestion on how make left margin dynamic?
Comments
Post a Comment