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