※この記事は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始めようって、本気で思いました・・・。
公開しずらいのなんの。
まぁとにかく、どんどん使っていただければ幸いです。
コメントする