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

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

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

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

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

sponsors

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

記事作成:
記事URL:

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