-稀によくあるブログ

Ads by Google

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

--/--/-- --:-- | スポンサー広告 TOP

mootoolsでLightBoxを再現したプラグイン (QuickBox)

LightBox特有の、あの気持ち良いウィンドウの動作をきちんと再現できています。mootoolsのほかのプラグインとの組み合わせなどに、LightBoxを使用したい場合に覚えておくとよさそうです。

jQueryの人気に最近影の薄いmootoolsですが、jQueryにくらべてアニメーション系の動きが柔らかいプラグインが多いので、たまに使いたくなります。
mootoolsのプラグインは単体で複数の機能や、効果を持たせたものが多いですが、jQueryのように複数のプラグインを組み合わせることによって、よりよい効果を生み出せることも出来るので、こういったものも自分の引き出しに入れておくと、助かることがあると思います。

一点だけ少々残念なのがグループ分けで、このプラグインの場合、自分でグループ分けをすることが出来ないようです。
QuickBoxに関連付けられたものは、全て同じグループになるので、ここは少し注意です。

QuickBox - AndrewPlummer.com

こちらが配布元のサイトです。

QuickBox - MooToolsライトボックスクローン

こちらは情報元です。

サンプルソース

折りたたむ


/***CSS編集***/


/*////////////////////////////
//                          //
//        QuickBox          //
//                          //
////////////////////////////*/


#qbOverlay
{
display: none;
position: absolute;
z-index: 100;
left: 0;
top: 0;
background-color: #000;
cursor: pointer;
}

#qbBox
{
display: none;
position: absolute;
left: 50%;
z-index: 101;
background-color: #fff;
}

#qbStage
{
position: relative;
z-index: 103;
height: 100%;
}

#qbBottom
{
position: relative;
z-index: 102;
background-color: #fff;
height: 45px;
padding: 0 10px;
margin-bottom: -45px;
}

#qbClose
{
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url("./quickbox-close.gif") no-repeat center;
cursor: pointer;
}


#qbPrev, #qbNext
{
position: absolute;
z-index: 104;
width: 50%;
height: 100%;
outline: none;
display: block;
}

#qbNext
{
left: 50%;
}


#qbPrev:hover	{ background: transparent url("./quickbox-prev.gif") no-repeat 0% 15%;   }
#qbNext:hover	{ background: transparent url("./quickbox-next.gif") no-repeat 100% 15%; }



#qbBox .loading
{
background: #fff url("./quickbox-loading.gif") no-repeat center;
}

#qbCaption
{
color: #666;
font-size: 0.8em;
font-weight: bold;
}

#qbCounter
{
font-family: "Trebuchet MS";
color: #aaa;
font-size: 0.8em;
font-weight: bold;
}

/***CSS編集***/



/***html編集***/

使用するライブラリは以下のようなっています。
自分は良く分からなかったので、画像のようになっています。
(Core、More ←クリックで画像拡大)

Core: Core, Native, Class, Element, and FX Packages.
More: Asset Package.




<link rel="stylesheet" type="text/css" href="./quickbox.css" /> 

<script type="text/javascript" src="./MooToolsCore.js"> </script>  
<script type="text/javascript" src="./MooToolsMore.js"> </script>  
<script type="text/javascript" src="./QuickBox.js"> </script> 


<a href="画像大パス" rel="quickbox" title="test"> 画像なり、テキストなり</a>  

<a href="画像大パス" rel="quickbox" title="test"> 
<img src="./sample.jpg" border="0" alt="サンプルイメージ"/> 
</a> 

<!-- ・tittle、altいずれもキャプションになるが、tittleの方が優先される。
       サムネイルにaltで何か付ける場合は、tittleを使うなど使い分けられる。
     ・グループ登録、シングル登録は特に無いようで
       QuickBoxに関連付けされたものは 、全てグループ扱いになるようです。  --> 



/***通常こっち***/
<script type="text/javascript">   

new QuickBox(); 

</script>  


/***日本語表示したい場合はこっち***/
<script type="text/javascript"> 

new QuickBox({ counter: "{TOTAL}枚中の{NUM}枚目" });  

</script>
 
<!-- オプションもいくつかあるようなので、本家で確認して下さい。 --> 


/***html編集***/