Lightbox

モーダルウィンドウをレスポンシブ対応に変更　「Boxer」 と 「Magnific Popup」

2015年4月20日

Categories | ホームページ

ホームページには必須と言っても過言ではないモーダルウィンドウ。

（Modal window）

その中でも代表的な「Lightbox」を当サイトでも長年利用してます。

 

0420 01 400x300 モーダルウィンドウをレスポンシブ対応に変更　「Boxer」 と 「Magnific Popup」

 

が、最近GoogleがレスポンシブWebデザインを推奨してきたので、

他のものに乗せ換えようと試みました。

 

 

で、試してみたのが　Lightboxプラグイン「Boxer」。

http://formstone.it/components/lightbox/

対応として、レスポンシブ・スワイプ・動画「youtube等」と申し分ないが、

実装してみると、動画が表示が中々うまくいきません。

色々とオプション設定も試みましたが、諦めました。

因みにＰＣで動画（youtube）をモーダル表示するとこんな感じです。

 

0420 02 364x400 モーダルウィンドウをレスポンシブ対応に変更　「Boxer」 と 「Magnific Popup」

 

スマホだとこんな感じ。（width:360px）

 

0420 03 240x400 モーダルウィンドウをレスポンシブ対応に変更　「Boxer」 と 「Magnific Popup」

何かしら間違ったことをやらかしていないか、丸々1日を費やし検証したが、

思うように表示されない。一旦は諦めたが後日その原因を見つけた。

どこかの縦サイズを指定したら、うまく表示されるようになった。

でもどこいじったか忘れてしまった。

 

追伸　2019.9月

いつの間にか表示されなくなった。

原因は定かではないが、私が思うに、

各種ブラウザがバージョンアップされたため、対応しなくなった？ような・・・

Boxerサイトでは新たなバージョンも公開されたようだが、

現在実装しているページ（HCZ-TV）は、

「Magnific Popup」に全て載せかえることにしました。

 

 

 

次に試したのが

Magnific Popup

http://dimsemenov.com/plugins/magnific-popup/

0420 04 400x300 モーダルウィンドウをレスポンシブ対応に変更　「Boxer」 と 「Magnific Popup」

class名やid名をHTML要素で囲むだけで、

既存のソースには殆ど手を加えなくてもいい、非常にシンプルな設計。

DEMOページ01　DEMOページ02　もご覧ください。

 

その内気変わりして他のモーダルに乗せ換えるかもしれないが、

暫く使ってみることにします。

Comment(0) | Trackback(0)

TAGS: / / / / / | 2015年4月20日 |

LightBox風にテキスト文を表示させるModalbox(モーダルボックス)

2013年11月23日

Categories | ホームページ

当サイト（HCZ.JP）では、画像を拡大する演出としてLightBoxを使用しています。

これは画像に関しての動作であり、テキスト文でも同じような表示が出来ないもの

かとググッてみたら、ヨサゲなものあったので実装方法等紹介します。

あ！その前にLightBox風（背面をグレーアウトさせて画像などを表示）みたいな

表示法をモーダルウィンドウって言うこと、皆さん知ってました？

私は今まで知りませんでしけど（汗）

 

配布先：jQuery Plugin “modalBox”

ライセンス｜Open Source

2013 1122 01 300x199 LightBox風にテキスト文を表示させるModalbox(モーダルボックス)ダウンロードした圧縮ファイル( jquery.modalbox-1.5.0.zip )を解凍します。

2013 1122 02 LightBox風にテキスト文を表示させるModalbox(モーダルボックス)

現状配布は1.5.0バージョンです。

 

まずhead内に下記の３行記述

<head>

<link rel="stylesheet" href="css/jquery.modalbox.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.modalbox-1.5.0-min.js"></script>

</head>

あとは下記をそのままコピペして、文字の変更をして下さい。

<a class="openmodalbox" href="javascript:void(0);" title="実装方法">
実装方法
<span class="modalboxContent">
実装方法はこうだ！！
テキスト文字をここに記述するのだ！
</span>
</a>

小難しいことでもないので、簡単に出来ると思います。

もしうまく動かない場合は、先ほど説明したhead内３行の　href=”×××”　と

sec=”×××”　チョメチョメの部分（ファイルの置いてある場所）の記述を間違えてる

かも。再度確認して下さい。

ボックス表示の設定を少しいじってみました。

参考まで

Modalbox(モーダルボックス) 設定方法

背面グレイアウトの明暗

js > jquery.modalbox-1.5.0-min.js

上記ファイルをテキストエディター（TeraPadがオススメ）等で開き、

