スポンサーサイト

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


--/--/--(--)/--:--:--:コメント(-)|トラックバック(-)

jQueryでlightboxのようなものを作る(9/26追記)

jQueryでcolorboxというライブラリがありまして、
それっぽいものを作ろうとした道中のモノですが、
そんなものを書いてみたりします。

ちょっとしたスクリプトと、スタイルシートを書いて、
class名を付け足すだけなので簡単だと思います。

jQueryはもちろん必須です。

デモもおいておきます。

9/26…画像だけでなく通常リンクもできるようにしてみた。記事下部に付け足しました。



デモというより、作っていた時の奴をそのままですが。
デモ

正直html部分は適当です。
画像が違うだけでどちらとも同じです。

後無駄に改行が入っていますので見えなかったら上にスクロールしてください。


それは、
かなり前に似たものを作った時に画像がうまくスクロールについてこなかったので、
その時の名残のためです。

今回はついて行くように作ってありますので気にせずに。

あくまで例ですので、適当にアレンジするのもいいと思います。
まずは以下のスタイルシートを記述
#backgray{
top:0;
left:0;
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.7); //背景の色とその濃さ
display:none;
}
#outimage{
display:none;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
text-align:center;
}
#grayimage{
text-align:center;
position:relative;
display:none;
top:10%;  //画像の表示する高さ
}
#grayimage img{
border:solid #000 20px; //画像周りの太線調節
}
IE対策していないないです。
IE対策したい方はfilterなどを使えばいいかと思います。


そしてスクリプト部分
$(function(){
$("body").append("
  <div id='backgray'></div>
  <div id='outimage'><div id='grayimage'>nowloading</div></div>
");

$(".color").click(function(){
  $("#backgray").fadeIn(1000);
  $("#outimage").fadeIn(1100);
  $("#grayimage").fadeIn(500).html("<img src='"+$(this).attr("href")+"' />");
return false;
});

$("#outimage,#backgray").click(function(){
  $(this).fadeOut(1000);
  $("#backgray").fadeOut(1000);
});

});
こっちで改行調節しないと、変なところで改行入ってしまうので、適当に改行しています。

idの名前はスタイルシートに合わせて変更してくださいね。
fadeIn,fadeOut内の数字を調整で画像表示までの時間を変えれます。
(単位はミリ秒です)

で、実際に使うaタグにclass="color"を与えますが、
class名は上記のスクリプト部分の.colorのcolorの部分を変えれば変更できます。
(私の場合colorboxを使っていたのでcolorになっています。)

例えばこんな感じ
<a href="画像url" class="color">クリックで表示</a>
だいぶ雑な作りですが、適当に応用すればもっとましなものができると思います。

P.S
スクリプトでミス発見
#outimage→#outimage,#backgray
に修正。
試していないけどたぶんこれで正常に画像が消えるはず。

9/26追加部分。

このスクリプト付け足せば通常のリンクも同じような表示のさせ方できるものかと

$(".link").click(function(){
$("#backgray").fadeIn(1000);
$("#outimage").fadeIn(900);
$("#grayimage").fadeIn(500)
.html("<iframe src='"+$(this).attr("href")+"' width='"+screen.width*0.5+"' height='"+screen.height*0.6+"'>インラインフレームを使用しています</iframe>");
return false;
});

で、表示させたいリンクページを
<a href="表示させるページ" title="適当に" class="link">適当に</a>
上部のデモにこれを付け足したもの
デモ

2011/09/25(日)/20:16:32:コメント(0)|トラックバック(0)
コメントの際の注意。
・宣伝・同じ内容の連投は削除等の対象。
・質問等は、しっかり考えてから行ってください。
 聞けば何でも教えてくれるというのは間違いです。
・コメントの返信方法が確立していないので、返せない場合があります(´・ω・`)
・http://とhttps://が禁止ワードとなっています。
 コメント本文のURL入力は頭のhを抜くなり、なんなりしてください
name:

title:

Mail_address:

URL:

comment:

パスワード:

管理者にだけ表示を許可する
トラックバックURL

プロフィール

猫と馬

Author:猫と馬
相互リンク希望の方はこちらにコメしてください
閲覧推奨環境
現在不明

フリーエリア

blogram投票ボタン
fc2ブログランキング 人気ブログランキングへ

↑から買い物をしてくれると管理人が喜びます

カテゴリ

リンク

月別アーカイブ

リンク・記事の紹介(引用)について。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。