modal modoki

Lightbox系jQueryプラグイン「modal modoki」を公開・配布しています。
いろいろなサイトで良く見かける「クリックすると拡大画像が浮かび上がるアレ」っぽいモノです。

商用・非商用を問わず、無料でご利用いただけます。

動作確認済みのブラウザは次の通り
Google Chrome 19 / Firefox 13 / Internet Explorer 9

こんな方にオススメです

サンプル

samplepicture1 samplepicture2 samplepicture3 samplepicture4

画像をクリックすると動作をご確認いただけます

ダウンロード

2012.06.28
mmdk20120628.zip
モーダルウィンドウ表示時のちらつきを抑えました。
2012.06.24
mmdk20120624.zip
ダウンロードする

使い方

手順 (1) 解凍したフォルダ・ファイルを転送する

圧縮ファイルの中身は以下の通りです。
トップページ(index.html等)と同じディレクトリに、解凍したmodalmodokiフォルダを丸ごと転送してください。
パーミッション変更(755や666など)は不要です。

css,jsファイルはUnicode(UTF-8)で保存しています。実装するサイトに合わせて変更してください。

FTPツールで転送した場合、このような状態になればOKです。
実装例

手順 (2) css,jsファイルを参照させる

modammodokiを使いたいページの <head> ~ </head> 内に次の3行を追加します

手順 (3) aタグを編集する

次のサンプルを参考に、aタグを編集してください

class="mmdk"
aタグに記述します。必須です。
リンク先の画像がmodal化します。
rel="groupname"
aタグに記述します。必須ではありません。
同じ値の画像がグループ化され、拡大画像の下にサムネイルが表示されます。
title="タイトルや説明"
aタグに記述します。必須ではありません。
画像のタイトルや説明を掲載できます。

ライセンス

制作者

AKIHIKO NISHOIKA

AKIHIKO.NISHIOKA / Web Designer, ICT Consultant

Webサイト制作とパソコン出張サポートがメインのパソコンなんでも屋です。
地域活動的な活動にも首をつっこみがちなので、過酷な肉体労働以外は割となんでもやってます。
休日は趣味のギターや釣りなど。といっても、上手に弾けないし、滅多に釣れないですが。麻雀はすっかりご無沙汰かなあ。メンツが集まらないので、たまーにフリーに行く程度。趣味と生活を兼ねて料理研究もやってます。子どもが喜んでくれるのがうれしいですね。