skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像をクールに表示するjavascript「mooSlide」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ホームページなどでは画像を表示させる際に「LightBox」やその派生品を使用するケースが増えてきています。
artViperのmooSlideも派生品の一つですが、表示の仕方がよりクールです。

使用方法
mooSlideからmooSlideX.jsをダウンロードします。
また名前にmooが付いているようにmootools.jsが必要になります。
mootools.jsはhead内に、mooSlideX.jsは対象となるリンクの下に置いてください。
リンク方法：aタグのrel要素にdesignSlideを記入。titleに表示したい内容を書き込んでください。
　例１）<a href="画像URI" rel="designSlide" title=" 内容">タイトル</a>

リンク先を内容の中に挿入したい場合はaタグにrev要素としてmycontentをaタグ内にリンク先を例２の様に書きます。
　例２）<a href="画像URI" rel="designSlide" rev="mycontent" title=" 内容">タイトル<div id="mycontent"><a href="リンク先URI">タイトル</a></div></a>

注意１：当サイトのスクリプトは本家スクリプトとは違いウィンドウの頭に表示される様にしています。
注意２：mooSlideX.jsで「close」「loading」各画像をご自身のサイトに合わせて変更して下さい。
注意３：mootoolsのバージョンなどが本家サイトには示されていないうえ、既存のmootoolsでは使用できませんでした。
　　　　上記のmootools.jsからダウンロードしてください。
注意４：titleに表記した内容は最初と最後の文字が表示されないようです。半角のスペースなどを入れてください。
画像をクールに表示するjavascript「mooSlide」サンプル

記事作成：2007年08月03日

前の記事：動きのあるメニューを作成するjavascript「SlidingMenu」
次の記事：グラフとイベントを併記できる沿革作成javascriptAPI「Timeplot」