下記内容の２行目３箇所の数字を変更する。


black:"background-color:#000;
filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;"

デフォルトは「40 / 0.4 / 0.4」に設定してあるが、「4」の数字を大きくすると

暗くなり、少なくすると明るくなる。3箇所とも同じ数字に。

どこに記述されているか分からない場合、「ctrl + F」 を押すと検索窓が出現する

ので、「black:”background-color:#000;」で検索する。


ボックスの横幅サイズ

css > jquery.modalbox-basic.css

56行目　デフォルトは600px

div#modalBox {
	width:600px; /* default wide */
}

ボックス内の白ベース 内側の余白

css > jquery.modalbox-skin-precious-white.css

７行目　デフォルトは15px

div#modalBox div#modalBoxBody div.modalBoxBodyContent {
	background-color:white;
	padding:15px;
}

つづく

Comment(0) | Trackback(0)

TAGS: / / / / / / / / / | 2013年11月23日 |

Lightbox2のプチカスタム

2012年9月14日

Categories | ホームページ

前回のLightbox2設置法の追記です。

プチカスタムしてみました。

lightbox.css　内の 8行目　9行目

2012 0914 400x66 Lightbox2のプチカスタム

初期設定は　85　と　0.85　になってる。

ここの数値を多くするとバックグラウンドが暗くなり

少なくすると明るくなる。

85はIE用　0.85はIE以外のブラウザ用設定で

出来れば同数値がよさげ。

お好みで設定を変更してみてはいかが？

Comment(0) | Trackback(0)

TAGS: / / / / / | 2012年9月14日 |

LightboxとIE9の相性　Lightbox2の設置法

2012年9月13日

Categories | ホームページ

当方IE9はあまり使うことがなく

殆どは「Firefox」か「Chrome」。

で、たまたまIE9で自分が作ったホームページ見てみたら、

あら？　Lightbox　が無効になってるし。

ひょっとしてと、旧IEバージョンで確認してみたが問題なし。

どうやらIE9だと相性悪いみたいですね。

で、今年春にLightboxがv2.51にバージョンアップしてるってことで

投与してみました。

ダウンロード先はこちら

http://lokeshdhakar.com/projects/lightbox2/

2012 0913 LightboxとIE9の相性　Lightbox2の設置法解凍後、

いらない物は捨てまして、必要なものだけを「lightbox」フォルダにスッキリ格納。

中身はこんな感じ。

2012 0913 2 300x206 LightboxとIE9の相性　Lightbox2の設置法

必要ファイルは７つだけです。

ファイル内を数箇所書き換えます。

lightbox.css　の　１１４行目と１１９行目を

2012 0913 3 400x96 LightboxとIE9の相性　Lightbox2の設置法

絶対パスで記述しておくと確かです。

lightbox.js　の　５１行目　５２行目　を

2012 0913 4 400x74 LightboxとIE9の相性　Lightbox2の設置法

こちらも絶対パスで記述しておくと確かです。

<head>　ココ　</head> 　に　こう記述する

<script type=”text/javascript” src=”設置したディレクトリ/lightbox/jquery-1.7.2.min.js“></script>

<script type=”text/javascript” src=”設置したディレクトリ/lightbox/lightbox.js“></script>

<link rel=”stylesheet” href=”設置したディレクトリlightbox/lightbox.css” type=”text/css” />

赤文字は格納されている場所（ディレクトリ）をご理解の上、それそうの変更をする。

最後にrel=”lightbox[roadtrip]” を記述する。

<a href=”　” rel=”lightbox[roadtrip]” title=”　”><img src=”　” ></a>

以上

Comment(0) | Trackback(1)

TAGS: / / / / / / | 2012年9月13日 |

Lightbox v2.04

2010年6月1日

Categories | パソコン

私が制作するサイトは、画像を多く盛り込んでいるのですが、拡大写真をリンク

で別ブラウザで表示させるタグを利用してます。しかし「HTML文書の文法チェ

ックし、採点」では、は正しくありません。と、指摘され１００点「たいへんよ

くできました」をとることが出来ません。そこで対処法をネットで探してみたと

ころ、ヨサゲジャバ落ちてたんので貰って来ました。

Lokesh Dhakar氏のサイトからdownload

設定が楽な上、見た目も中々かっこよいこのジャバ。かなりスグレモノですね。

今月からガッツリ使わせてもらうことにしました。

勿論「HTML文書の文法をチェックし、採点」は１００点を連発中です。

Comment(0) | Trackback(1)

TAGS: / / / / | 2010年6月1日 |