1

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

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

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

ソース

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

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

□□□
□□□

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

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 +')'});
             }; 
         };

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

1
  • 1
    画像たちが含まれている親要素ごと拡大するのはどうですか? あるいはtransformではなくwidthなどのスタイルで大きさを変更すれば、レイアウトをブラウザに任せられます。
    – mjy
    2016年10月19日 5:33

1 件の回答 1

1

mjyさんに教えて頂いた方法で拡大・縮小することが出来ました、ありがとうございます。

理由がよく分からないのですが、親要素を指定して一括で変更しようとすると
画像(□)が

□□□
□□□    
↓     






のようにサイズが変更されずに縦に1列繋がったような状態になってしまいました。
色々サイズを変更してみましたが縦に1列並んでしまいます。
そこで子要素を1つずつ指定してwidthで変更する方法を試したところ行いたい動きになりました。

for(var i = 0; i < imgLen; i++){ 
    var str = '0000' + i;
    str = str.substring(str.length - 4, str.length);
    target = 'img' + str;

    var imgTest = document.getElementById(target);
    imgTest.style.width="71px";
    imgTest.style.height="71px";    
};

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。