Lightboxのキャプションにリンクを設定(→ lightboxのキャプションにリンクを設定する )してみたところ、
リンク付きのキャプションがいちいちブラウザにキャッシュされてしまい、
次の画像を開いたときにも同じキャプションが残ってしまう。
これを解決すべく試行錯誤するのも面倒くさいので、
lightboxをやめて、shadowboxを設置することにしました。
shadowboxならば画像だけでなく、動画、html、pdfもLightbox風に表示できるうえ、
IEでも問題なく使えます。
(※ローカル環境ではIEでプレビューしてもshadowboxが効かないので注意。)
▼まずはダウンロード
>> shadowbox.js ダウンロードページ
上記shadowboxダウンロードページ「Download」ボタンをクリック。
次のページで、ダウンロードするjsのタイプを設定してダウンロードを実行します。
▼ファイルの設置
ダウンロードしたファイルを任意の場所へ設置します。
私の場合、
shadowbox.js → jsフォルダ内
shadowbox.css → cssフォルダ内
shadowboxイメージフォルダ → imagesフォルダ内
に設置しましたので、shadowbox.cssのファイルを開き、imageurlをすべてurl(../images/shadowbox/xxx.png)に変更します。
▼HTML
<head>内に、
<link rel=”stylesheet” type=”text/css” href=”css/shadowbox.css”>
<script type=”text/javascript” src=”js/script.js”></script>
<script type=”text/javascript” src=”js/shadowbox.js” charset=”utf-8″></script>
<script type=”text/javascript”>
Shadowbox.init({
language: ‘ja’,
players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});
</script>
を記述。
ポップアップさせたい部分に(下記はimageファイルの場合)、
<a href=”images/xxx.jpg” rel=”shadowbox” title=”xxx”>
と aタグ内にrel=”shadowbox” と書くだけ。
このtitle=”xxx” のxxx部分に入れた文字がポップアップ時左上タイトルになります。
▼表示サイズを設定したい場合
ポップアップ表示のサイズを設定します。
<a href=”xxx.html” rel=”shadowbox;height=640;width=480″ title=”xxx”>
のようにrel=”shadowbox;height=縦幅;width=横幅”でサイズを指定します。