e-まがMooTools :: http://e-maga.com ウェブデザイン実装チュートリアル Mon, 18 Jan 2010 05:57:18 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 動画もインラインフレームもポップアップ！Sexy Lightbox 2 http://e-maga.com/javascript/sexy-lightbox-2/ http://e-maga.com/javascript/sexy-lightbox-2/#comments Wed, 05 Aug 2009 03:37:13 +0000 Daisuke http://e-maga.com/?p=397 コンテンツをポップアップするLightboxタイプのスクリプトなのですが、画像も動画もウェブサイトもログインフォームもなんでもかんでもポップアップするうえに、グループナンバーを割り振ることによってそれぞれをグループ化することが可能。

jQueryとMooToolsの両Ajaxライブラリに対応していますので、他のJavaScriptとの相性に合わせて選ぶこともできます。

画像をポップアップ

動画をポップアップ

インラインフレームでウェブサイトをポップアップ

ダウンロード

主にjQuery版についての説明となりますが、MooTools版も実装方法も同様です。

リンク先のDownloadで「sexy-lightbox-2.2.zip」をクリック。
ダウンロード後、解凍。jQuery版とmootools版が同梱されていますので、どちらを使用するか決めたら使用する方のフォルダを「sexy-lightbox」とリネームしてください。

Sexy Lightbox 2 – Coders.me

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、先程リネームしたsexy-lightboxフォルダに入れてください。

MooToolsの場合も同様です。
MooToolsダウンロード
※mootools-1.2.3-core-nc.jsはjsファイルではなくtxtファイルとして認識される場合があります。mootools-1.2.3-core-nc.js.txtになっていると動作しませんのでテキストエディタ等で一旦開き、「名前を付けて保存する」で.txt無しのファイル名にリネームしてください。

必ずやっておくこと

最大のポイントです。sexylightbox.v2.2.jquery.jsの29行目（MooTools版は23行目）に記述されている「imagesdir : ‘sexyimages‘,」の青字部分をフルパスに書き直すこと。
パーツ画像の在処を示すプロパティなので’http://アップロードしたURL/sexyimages‘とURLを追加記入しておかないと背景画像が正しく表示されません。

ちなみに、sexylightbox.v2.2.jquery.jsの27行目（MooTools版は21行目）の’black‘を’white‘に書き換えると背景パーツが「白」になります。お好みに応じて変更してください。

実装手順

サーバーにsexy-lightboxフォルダをアップロード。
<head>～</head>の間に以下を記述。

jQuery使用時

<link rel="stylesheet" href="http://サイトURL/sexy-lightbox/sexylightbox.css" type="text/css" />
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/sexylightbox.v2.2.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
SexyLightbox.initialize();
});
</script>

MooTools使用時

<link rel="stylesheet" href="http://サイトURL/sexy-lightbox/sexylightbox.css" type="text/css" />
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/mootools-1.2.3-core-nc.js"></script>
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/sexylightbox.v2.2.mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
SexyLightbox = new SexyLightBox();
});
</script>

使い方

基本的には、リンクに「rel=”sexylightbox”」と付け加えるだけ。
グループ分け（関連づけ）する場合は「rel=”sexylightbox[グループナンバー]“」とすると、同じナンバーのコンテンツを巡回できるようになります。
「title=”タイトル”」を加えると、タイトルを表示することもできます。

<a href="コンテンツURL" rel="sexylightbox[グループナンバー]" title="タイトル">リンク</a>

動画を表示する（inline）

動画をポップアップさせる場合、ページに貼り付けた動画を非表示にしておいてからSexy Lightboxで表示させることになります。

<div id="video" style="display:none;"></div>の中に動画を貼り付けすると非表示になります。id名は適当に付けてOKですが、リンクを設定する際は同じid名にする必要があります。
サイズの指定も忘れずに。

<div id="video" style="display:none;">
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/bNF_P281Uu4&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bNF_P281Uu4&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</div>
<a href="#TB_inline?height=385&width=480&background=#000&inlineId=video" rel="sexylightbox" title="タイトル">リンク</a>

ウェブサイトをインラインフレームで表示する（iframe）

サイトURLと表示サイズを指定して以下のように記述します。

<a href="http://www.google.co.jp/?TB_iframe=true&height=500&width=900" rel="sexylightbox" title="Google" >Google</a>

以上です。
それでは、がんばってください。

via（Dream CSS）

]]> http://e-maga.com/javascript/sexy-lightbox-2/feed/ 0 縦も横もOKのアコーディオンメニューBySlideMenu http://e-maga.com/javascript/byslidemenu/ http://e-maga.com/javascript/byslidemenu/#comments Tue, 28 Jul 2009 15:02:43 +0000 Daisuke http://e-maga.com/?p=102 BySlideMenuは、サイドバーのメニューなんかにも活用可能な「縦型」のアコーディオンメニューを実装出来るスクリプト。

もちろんimage menuのような横開きのスタイルも用意されています。
動きのある縦型のメニューが欲しかった！そんな人に超オススメ。

このサンプルではBLOCK-01（1番上の画像）を最初からオープンさせるためにbyslidemenu.jsのoptions:でdefaultIndex: 1に設定してありますが、デフォルトではdefaultIndex: falseとなっていますので全てのブロックが等間隔で表示されます。
その他の指定も全てbyslidemenu.jsのoptions:で行います。
　
ちなみにimagemenuがCSSによる画像置き換え（text-indent: -9999px;ってやつ）を採用しているのに対し、このBySlideMenuは画像そのものを重ねて表示するスクリプトです。
お好みに応じて使い分けても良いと思います。

ダウンロード

BySlideMenu – ByScripts

