スポンサーリンク

サムネイルを同じページで表示する方法

 サムネイル(縮小した画像)を別のページにリンクしたりせずに、同一ページで表示する方法を調べてみました。

 色々と調べてみると同一ページで画像を拡大表示する方法として「lightbox」というものに行き着きます。しかしAllAboutというサイトで「lightbox Plus」という「lightbox」を少しいじった?ものの使い方が詳しく紹介されていたためこちらを使用してみることに。

その手順は、

1、AllAboutから「lightbox Plus」のサイトにアクセスしてフォルダをダウンロード。
2、フォルダの中のうち「resouce」のみをフォルダごとアップ
*jojo.css sample.css lightbox_plus_min.js の3つはアップしなくてもOK
3、head要素内に
<link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv" />
<script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script>
と記述
4、<a href="(拡大画像)" rel="lightbox" title="説明文"> <img src="(小画像)"> </a>
と記述

これを実践してみるとこうなります。

 ただしこのままではレスポンシブルデザインの場合、スマホサイトで横幅が圧縮されて表示されてしまうためlightboxのCSSを少しいじる必要がありました。

具体的には

#lightbox img {
width: auto;
max-width : 800px
}

と追記します。
このmax-width : 800pxは表示したい画像よりかなり大きめに設定しないと画像が圧縮されてしまいました。ちなみ私のサイトでは大きな画像で500pxです。500pxの画像でも800pxくらいにしとかないと圧縮されてしまいました。

スポンサーリンク

  • スポンサーリンク

東海遊び場.com

遊び場日記Top

旅行日記▽

ゴルフ日記▽

パソコン日記▽

買い物日記▽

DIY日記・金属編▽

DIY日記・木工編▽

DIY日記・塗装編▽

DIY日記・作品編▽

エトセトラ▽

管理人へのお問い合わせ

リンク集▽