2008年01月24日

ポップアップさせないサムネイル表示JS

Lightbox
最近いろんなサイトを見ると
サムネイル画像がポップアップJSを見かける
いろんな派生型が存在するみたいだが
一番初期型の簡易タイプのLightbox JS 1.0
を導入しようかと思う



 

 

・・・

そもそもこれはどうやってるのかというと
別ウィンドウで表示される画像のURLを、JSで強制的に変えてしまう
サムネイル画像をクリックすると、別ウィンドウで画像がリンクされる動作を
後半部分をオーバーレイで表示させる事で、別ウィンドウを出さずに
レイヤーを出して出現させる・・・言葉で説明すると面倒だな

サムネイル画像をクリックすると・・・

その上にレイヤーとして画像が表示
さらにこのバージョンアップ版(Lightbox JS 2.0)では、
アニメーションで画像のBOXが出現するものや、
派生系でオーバーレイの状態で画像をチェンジさせたり、いろいろなタイプがあるらしい

自分の場合は、無駄なアニメーションは要らないし
呼び出すのに余計なタグを入れるのは煩わしいしので
Lightbox JS 1.0)をちょっと弄った物で運用してみたいと思う

まずは、英語サイトだが、ここからLightbox JS 1.0 をダウンロードする

ダウンロードしたのは上記、5ファイル
lightbox.js
lightbox.css
overlay.png
loading.gif
close.gif

を、Blogに実際に適用させてみようと思うのだが
一般的にBlogの場合、サイトフォルダとアップロードフォルダが別の為
JSとCSSに、画像3ファイルの直パスにリライトする必要がある
今回、別のBlogだが、seesaaのBlogでやってみると


こんな感じでアップリストが作成された
他の画像と差別するのに「lightbox」というフォルダに全部まとめる事とする

#CSS
http://iya.up.seesaa.net/lightbox/lightbox.css
#Javascript
http://iya.up.seesaa.net/lightbox/lightbox.js
#IMAGE
http://iya.up.seesaa.net/lightbox/overlay.png
http://iya.up.seesaa.net/lightbox/loading.gif
http://iya.up.seesaa.net/lightbox/close.gif

各ファイルへの直バスはこのようになる
前後してしまったが、JSとCSSに、上記3画像の直パスに編集する

var loadingImage = 'loading.gif';
var closeButton = 'close.gif';


 ↓ lightbox.jsの30行目にあるこれを直パスに変更する

var loadingImage = 'http://iya.up.seesaa.net/lightbox/loading.gif';
var closeButton = 'http://iya.up.seesaa.net/lightbox/close.gif';

さらに、CSSにもひとつ画像の直パスを変更

* html #overlay{
  background-color: #333;
  background-color: transparent;
  background-image: url(blank.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

  ↓ lightbox.css の24行目のこれを直パスにする

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://iya.up.seesaa.net/lightbox/overlay.png", sizingMethod="scale");

これでアップロードは完了で
最後に、HTML上からリンクさせるだけ

デザインHTMLから、上記反転してる2行を追加して最適化で完了

<link rel="stylesheet" href="http://iya.up.seesaa.net/lightbox/lightbox.css" type="text/css" />
<script src="
http://iya.up.seesaa.net/lightbox/lightbox.js" type="text/javascript"></script>

なお、このままでは、サムネイルの画像に「rel="lightbox"」を
追加しなければならないのでちょっとJSを弄る

if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){

   ↓ JSの293行目のこの一行を変更する

if (anchor.getAttribute("href") && anchor.getAttribute("href").match(/jpg$|gif$|png$/)){

これを追加することによって、対象を手動で設定ではなく
強制的にJSで、jpg、gif、png のhrefをすべて対象にできます。
この仕様ならば、過去の記事のサムネイルをすべて弄る必要が無くなる
問題点は、適用したくないものもオーバーレイされてしまうが
その場合は、CSSで特定のエリアのみに適用させればよい
(例:記事エリアのみならclass="text"、コンテンツエリアならば、id="content")

if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");


  ↓ JSの286行目のエレメント指定を下記に変更

if (!document.getElementsByTagName){ return; }
var anchors = document.getElementById('content').getElementsByTagName('a');

これで、<div id="content">エリアのアンカーのみ適用される

ちなみに、このJSは、現行全PCブラウザで対応する
自分で動作チェックとして、IE7、FireFox2.0、Opera9.24で問題なし
ただ、読み込みが間に合わないと、そのままポップアップで画像表示される
また、JS無効化すると、単純に無視されるだけで、同じくポップアップになる
特別大きな問題はなさそうです。

実際にこれを適用したのはこのBlog
 → 旅路通信 

 

Lightbox_custam
ちょっとカスタムとして
ボタンや背景のオーバーレイ
をカスタムしたバージョン



 



 


これらのカスタマイズやレビューは多く見つかるが
特に参考になるサイトとして、いくつかピックアップ

小粋空間: Litebox 1.0 をブログに適用する
小粋空間: Litebox 1.0 の rel 属性を自動付与する
マキノハラENJOYブログ(*´▽)_旦~~ 「Lightbox v2.03.3」is cool!!
路上の風景〜landscapes on the road Lightbox JS〜ポップアップさせずにサムネイル画像を表示

stickmanlabs LightWindow v2.0



トラックバックURL

この記事へのコメント

1. Posted by 茶ーリー夫人   2008年01月26日 16:09
初めまして〜
TBありがとうございました
私はちょっとだけWebデザイナーをやってましたがはっきりいって素人と変わらないレベルです
またお役に立てる記事が書けるといいなぁ〜saiさんの記事の方が参考になりますね〜(* ̄ー ̄)>
2. Posted by yanz   2008年01月26日 17:30
はじめまして.こちらで紹介いただいたようでありがとうございます.

lightboxは初期バージョンのまま放ってあります(笑)2.0やそのほかの諸々のクローンが出ていることは知っているのですが,あんまり変わり映えしないというか,余分な機能が付加されてて使いづらいように感じて手を出していません.基本的に,単写真を拡大することしかしないのでlightbox1.0で満足しています.

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