タグ別アーカイブ: lightbox

lightboxをiframeと組み合わせて使う

lightboxという、Ajaxを利用して画像を表示するライブラリがあります。これを利用することにより、見た目がとてもかっこよく画像が表示されるようになります。使い方も簡単で、HTMLのヘッダ部分でjavascriptのライブラリとcssを読み込むように指定して、Aタグのrel属性にlightboxの文字を記述するだけで利用できます。

この前仕事でlightboxを使って、インラインフレーム内でサムネイル画像の一覧を表示させて、サムネイル画像をクリックすると、lightboxを使って画面全体に画像を展開するという処理を作成することになったのですが、通常の指定方法では、インラインフレーム内で画像が展開されてしまいました。ネットで検索したところ、Q&Aサイトにフレームの外で表示させるには、target属性で指定してやればよいと書かれ、質問者もそれで解決した、と書かれていたのですが、うまく行きませんでした。また、ほかの情報も探してみたのですが、ある人は不可能と言い切っていたり、またある人は直接メソッドを呼び出してやれば可能だと言っているのですが、いざやってみようとするとバージョンの違いでメソッドが変わっていてできなかったりということがあったので、私が解決した方法を書いておきたいと思います。

以下の方法はlightboxのバージョンが2.04の場合になります。

iframeタグ内でサムネイル画像を表示させ、サムネイル画像をクリックした際に画面全体に表示できるようにするために、iframeタグの外に画面上には表示されないAタグのリンクを作成します。HTMLのヘッダ部分でjavascriptのライブラリとcssを読み込む指定が済んでいることを前提にします。


<a href="画像Aのパス" name="photo_a" rel=”lightbox”></a>
<a href="画像Bのパス" name="photo_b" rel=”lightbox”></a>

Aタグの間には何も記述しないようにします。インラインフレーム内のサムネイル画像に付けられたAタグからは、javascriptで上記のAタグをクリックするように記述します。


<iframe>
<a href="javascript:document.parents.photo_a.click();" ><img src="画像Aのサムネイル"></a>
<a href="javascript:document.parents.photo_b.click();" ><img src="画像Bのサムネイル"></a>
</iframe>

とりあえずこの方法で解決することができました。