jQuery プラグイン、Lightbox風モーダルウィンドウ Ver2

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

jQuery プラグイン、Lightbox風モーダルウィンドウ Ver2

みやびプリン 500 316

144 144

※この記事は8年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

親父が久々に家に来ました。

ちょいと、両親と叔母さんと一緒に札幌で用事があったそうな。
おかんと叔母さんはリッチなビジネスホテルに行ってるらしい。
経費削減と、叔母さんを一人にするわけにはいかないのはわかるけど、
男の待遇なんてこんなもんなのか、と悲しくなる。
そして、部屋が汚いので大変申し訳ない 泣

さて、いつも通りの長い余談はここまでにしといて、
会社でまたプラグイン作りました。
以前もおんなじの作ったけど、決定的な欠陥がありまして、それを改善したバージョンです。

改善欠陥は下記
・スマホで表示がまともにできなかった。
・インラインモード時に、元のブロックにつけてたイベントが軒並み消える
・iframeモードで、自動でのサイズ取得

スマホで使えなかったら、使えんよね、ほんと。
イベントが消えるのは、会社の案件で自分で使ってみて要望があったというね。
革命的なのは、iframeの自動サイズ取得
これはでかい。
(ただし、同サーバーのみ汗)

まずはスクリプト

jQuery Simple Modal Window View Ver.2.2

使い方は下記。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src=" 本エントリーのJSを格納した場所 /jquery.smwv.2.2.min.js">
<script>
$(function(){

 //フリック表示させたいブロックのセレクタに、simpleModalWindowViewを適用
$('.testLink001').simpleModalWindowView({
 groupe: 'aGroupe'
});

$('.testLink002').simpleModalWindowView();

});
</script>
</head>
<body>
<p>
  <a href="images/test01.jpg" class="testLink001">グループ画像001</a>
  <a href="images/test02.jpg" class="testLink001">グループ画像002</a>
  <a href="images/test03.jpg" class="testLink001">グループ画像003</a>
  <a href="images/test04.jpg" class="testLink002">単体画像001</a>
  <a href="images/test05.jpg" class="testLink002">単体画像001</a>
</p>
</body>

みんなが大好きcolorboxとほぼ同じ使い方です。

特徴としては
・スマホ対応
・インライン、iframe表示可
・iframeの自動サイズ取得可(同サーバーに限る)
・iframeを使えば、動画の埋め込みも可
・グループ表示可

ってとこやな。
シンプルな構造なので、CSS後付けが簡単にできるようになってます。

オプションは下記

オプション名 説明 値の形式 初期値
viewMode 表示するコンテンツを指定する img / inline / iframe文字列 img
speedOpen ウィンドウを開く時のスピード 数値 700
speedClose ウィンドウを閉じる時のスピード 数値 700
speedMove ウィンドウのサイズを変更した時の、コンテンツの動くスピード 数値 500
closeBtn 閉じるボタンの中身 テキスト、タグ
(imgも可能)
-
groupe グループ表示する際のグループ名 文字列 null
groupeNext グループ表示時の次へボタンの中身 テキスト、タグ
(imgも可能)
-
groupePrev グループ表示時の前へボタンの中身 テキスト、タグ
(imgも可能)
-
shiftTime グループの次の表示をするまでの時間 数値 200
nombersView グループ表示時、番号表記をするかどうか true / false
(真偽値)
true
groupeText グループ番号表記のタイトル 文字列 images
groupeTextCenter グループ番号表記の真ん中の文字 文字列 of
shadowUsed ウィンドウに影をつけるかどうか true / false
(真偽値)
true
shadowSize 影のぼかしの大きさ 数値(px指定) 10
shadowSpread 影の範囲 数値(px指定) 2
shadowOpacity 影の透明度 数値(0〜1) 0.2
backColor 背景のオーバーレイの色 文字列
(カラーコード)
000000
backOpacity 背景のオーバーレイの透明度 数値(0〜1) 0.5
boxWidth 表示させるコンテンツの横幅 数値
(PC:px、スマホ:横幅に対しての%)
auto
boxHeight 表示させるコンテンツの縦幅 数値
(PC:px、スマホ:横幅に対しての%)
auto
boxColor 表示コンテンツの背景 文字列
(カラーコード)
FFFFFF
boxColorOpacity 表示コンテンツの背景の透明度 数値(0〜1) 1
wrapperPaddingSide 表示コンテンツの内側の横の隙間 数値
(PC:px、スマホ:%)
50
wrapperPaddingRow 表示コンテンツの内側の縦の隙間 数値
(PC:px、スマホ:%)
50
wrapperPaddingAll 表示コンテンツの内側の隙間、一括指定 配列 / 文字列
(PC:px、スマホ:%
例:文字列)15px 20px 30px
例:配列)[15, 20, 30])
null
radiusUsed 角丸にするかどうか true / false
(真偽値)
false
radiusSize 角丸の大きさ 数値(px指定) 10
imageShadow 画像の時、画像に影をつけるかどうか true / false
(真偽値)
false
imageShadowSize 画像の影のぼかしの大きさ 数値(px指定) 10
imageShadowSpread 画像の影の範囲 数値(px指定) 2
imageShadowOpacity 画像の影の透明度 数値(0〜1) 0.2

前回記事でも書きましたが、
完全に、IE8以下はサポート外になってるので、ご了承ください・・・。

ちゅうても、IE8以下はやっとお亡くなりになられたからね。
多分大丈夫。

あとは、ボタンのCSSとかは、下記に、よく変更するであろう、DOMを記載しておくので、
CSS割り当ての参考にしてください。

ブロック名 説明
#SModalContentsWrapper コンテンツのラッパー
#SModalContents コンテンツの直接の親要素
#SModalImageTitle コンテンツのタイトル
#SModalCloseBtn 閉じるボタン
#SModalControllers 次へ前へボタンや、番号表記全体
#SModalBtns 次へ前へボタン
#SModalBtnNext 次へボタン
#SModalBtnPrev 前へボタン
#SModalNumbers 番号表記
#SModalNumberNow 番号表記、現在の番号
#SModalNumberAll 番号表記、要素数

しかし、元をすでに作ってたものなので、
けっこう早くできるかなと思ったら、
意外に一週間くらいかかった・・・。
もちろん他の案件もやりながらで、こだわって作ってからだけど、ちょいと時間かけすぎた。

そして、本当に、GitHub始めようって、本気で思いました・・・。
公開しずらいのなんの。

まぁとにかく、どんどん使っていただければ幸いです。

トラックバック(0)

トラックバックURL:

コメントする

ページトップへ戻る