[jQuery]photoswipeの画像サイズ指定をjsで処理する

ちょっとした思いつき。

便利だけど不便

photoswipeはリンク元の<a>の属性に画像の表示サイズ(data-size)を記載しておく必要がある。
ECの商品画像とかで使うなら規格を統一すれば済むんだけど、サイズがまちまちな画像群のギャラリーとして使いたい場合、一々サイズを確認するのも面倒くさい。

<a href="【画像】" data-size="800x800"><img src="【画像】" alt="画像"></a>

書かないと動かないってんで、jsで追記してみたらそれで動いた。

js(jQuery)で属性追加

htmlの組み方によって色々なんだけど、例えばこうやって組んだとする。

<ul>
    <li><a href="【画像】"><img src="【画像】" alt="画像"></a></li>
    <li><a href="【画像】"><img src="【画像】" alt="画像"></a></li>
    <li><a href="【画像】"><img src="【画像】" alt="画像"></a></li>
    <li><a href="【画像】"><img src="【画像】" alt="画像"></a></li>
</ul>

画像サイズを取得して、<a>に属性を書き込む。

$(window).one('load',function(){
    $('ul').find('img').each(function(){
        img = new Image();
        img.src = $(this).attr('src');
        imgW = img.width;
        imgH = img.height;
        $(this).parent('a').attr('data-size',imgW+'x'+imgH);
    });
});

.children(‘li’)で回すよりも.find()で直接<img>を拾いにいったほうが多階層でもそのまま使えて便利。

原寸大の画像サイズを取得しないと意味がないので、この場合は.width()とか.height()は使えない。これらは表示サイズだからね。naturalWidth、naturalHeightもブラウザ縛りがあるから回避しつつやっていくのが安全。

[JavaScript] 画像のオリジナル サイズを取得する 最もシンプルな方法 - こじょらぼ

で、先日書いた記事に倣って書く必要がある。

$(function(){

これで書き始めると画像を読む前に画像サイズの取得が始まって0になっちゃう場合がある。注意。

コメント

タイトルとURLをコピーしました