ちょっとした思いつき。
v5版はこちら
便利だけど不便
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] 画像のオリジナル サイズを取得する 最もシンプルな方法 - こじょらぼ
cojocco.blog113.fc2.com
で、先日書いた記事に倣って書く必要がある。
$(function(){これで書き始めると画像を読む前に画像サイズの取得が始まって0になっちゃう場合がある。注意。
20221118追記：効かないんだけど
この記事を書いたときは何も問題なかったんだけど、機会があって組んでみたら不安定だった。
数値をちゃんと取得できなかった場合、0になる。そうすると表示がバグって操作できなくなってページを再読込しないといけない。動いたり動かなかったりで、読み込むたびにどっちになるか博打になる。記述位置のせいでもないっぽいんだけど、なんだろうこれ。
ということで、バッチリ組める人じゃなかったらやめておいた方がいい。
コメント