連続で縦と横にいくつか繋がっている画像の拡大・縮小時に画像同士の間隔を同じにしたいのですがうまくいきません。

ピンチイン・ピンチアウトにて画像を拡大、縮小するプログラムは書けたのですが、拡大・縮小時に画像同士の間隔が離れたりくっつきすぎて重なってしまいます。間隔の問題を解消するために自分なりに試行錯誤して作成したのですが、画面がフリーズしてしまい困っています。

どなたかご助力頂けないでしょうか。よろしくお願い致します。

ソース

ピンチイン・ピンチアウトにて画像を拡大、縮小させようとしているソース部分です。
画像は横に３つ、縦に２列の計６つです。

画像(□)の置き方はこのようになっています

□□□
□□□

又、画像はひとつひとつ選択して動かそうとしています。

HTML部分

    <body>
         <ons-gesture-detector>
             <div id="imgAll">
                 <p>
                     <img src="img/test.png" class="img0000"/>        
                     <img src="img/test.png" class="img0001"/>        
                     <img src="img/test.png" class="img0002"/>        
                 </p>
                 <p>
                     <img src="img/test.png" class="img0003"/>        
                     <img src="img/test.png" class="img0004"/>        
                     <img src="img/test.png" class="img0005"/>        
                 </p>
             </div>
         </ons-gesture-detector>

     </body>

JavaScript部分です。

         var IMGROWNUM = 3; //imgの横の数(3なら横に3個連続で繋がります)

         //imgの数の取得
         var imgTest = document.getElementById("imgAll");
         var tags = imgTest.getElementsByTagName("img");
         var imgLen = tags.length;

         //ピンチイン・ピンチアウトを検知した後の、画像の位置を更新する処理
         for(var i = 0; i < imgLen; i++){ 
             var str = '0000' + i;
             str = str.substring(str.length - 4, str.length);
             target = $('.img' + str);
             if(i = 0){
                target.css({transform : 'translate(scale(' + scale + ',' + scale +')'});
             }else{
                target.css({transform : 'translate('+ (142 * (scale - 1) * (i % IMGROWNUM)) + 'px, '+ (142 * (scale - 1)* (Math.floor(i /
     IMGROWNUM))) + 'px) scale(' + scale + ',' + scale +')'});
             }; 
         };

大変申し訳ありませんが、何卒よろしくお願い致します。