以前にも記事を書いた、スマホなどでいい感じのフォトギャラリーができる「PhotoSwipe」。
これまでは単純に写真を見せるだけの使い方をしていたのですが、
その写真に対してリンクをつけてECサイトに飛ばしたいという要望がありました。
PhotoSwipeでは写真をクリックすると、上下のメニューが表示されるので、
キャプションのところにリンクURLを載せたらいいかと安易に考えたものの、
HTMLタグもすべてテキストで表示されてしまうんですね。
うーん、困りました。。
オプションとしてそういう機能がないか、公式サイトをじっくり見てみたのですが、
どうもそういうものは見当たらずで、スクリプト（code.photoswipe.jquery-3.0.5.js）の中身を見ていくと、
キャプションのテキストを表示している箇所が下記のようになっていました。
appendText の中
$(parentEl).text(text);
「text」というのはHTMLタグをエスケープして表示するとのこと。
参考サイト ＞ http://semooh.jp/jquery/api/attributes/text/val/
「html」を使えば、きちんとHTMLとして解釈してくれます。
$(parentEl).html(text);
参考サイト ＞ http://semooh.jp/jquery/api/attributes/html/val/
text(val)とhtml(val)の違いについての参考サイト
http://www.koikikukan.com/archives/2012/09/05-015555.php
↧
[jQuery] PhotoSwipeのキャプションにリンクURLを入れる
↧