このページの記事目次 (タグ: Lightbox の検索結果 4 件)
- iPad,iPhone,Android,DS,Wii など 閲覧時の操作性対策を2つ [2012/04/03]
- rel="lightbox" を入れずに jQurey lightBox を [2010/07/12]
- jQuery lightBox グループ化を操る3つの方法 [2010/06/23]
- Lightbox JS (あえて旧Ver.) をカスタマイズ [2009/03/20]
最近は PC・スマートフォン・タブレット時代 などとも言われるように、ブログの閲覧環境も多種多用になっていますね。 現在、FC2ブログでは PC用・スマートフォン用・携帯(ガラケー)用 のテンプレートがあります。 振り分けは 以下のような感じ。
- PC用テンプレート が適応
PC,iPad,3DS,DSi,Wii,PSP,PS3,PSVita...等
追記 : 2013年3月頃~ iPad はスマホ用にも切り替え可能になっています。 - スマホ用テンプレート が適応
※殆どのFC2ブログで、PC用テンプレートとの切り替えが可能
iPhone,iPod touch,Android,Windows Mobile,BlackBerry,...等 - 携帯用テンプレート が適応
スマートフォンに分類されない 各社携帯電話
下の図は、このサイトで良くアクセスされるページ(1週間分の上位集計)です。

クリックで画像を拡大します
主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。
という訳で、このサイトの問題を少しでも減らすため、2つの対策をしてみました。
- ある条件の時は lightBox を機能させない
jQuery lightBox (拡大した画像や背景の何処をクリックしても閉じられるようにしてある) を タッチ操作のもの(iPad,iPod,iPhone,Android の場合) と、3DS などモニターの小さいものの場合と、動作が若干不安定になる Wii では実行しないで、普通にリンクで開くようにしたい! - ナビゲーションメニューの誤タップ対策
タッチ操作のもの(iPad,iPod,iPhone,Android,3DS 等) では、:hover(マウスオーバー)でプルダウンメニューが開くことはない為、以前のものでは、プルダウンさせたくても誤タップ(誤クリック)していまうケースも多いかも。。 ※アクセスできないことはないのですが、操作にコツが必要でした。
キーワード検索 : スマートフォン iPad iPhone DS Wii jQuery Lightbox






お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-218.html
2012/04/03 ~ | Comment (7) tweet? | ↑ ページ先頭へ ↑ |以前の記事 jQuery lightBox グループ化を操る3つの方法 で紹介した方法。 jQuery版 の lightBox は rel="lightbox" を入れなくてもOK(不要) なんだと勘違いしていた私。
このサイトでは lightBox で開きたい画像リンクには rel="lightbox" を入れているので、問題なかったのですが、先日 ある方のサイトで rel="lightbox" を入れずに lightBox を適応させてみたところ、画像クリックで lightBox が機能したものの、範囲内の <a> 全てが反応してしまい、読み込み状態のままになり不具合があることが判りました。
主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。

既に画像リンク が沢山ある状態で、全てに rel="lightbox" を追加するのは大変な作業だと思いますので...かなり必死に探したところ jQuery lightBox での適応方法を紹介しているサイトをみつけましたので、紹介します。
キーワード検索 : jQuery Lightbox javascript カスタマイズ






お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-144.html
2010/07/12 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |私が Lightbox JS (旧バージョン) から jQuery版 lightBox に乗り換えたのは 半年前の 2010年1月 のこと。 Lightbox JS は ライブラリも不要で軽い, どこをクリックしても画像を閉じられる,カスタマイズしやすい などの理由で気に入っていたのですが、 1回目に スクリプトが機能していないケースが多い ことだけが気になっていました。
上手く機能しなくても 別窓で表示されるだけなので 大きな問題でも無いかもしれませんが、1回目 と 2回目の動作が異なるのは やはり少し戸惑うかな...と。 読み込み完了 と 正常起動のタイミング は Highslide JS が最も良く、 次いで jQuery lightBox や Prototype Lightbox 2 など、 Lightbox JS (旧バージョン) は少しイマイチな印象です。

図1

図2

