Category: java

1月 22

shadowboxの設置

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=横幅”でサイズを指定します。

0
comments

11月 10

lightboxのキャプションにリンクを設定する

lightboxを使用している画像内に外部リンクを貼りたいという要望があり、
調べたところ、画像にではなくキャプションにリンクを貼ることができる
ということがわかったのでその方法をとってみることにしました。

画像のtitle要素にリンクを埋め込む方法です。

title=”キャプション [ <a href='リンク先URL' target='_blank'>リンク名</a> ] ”

上記コードのうち、
[ < ] を [ &lt; ]
[ > ] を [ &gt; ]
[ ’ ] を [ &quot; ]
にHTMLエンコードします。

title=”キャプション [ &lt;a href=&quot;リンク先URL&quot; target=&quot;_blank&quot;&gt;リンク名&lt;/a&gt; ] ”

lightboxは一時IE9での表示がされずに懸念されましたが、
この記事をかいている現在IE9でも表示されるようになりました。

ただしこれから作成するサイトに関しては、
HTMLも埋め込み可能な、shadowbox、floatbox、などの方が重宝しそうです。

0
comments