Ajaxライブラリmootools-core.jsを別途用意する必要があります。
mootoolsダウンロード
※mootools-1.2.3-core-nc.jsはjsファイルではなくtxtファイルとして認識される場合があります。mootools-1.2.3-core-nc.js.txtになっていると動作しませんのでテキストエディタ等で一旦開き、「名前を付けて保存する」で.txt無しのファイル名にリネームしてください。

実装手順

mootools-core.jsとbyslidemenu.js、それと画像をサーバーにアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。
※横型メニューの場合は赤字部分を削除

<script type="text/javascript" src="http://アップロードしたURL/mootools-core.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/byslidemenu.js"></script>
<script type="text/javascript">
window.onload = function(){
new BySlideMenu('verticalmenu', {vertical: true});
}
</script>

BySlideMenuを表示させる場所に以下を記入。
※横型メニューの場合は赤字部分をbyslidemenuに変更

<ul id="verticalmenu">
 <li><a href="ページ1"><img src="画像1" /></a></li>
 <li><a href="ページ2"><img src="画像2" /></a></li>
 <li><a href="ページ3"><img src="画像3" /></a></li>
 <li><a href="ページ4"><img src="画像4" /></a></li>
 <li><a href="ページ5"><img src="画像5" /></a></li>
</ul>

BySlideMenuはバリエーションが豊富なのでいろいろと楽しめるのではないでしょうか。
では、がんばってください。

]]> http://e-maga.com/javascript/byslidemenu/feed/ 0 画像さくさくアコーディオンメニューimage menu http://e-maga.com/javascript/image-menu/ http://e-maga.com/javascript/image-menu/#comments Mon, 27 Jul 2009 15:22:54 +0000 Daisuke http://e-maga.com/?p=67 アコーディオンメニューの中で最も好きなスクリプトです。
ハイテク系の企業サイトなんかにはとても似合うかも知れません。

使用するAjaxライブラリはMooTools。
ダウンロードファイルにあらかじめ同梱されています。

サイズは総幅560px/高さ200px・5ブロックで作成、用意した画像は幅310px/高さ200px

ダウンロードと修正

image menu – phatfusion

ダウンロードした「imagemenu/imagemenu/imageMenu.css」を、使用環境に合わせて修正する必要があります。
修正するのは#imageMenuで指定されている総幅と高さ、#imageMenu ul li aで指定されている各ブロックの幅（（総幅－8px）÷ブロック数）と高さ、#imageMenu ul liの各クラス指定の画像URL。

デフォルトでは総幅500px/高さ200px・各ブロック幅98px/高さ200pxとなっています。その部分を、導入するウェブサイトの条件に合わせて修正します。
あとは#imageMenu ul li.クラス名を独自のものに変更（今回は#imageMenu ul li.m01～m05に設定）し、それぞれのbackgroundで指定されている画像URLを自身で用意した画像のURLに書き換え。

ulにmargin: 0; padding: 0;を指定する必要がありますので、今回はul.imgmenuというクラスを設定して下記のようにCSSファイルに追加記入しました。

ul.imgmenu {margin: 0; padding: 0;}

実装手順

修正を全て終え、用意した画像をimagemenu/imagemenu/imagesフォルダに入れたら、サーバーにimagemenuフォルダ全てをアップロード。

URLを間違えないように気を付けながら<head>～</head>に以下を記述。

<link rel="stylesheet" href="http://アップロードしたURL/imageMenu.css" type="text/css" />
<script type="text/javascript" src="http://アップロードしたURL/mootools.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/imageMenu.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var myMenu = new ImageMenu($$('#imageMenu a'),{
	openWidth:310 //オープン時の画像幅
	});
});
</script>

image menuを表示させる場所に以下を記入。

<div id="imageMenu">
 <ul class="imgmenu">
  <li class="m01"><a href="ページ01のURL">ページ01</a></li>
  <li class="m02"><a href="ページ02のURL">ページ02</a></li>
  <li class="m03"><a href="ページ03のURL">ページ03</a></li>
  <li class="m04"><a href="ページ04のURL">ページ04</a></li>
  <li class="m05"><a href="ページ05のURL">ページ05</a></li>
 </ul>
</div>

以上です。
それでは、がんばってください。

ややこしいスクリプトなので説明するのがかなりめんどくさかった・・・。

]]> http://e-maga.com/javascript/image-menu/feed/ 5 画像リンクを派手に演出するBumpbox http://e-maga.com/javascript/bumpbox/ http://e-maga.com/javascript/bumpbox/#comments Mon, 27 Jul 2009 06:52:17 +0000 Daisuke http://e-maga.com/?p=35 Lightboxみたいな感じなんだけど更にスピーディーで派手、それがBumpbox。
画像だけではなく、動画やFlash、PDFなどにも対応しています。

使用するAjaxライブラリはMooToolsなのですが、ダウンロードファイルにあらかじめ同梱されていますので別途用意する必要はありません。

海と少年
【Bumpbox】画像クリックで拡大表示します

ダウンロード

Bumpbox – artViper designstudio

ダウンロードしたbumpboxフォルダをまるごとサーバーにアップロードするだけなのですが、bumpbox.jsの86行目「closed.png」のURLを書き直さないと画像右上に「×」ボタンが表示されません。フルパス（http://～）に修正してあげる必要があります。

実装手順

<head>～</head>に以下を記述。

<script type="text/javascript" src="http://アップロードしたURL/bumpbox/mootools.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/bumpbox/bumpbox.js"></script>

画像のリンク先に以下を追加。

<a href="画像URL" rel="800,532" class="bumpbox" title="表示画像のタイトル">画像</a> //rel="元画像の横サイズ,縦サイズ"に修正

以上です。
がんばってください。

via（コリス）

]]> http://e-maga.com/javascript/bumpbox/feed/ 0