[Sam L]

<section id="boxes"> 
    <div class="two-up">
        <div class="wrapper">	
	    <figure>
                <img src="./img/bt_desktop.png">
                <img src="./img/desktop.jpg">
   	     </figure>
             <p>1Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
											
     <div class="wrapper">
           <figure> 
		<img src="./img/bt_tablet.png">
         	<img src="./img/tablet.jpg">
           </figure>
           <p>2Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
     </div>
										
     <div class="wrapper">
     	  <figure>
              <img src="./img/bt_smartphone.png">
              <img src="./img/smart.jpg">
          </figure>
          <p>3Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
     </div> 
</div>
</section>

Figure повторяется три раза, при клике, например, на первую из figure нужно изменить на src="./img/bt_desktop_hi" для первого img.

Если меняю figure на div (button 0), прописываю классы и скриптом меняю, то все работает:

$(document).ready(function() {
   $("#button0").click (function(){
        var a = $(this);
        var div = a.parents("#container");
		if (!$(this).hasClass("active0")) {
			$(this).addClass("active0");
		}
	$("#button1").removeClass("active1");
	$("#button2").removeClass("active2");
    div.animate({height:'1024', width: '1280'});

	});

НО, ломается верстка - дивы не зумятся (с figure все ок), сайт сверстан так, что все элементы уменьшаются, при изменении размера окна браузера.

Подскажите, плиз, решение для img src и figure!