necoのひとりごと Lightbox2.04改良 (Next Prev 表示)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Lightbox2.04改良 (Next Prev 表示)

複数のサムネイル画像をLightBoxで表示した時に、拡大画像の上にカーソルを持ってくると、Nextまたは Prevが表示されます。
しかしこれは、カーソルを持ってこないと表示されないため拡大画像のまま別な画像を表示できるとわからない人も結構いるようです。
そこで、Next・Prev表示を常に表示させたいと思う人も多いかと思います。
この方法については、ウェブ上で多くの人が説明しています。
しかし、だたNext・Prevを常に表示するようにすると、せっかくの拡大画像上にこのNext・Prevイメージ表示されてしまうので拡大している画像が台無しになってしまいます。

そこで今回は、このNext・Prev表示を、拡大画像の外に常に表示させる方法について説明します。

lightbox.css ファイルを修正します。

16行目あたりにある、
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
をコメントアウトにするか、削除します。
これだけ、Next・Prevイメージが常に表示されるようになります。

しかしこれではNext・Prevイメージが拡大画像の上に表示されてしまいます。
そこで、次に14行目あたりの
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
を修正します。

具体的には、floatでは拡大画像の外にイメージを表示できないので、これをpositionにします。

例えば

#prevLink { position: absolute; top: 0%; left: -120px; background: url(images/prevlabel.gif) left 50% no-repeat;}
#nextLink { position: absolute; top: 0%; right: -120px; background: url(images/nextlabel.gif) right 50% no-repeat;}

このように記述すれば、Next・Prevイメージが拡大画像の外に常に表示されるようになります。ポジションの位置は必要に応じて変えてください。


次回は、lightboxに印刷ボタンをつけて、印刷できるようにする方法について説明します。

なお、3回にわたって説明したlightbox2.04の改良についてすべてを適用した例を以下に示します。
http://nyankonchi.web.fc2.com/mycats-gallery/mycats2009_7-12/index.html

どなたかの参考になれば幸いです。

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

コメント

非公開コメント

承認待ちコメント

このコメントは管理者の承認待ちです
カレンダー
03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
プロフィール

webneco

Author:webneco
日々ニャンズ達の妨害と戦いながら、Webデザインを制作しています。

necoのリンク
ニャンコんち

うちの子日誌

猫ママの絵日記
カテゴリ
月別アーカイブ
Feed Me!
necoのひとりごとのRSSフィード
検索フォーム
最新記事
最新コメント
リンク
QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。