図3
主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。
※実際には、ここまで無駄に大きいサイズにしたり、前後の画像のサイズを変えていることは少ないですが、ここでは動作確認用として 敢えてバラバラのサイズにしてあります。
jQuery lightBox は動きも軽く、どこをクリックしても画像を閉じるようにできる(簡単なCSS調整でカスタマイズ可能)、自動グル―プ化 で 2枚目以降の画像の表示が速い ...ということで、jQuery lightBox に変更しました。
自動グループ化を上手くコントロール するための設置方法
jQuery lightBox の大きな特徴の1つに 自動グループ化 というものがあると思います。 そして...この便利な機能に 逆に戸惑うこともあるのではないでしょうか?
- 一番オーソドックスな設置方法 (私のサイトでの設置方法)
私は、それ程多用していないので... CSSを調整して 1枚1枚 画像を開いてもらうような見た目 にしていますが、繋がりのない画像が 「次へ」「前へ」 で グループ化されている状態は あまり良くはないですよね。。。; - 記事毎に グループ化させる設置方法 (推奨!)
FC2ブログなら、テンプレート自体に一工夫するだけで 記事毎に lightBox をグループ化させることができます。 他のスクリプトにも応用でき、記事の編集作業も要りませんので お奨めの方法です。 FC2ブログ以外でも工夫次第で設置できる場合もあると思います。 - rel="lightbox[グループ名]" の設定を有効にする方法
Prototype Lightbox 2 にあったグループ化( rel="lightbox[任意のグループ名]" ) の設定を jQuery lightBox でも使えるようにするカスタマイズです。 1つの記事内でさらにグループを分けたい場合 や 2. の方法が使えない場合、Lightbox 2 をこれまで使用していていた場合 などにお奨めです。
ちなみに私は 全部試して結局 1. の方法を選んでいますが...後はお好みで!
3. のカスタマイズについては、[ prototype版LihgtboxからjQuery版Lightboxへの移行 | Beach Resort Photoclip ] に詳しく書かれていますのでそちらを参照してください。
キーワード検索 : jQuery Lightbox 画像 javascript カスタマイズ






お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-142.html
2010/06/23 ~ | Comment (32) tweet? | ↑ ページ先頭へ ↑ |拡大画像など 画像ファイルへのリンク を 同じウィンドウでポップアップ風に表示する方法。 先日、急に導入してみたくなり、色々と調べ 実際に試してみました。
この手の javascript は 数多く存在し、中でも一番多く使われていそうなものが Lightbox のようですが、一言で Lightbox と言っても 色々なバージョンや種類があり、どれを使おうか本当に悩んでしまいました。

クリックで画像を拡大します

クリックで画像を拡大します
↑ a:hover を使って
で、Slimbox, Lightbox JS (旧バージョン,1.0),Lightbox Plus を実際に試して、最終的に Lightbox JS (旧バージョン) を選びました。
jQuery版 lightBox に変更しました。
jQuery版 では、主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブで大きい画像を開きます。
現在は JQuery版 を適応していますので、旧バージョンの動作確認は Lighbox JS のサンプルテンプレート からどうぞ。※ページの読み込みが完全に終わっていないうちに 画像へのリンク をクリックすると、Lightbox は作動せず、通常の表示となります。 これは javascript (onload) の仕様で、この Lightbox に限ったものではないようです。
これに決めた理由は ↓- どれよりも一番軽い ! (約17KB)
- どこをクリックしても画像を閉じられる
- カスタマイズしやすい ...etc
私の場合、画像のグループ化 (スライドショーのような機能) は必要ないと思ったので、とにかく 「軽さ」 と 「扱いやすさ」 を重視しました。
※rel="lightbox" の自動付与 (rel="lightbox" を書かなくてOKというもの) は、多くのタイプで 実装可能 かと思います。 [ 関連:rel="lightbox" を入れずに jQurey lightBox を ]
Lightbox系のスクリプト 比較一覧
海外のサイトですが、ここからサンプルを見て回っても面白いと思います。 「Lightbox v2.0」 の軽量版クローン 「Litebox」, HTMLや動画も表示できる 「Floatbox (Lightbox系)」, 様々な表示タイプから選べる 「Highslide JS (Lightbox とは異なるタイプ,やや設置難?)」 など本当に数多く存在するんですね!
キーワード検索 : Lightbox カスタマイズ 画像 javascript






お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-67.html
2009/03/20 ~ | Comment (8) tweet? | ↑ ページ先頭へ ↑ |