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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -