ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
jQuery  Lightbox  画像  javascript  カスタマイズ  

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

jQuery lightBox グループ化を操る3つの方法

2010/06/23 (水)  カテゴリー: ブログカスタマイズ上級

私が Lightbox JS (旧バージョン) から jQuerylightBox に乗り換えたのは 半年前の 2010年1月 のこと。 Lightbox JS は ライブラリも不要で軽い, どこをクリックしても画像を閉じられる,カスタマイズしやすい などの理由で気に入っていたのですが、 1回目に スクリプトが機能していないケースが多い ことだけが気になっていました。

上手く機能しなくても 別窓で表示されるだけなので 大きな問題でも無いかもしれませんが、1回目 と 2回目の動作が異なるのは やはり少し戸惑うかな...と。 読み込み完了 と 正常起動のタイミング は Highslide JS が最も良く、 次いで jQuery lightBox や Prototype Lightbox 2 など、 Lightbox JS (旧バージョン) は少しイマイチな印象です。

jQuery lightBox plugin
図1
jquery.lightbox-0.5.min.js
図2
テンプレートの構造
図3


主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。

※実際には、ここまで無駄に大きいサイズにしたり、前後の画像のサイズを変えていることは少ないですが、ここでは動作確認用として 敢えてバラバラのサイズにしてあります。

jQuery lightBox は動きも軽く、どこをクリックしても画像を閉じるようにできる(簡単なCSS調整でカスタマイズ可能)、自動グル―プ化 で 2枚目以降の画像の表示が速い ...ということで、jQuery lightBox に変更しました。

自動グループ化を上手くコントロール するための設置方法

jQuery lightBox の大きな特徴の1つに 自動グループ化 というものがあると思います。 そして...この便利な機能に 逆に戸惑うこともあるのではないでしょうか?

  1. 一番オーソドックスな設置方法 (私のサイトでの設置方法)
    私は、それ程多用していないので... CSSを調整して 1枚1枚 画像を開いてもらうような見た目 にしていますが、繋がりのない画像が 「次へ」「前へ」 で グループ化されている状態は あまり良くはないですよね。。。;
  2. 記事毎に グループ化させる設置方法推奨!
    FC2ブログなら、テンプレート自体に一工夫するだけで 記事毎に lightBox をグループ化させることができます。 他のスクリプトにも応用でき、記事の編集作業も要りませんので お奨めの方法です。 FC2ブログ以外でも工夫次第で設置できる場合もあると思います。
  3. rel="lightbox[グループ名]" の設定を有効にする方法
    Prototype Lightbox 2 にあったグループ化( rel="lightbox[任意のグループ名]" ) の設定を jQuery lightBox でも使えるようにするカスタマイズです。 1つの記事内でさらにグループを分けたい場合 や 2. の方法が使えない場合、Lightbox 2 をこれまで使用していていた場合 などにお奨めです。

ちなみに私は 全部試して結局 1. の方法を選んでいますが...後はお好みで!
3. のカスタマイズについては、[ prototype版LihgtboxからjQuery版Lightboxへの移行 | Beach Resort Photoclip ] に詳しく書かれていますのでそちらを参照してください。

jQuery lightBox の 準備,アップロード

http://leandrovieira.com/projects/jquery/lightbox/ から jquery-lightbox-0.5.zip をダウンロードします。 ※IE で 「ファイルが壊れています」 と表示されダウンロードできない場合、Firefox 等なら正常にダウンロードできると思いますので お試しください。

解凍したフォルダ には サンプルファイル など色々含まれていますが、実際に必要になるのは 以下のファイルです。 jsファイルは 基本的に同じものが 3種類用意されていますが、軽くて扱いやすい jquery.lightbox-0.5.min.js (Minified 10KB) を選んでいます。

  • jquery.lightbox-0.5.css → jquery-lightbox-05.css
  • jquery.lightbox-0.5.min.js → jquery-lightbox-05-min.js
  • ※FC2ブログではファイル名に . ドットが含まれているとアップロードできません。なので、ドットを含まない名前に直して利用します。
  • lightbox-blank.gif
  • lightbox-btn-close.gif
  • lightbox-btn-next.gif
  • lightbox-btn-prev.gif
  • lightbox-ico-loading.gif

jquery.lightbox-0.5.min.js の 修正,アップロード

jquery.lightbox-0.5.min.js (jquery-lightbox-05-min.js) を テキストエディタ(図2) などで開き、14行目 (コードの最初の行,画像のパス部分) を アップロードした画像のパスに修正していきます。 .gif というところを探して その部分5か所 を http://blog-imgs-00.fc2.com/a/b/c/ ~ /xx.gif などと 修正すればOKです。

その他、14行目 や 18行目 などの設定で 「日本語」 を使った場合、文字コードを正しく指定して保存してください。 (FC2ブログの場合、EUC になります

修正した jquery-lightbox-05-min.js を再度アップロードします。

<head> ~ </head> 部分に以下を記入 [A]

<link rel="stylesheet" type="text/css" href="http://blog-imgs-00.fc2.com/a/b/c/ ~ /jquery-lightbox-05.css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/ ~ /jquery-lightbox-05-min.js"></script>

ファイルのパス部分 は、実際にアップロードしたものに書き換えてください。

jQuery ライブラリ本体(バージョン1.2.3) は、ダウンロードしたフォルダにも含まれています。 私は、Googleのサーバーから直接読み込んで使用しています。
[ 参照 : Google AJAX Libraries APIを利用しよう! | THE HAM MEDIA ]

追記 (2013/03/26) : jQuery ライブラリ本体 のバージョンによっては、キーボードを使った操作などで不具合が出るケースがあるようです。 バージョンは最新版が良いという訳でもないようなので、各自確認してみてください。 jQuery(ver 1.2.3) や jQuery(ver 1.3.2) 辺りが無難かも。。 1.2.3 は、その後のバージョンのものより ファイルサイズも軽いです。 但し、「zenback」を利用している場合には jQuery(ver 1.2.6) にして、記事後半の説明も参照してください。

<head> ~ </head> 部分 [A] より下に以下を追加

1. 一番オーソドックスな設置方法 の場合

<script type="text/javascript">
$(function(){
$('#content a').lightBox();
});
</script>

※↑ 範囲内の <a> 全てに反映してしまうようで使えませんでした。

※↓ 2010/07/09 修正版 [ 詳細: rel="lightbox" を入れずに jQurey lightBox を ]
<script type="text/javascript">
$(function(){
$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
.addClass("lightbox");
$('#content a.lightbox').lightBox();
});
</script>
<script type="text/javascript">
$(function(){
$('#content a[rel*=lightbox]').lightBox();
});
</script>


追記 : 2011/09/28
jQuery1.3以降 を利用している場合のエラー対策として、当初のソース 
$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]') や a[@rel*=lightbox] から @ を除いたソースに修正しました。(コメント参照) jQuery1.2.3 など 1.3より前のバージョンでもこの方法で問題ないようです。

↑ このようなスクリプト(いずれか)を追加します。 #content は、このテンプレートの場合の一例です。 記事全体を囲っているような ID を指定します。(図3)

前者は、rel="lightbox" が不要のもの (範囲内 全ての 画像 リンクで lightBox 適応)
後者は、rel="lightbox" を入れたもの (範囲内 特定の 画像 リンクで lightBox 適応)

2. 記事毎に グループ化させる設置方法 の場合 (FC2ブログ用)

<script type="text/javascript">
$(function(){
<!--topentry-->
$('#entry_no<%topentry_no> a').lightBox(); 
<!--/topentry-->
});
</script>

※↑ 記事内の <a> 全てに反映してしまうようで使えませんでした。

※↓ 2010/07/09 修正版 [ 詳細: rel="lightbox" を入れずに jQurey lightBox を ]
<script type="text/javascript">
$(function(){
$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
.addClass("lightbox");
<!--topentry-->
$('#entry_no<%topentry_no> a.lightbox').lightBox();
<!--/topentry-->
});
</script>
<script type="text/javascript">
$(function(){
<!--topentry-->
$('#entry_no<%topentry_no> a[rel*=lightbox]').lightBox(); 
<!--/topentry-->
});
</script>


追記 : 2011/09/28
jQuery1.3以降 を利用している場合のエラー対策として、当初のソース 
$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]') や a[@rel*=lightbox] から @ を除いたソースに修正しました。(コメント参照) jQuery1.2.3 など 1.3より前のバージョンでもこの方法で問題ないようです。

↑ このようなスクリプト(いずれか)を追加します。 FC2ブログの変数 を使っていますので、<!--topentry--> ~ <!--/topentry--> 部分が 記事数分 繰り返されます。

前者は、rel="lightbox" が不要のもの (記事内 全ての 画像 リンクで lightBox 適応)
後者は、rel="lightbox" を入れたもの (記事内 特定の 画像 リンクで lightBox 適応)

このスクリプトを有効にするために、テンプレートの <%topentry_body>(記事本文が入る変数) 部分を id="entry_no<%topentry_no>" で囲っておきます。 (図3)

<!-- ▼記事部分▼ -->
<!--topentry-->
<!-- *=*=*=*=*=*=*=*=*=* -->

<div class="entry_m" id="entry_no<%topentry_no>">

<%topentry_body>

</div><!--/class=entry_m-->


<!-- *=*=*=*=*=*=*=*=*=* -->
<!--/topentry-->
<!-- ▲記事部分▲ -->

※ソースは私のテンプレートを例にしていますが、基本的にはどのテンプレートも同じなので <%topentry_body> (記事本文が入る変数) を探してそれを囲っている <div> などに id="entry_no<%topentry_no>" を追加すればOKです。

テンプレートによっては、記事本文を囲む 特定のID ( id="e_<%topentry_no>" など) が予め入っている場合もあると思います。 その場合、それを利用すればOKです!


※ブログパーツ 「zenback」 を利用している場合の注意事項

「zenback」 を利用しているブログにおいては、このままだと IEでの閲覧時に zenback が読み込み中のままとなり機能しない不具合が起こるようです。

これを回避するためには jQuery のバージョンを 1.2.3 から 1.2.6 に変更し、さらに、$(function(){ という記述を jQuery(function($){ と書き換えれば大丈夫とのことです。



取り敢えず、設置完了!

rel="lightbox" が不要な設定 にしてある場合、既に使える状態です。

rel="lightbox" が必要な設定 にしてある場合、画像ファイル (.gif .png .jpg ) へのリンク <a> に rel="lightbox" を追加 すればOKです。 <a> に title="テキスト" を入れておくと、それが 画像のキャプション として入りますので必要に応じて設定します。

<a href="~.png" title="IE7 でのスクリーンショット" target="_blank" rel="lightbox"><img src="~.png" alt="縮小画像" width="138" height="118" /><br />クリックで画像を拡大します</a>

例えばこんな感じ。面倒だと思う方は rel="lightbox" 不要な設定 がおススメ。

表示位置を変更したり、「次へ」「前へ」のリンク幅を狭くして 画像を閉じやすいように...など。 自分好みにカスタマイズして使っています。


キーワード検索 : jQuery  Lightbox  画像  javascript  カスタマイズ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-142.html

2010/06/23 ~ | Comment (32) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-32 Comment


こんにちは。

私のブログもjQueryを使用しているのですが、
画像のスライドなどには、Highslide JSを使用しています。
こちらも中々、使いよいです。
サンプル:http://iwa40.blog6.fc2.com/blog-entry-2151.html

Hiro |  2010/06/26 (土) [ 編集 ] No.580


Hiroさん、こんにちは。

Highslide JS は動きが良心的でいいですよね。
lightBox は ページ読み込み中だと機能しないようになっていますが、Highslide JS だと スクリプトが読み込まれればOK ですよね。 設置が他のものより大変 (記事のソース修正が必要) だと思うので、手軽なものを探してしまいますが。。。;

jQuery lightBox は、設置も簡単だったし、動きも気に入っているのですが、
サンプルでは 敢えて色々なサイズを 横に並べてみたので、欠点も目立ちますよね。。。 普段はこのように並べることは少ないのですが、しいて言えば 『「次へ」をした時に 画像の位置を上の端に戻して欲しい』 『スクロールした時にバックグラウンドの位置はそのままに出来たら...』 なんて希望はありますが。 誰か出来る方いないかな。。。

Fancybox (jQuery) や jQuery LightboxAB,その他 個人的なカスタマイズ... この種のものは 探すとかなり見つかりますよね。 どれも面白そう。。。

paruparu |  2010/06/27 (日) [ 編集 ] No.581


参考にさせて頂きました

こんばんは、こちらの方法を参考にさせて頂いたのですが
うまくいかないので、質問させて下さい。
lightbox2.04を使った導入した所、IE8、FireFox3.68では正常に機能してくれるものの
Chrome5で不具合が出た為、こちらで紹介されているjQuery lightBoxの
FC2ブログへの導入方法を見てlightboxを変えようと思ってるのですが、
ファイルを書き換えアップロードして、「A」をテンプレートに記入し、
「1」の前者、後者を試したのですが、どちらも動かず困っています。

動かないというのは全く機能せず、画像をクリックすると従来通り
別タブが開き画像が表示されてしまいます。
Chrome、FireFox、IE8で確認しました。

HTML CSS Scriptの知識は一切ありませんが、lightbox2.04は
設定出来、一応正常に動いたのですが、Chromeから見ると
1度目にブログを訪れた時は正常に機能し、一度ブログを閉じて
2度目にブログを開いて画像をクリックすると、何も起きず
ブログ内に配置してるブログパーツ(フラッシュやScriptを使った)が
消える症状が出てしまい(ブラウザの更新をすれば直る)
色々と調べたのですが解決法が見つからず、jQuery lightBoxなら
動くかと思い、こちらを参考に設定したのですが、動かず
途方に暮れています。

「A」までの手順はlightbox2.04とほぼ変わりませんので問題ないと
思うのですが、「1」からの手順は自信がありません。

画像のURLにrel="lightbox" を付けても付けなくても反応しないので、
全く機能してないんだろうなと思うのですが、何が問題なんでしょうか?

もし宜しければ教えて頂けると有り難いです。

まっこり |  2010/07/31 (土) [ 編集 ] No.628


まっこりさんへ

>全く機能してないんだろうなと思うのですが、何が問題なんでしょうか?

ブログ拝見しましたが、今現在 スクリプトを設置していないようなので アドバイスしづらいのですが...ローカル環境で まっこりさんのブログに私が使っている設定を入れてテストしてみたところ、問題なく機能しました。

お使いのテンプレートには id="content" という部分はないので
<script type="text/javascript">
$(function(){
$('#main a[@rel*=lightbox]').lightBox();
});
</script>
などが適当だと思いますが、設定に間違いはなかったでしょうか?

実際に何をどのように設置したのかが判らないので、もしこれでも機能しないというなら 他のファイル や 設置位置など に問題があると思います。

paruparu |  2010/07/31 (土) [ 編集 ] No.629


早速の回答ありがとう御座います

わざわざ確認して頂きありがとう御座います。
一度設定を1からやり直していたので一時、設定を解除してました。

書いて頂いた、コードも試しましたが、やはり全く機能していません。
「A」までの手順は「JSの書き換え」とファイルのアップロードだけですよね?
JS以外は書き換えが無いので、CSSだけこちらと同じ様にリネームして
gifアイコンはそのままアップロードしています。
「JSファイルだけ」14行目にある「image」を5箇所、自分のURLに書き換え
ファイル名をこちらと同じにリネームし、アップロードしています。
ここまでは、lightbox2.04と対して変わらなく、2.04では動作出来てるので
URLに間違えは無いと思います。

「A」の手順から、分からない事が多く、前記通り全くの初心者ですので、
下記の意味がいまいち分かりません。
>jQuery ライブラリ本体(バージョン1.2.3) は、ダウンロードしたフォルダにも含まれています。 私は、Googleのサーバーから直接読み込んで使用しています。

これは、googleになにか登録しないといけない訳では無いのですよね?
ここで何か手順を踏まないといけないのでしたら、ここが問題かと思います。

テンプレートの編集でHTMLに書き込ん出る場所は、</head>の直前に
「A」に続き「1」を貼りつけてました。
その後「1」の修正をして頂いたので、「1」は変更したのですが、
全く機能していない状態です。

そちらでは正常動作したとの事ですので、ブログパーツやアクセス解析との
相性で動かないのでしょうか?

今現在は設定をそのまま残していますので、お手数だとは思いますが
確認して頂けると有り難いです。

徹夜して2.04とjQueryの2種類の設定を見直して、どちらも再設定しましたが、
2.04はやはりブログパーツと干渉してしまい、Chromeからは初回以外
一度更新をかけないと機能せず、jQueryは全く機能しない状況です。

画像の方にはこちらで紹介して下さってる通りの方法でrelを付けてます。
出来れば、relを付けずに使える様になればいいなと思ってますが・・・。

宜しくお願い致します。

まっこり |  2010/07/31 (土) [ 編集 ] No.630


まっこりさんへ

判りましたよ^^ .css と .js のファイル名 に ~ / というのがそのまま残っているので (これは説明上の省略の意味だったので) 正しく書き変えればOKです。

<link rel="stylesheet" type="text/css" href="http://blog-imgs-46.fc2.com/m/a/k/makkori1105/jquery-lightbox-05.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blog-imgs-46.fc2.com/m/a/k/makkori1105/jquery-lightbox-05-min.js"></script>
<script type="text/javascript">
$(function(){
$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')
.addClass("lightbox");
$('#main a.lightbox').lightBox();
});
</script>

このように書き変えれば機能すると思います。rel="lightbox" が要らない設定です。

paruparu |  2010/07/31 (土) [ 編集 ] No.631


動きました!

本当にありがとう御座います!
手直ししたら、正常に動くようになり、ブログパーツとも干渉せず、
すべての画像がオーバーレイ表示されるようになりました!


ただ、ページに画像があると、別の記事の画像もグループ化されているので
この点だけなんとかしたいのですが、「2」の設定をそのまま実践すれば
よろしいのでしょうか?

まっこり |  2010/07/31 (土) [ 編集 ] No.633


出来ました!

「2」の前者の設定を記事通り実行したら、記事毎にグループ化され
自分の思う形にする事が出来ました^^

こんな初心者に親切に教えて頂いて本当にありがとう御座います。

2日間悪戦苦闘したので、本当に助かりました!
どうもありがとう御座いました。

まっこり |  2010/07/31 (土) [ 編集 ] No.634


まっこりさんへ

無事に機能するようになってよかったですね。
他のスクリプトとの干渉などは (Prototype だと時々報告をみかけますが)、jQuery だと比較的起こりにくいみたいなので 安心して使えるのではないかと思います。

paruparu |  2010/08/01 (日) [ 編集 ] No.638


お世話になりました。

おかげ様で、問題なく機能しています^^

ただ、QLOOKアクセス解析だけは、前面に出てきてしまい
画像の上に表示されてしまいます。

今 QLOOKに問い合わせしてますが、たぶん回避コードは教えてくれないでしょうね。

この点だけが非常に残念です><

まっこりーに |  2010/08/01 (日) [ 編集 ] No.642


>QLOOKアクセス解析だけは、前面に出てきてしまい 画像の上に表示されてしまいます。

どうしても回避したければ z-index:1073741825 以上 に調整すれば回避できますよ。
jQuery lightBox のデフォルトの設定は z-index:100; となっているのでそれを変更。

QLOOKバナーの設置位置が結局左上になった件
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-128.html
詳細は ↑記事 に載せていますので読んでみてください。

でも 問合せするのは 良いことかもしれませんね。
QLOOKさん は私も何度か問合せしたことありますが、毎回 何らかの回答をしてくれます (結構前向きな印象ですし)。 多くの要望があれば 将来改善される可能性もありますよね。

paruparu |  2010/08/01 (日) [ 編集 ] No.643


QLOOK関連の記事

読ませて頂きました。
まさかここまで着手されてるとは・・・w
僕も何度かQLOOKには問い合わせで早急な回答を頂いてるのですが
Googleのトラッキングコードと併用して大丈夫かの質問に
「恐らく問題ないと思います」との回答を頂いてるので
paruparuさんの記事を読むと矛盾が発生してる事になりますね。

僕自身もたまにQLOOKのアクセス解析の位置が左上に飛ぶことがありますが、
かなり発生率が低いので無視してます。(Chromeで)

土曜にメールを送った事もあり、まだ回答は頂いてませんが、
暫定的にparuparuさんの回避法を試してみますね。

明日中に回答が来なければ多分来ないと思うのでまた報告させて頂きます。

まっこりーに |  2010/08/01 (日) [ 編集 ] No.644


QLOOKから返事が来ました。

QLOOKアクセス解析のアクセスカウンタは、不正利用を防止する目
的で、常に最上位のレイヤーに表示されるように設計してあるため、
これを変更することはできません(ただし有料版はアクセスカウン
タを不可視にできるため可能です)。
いただいたご意見は今後開発を進める上で参考にさせていただきま
す。ありがとうございます。

と言う事で、前回どなたかが質問された時と同じ答えが返ってきました。

教えて頂いたz-index:1073741824を探そうと
解析タグ内のスクリプトコードをIE経由でダウンロードして
見てみましたが、position: relativeの位置に同じ値を
見つけられなかったので、断念しました。
(あったとしてもその後どうするかわからないのでw)

現状ではカウンターと表示が被らないように気をつけるしかないみたいです。

まっこりーに |  2010/08/03 (火) [ 編集 ] No.645


うぉー!コード変わったみたいですよ!

今、このコメント読んで 再度確認したのですが。。。
QLOOKのバナー 最前面に残らなくなりましたね!!
解析コードも 先日(8/1 のコメントの際)に確認した時と 明らかに変わっています!

z-index の調整不要になったみたいですよ。 対応してもらえたのかも!

追記: 参照先リンクに載せたエラー は相変わらずあるみたいですが、表示されるエラーメッセージは変わってますね。。。 今 他にも色々調整中なのでしょうか。。。

paruparu |  2010/08/03 (火) [ 編集 ] No.646


おお?

本当ですね!

全然気づかなかったけど、前面に出ない様になってます!
月曜の夜にメールが来てなかったので、もう一度メール送ったのが
良かったのかなw

これで位置も気にせず画像貼れますね^^

まっこりーに |  2010/08/04 (水) [ 編集 ] No.649


jpuery1.3以降、@を付けるとエラーになるようです。  
 
$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')  
↓  
$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')

とおりすがり |  2011/09/28 (水)  No.1127


jQuery1.3以降、@を付けるとエラーになる

貴重な情報をありがとうございました。
こちらでは、まだ jQuery1.2.3 を使っているので 動作確認もそれで行っていますが、今後バージョンを上げることもあると思いますし、1.3以降のものを使っている方もいると思うので、とても参考になりました。 後ほど記事にも追記しておきたいと思います。

paruparu |  2011/09/28 (水) [ 編集 ] No.1128


管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- |  2011/11/17 (木)  No.1184


非公開コメントさんへ(lightBoxの件)

サイト見てみましたが、以下の部分が違うようなので
これを修正すれば多分動くと思います。 他の部分は大丈夫そうです。

× <link rel="stylesheet" type="text/css" http://blog-imgs-36・・・・/jquery-lightbox-05.css" media="screen" />
 ↓
<link rel="stylesheet" type="text/css" href="http://blog-imgs-36.fc2.com/m/h/f/mhfkatatatakiken/jquery-lightbox-05.css" media="screen" />

paruparu |  2011/11/18 (金) [ 編集 ] No.1189


ありがとうございました

非公開コメントの初心者です
うまくいくようになりました。

できていると思ったところで失敗してました^^;
迅速な対応に感謝致します

また困ったことや、なにかしたくなったら参考に致します

初心者 |  2011/11/18 (金) [ 編集 ] No.1194


初心者さんへ

lightBox 動くようになってよかったですね。
で、ちょっと記事を読んだのですが、もし 1枚ずつ開くような動作が希望ということであれば、css の一部を 以下のように変更すると良いかと。。

jquery-lightbox-05.css の59行目

#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}

↓ これを以下のように変更

#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 100px;
height: 100%;
display: block;
outline: none;
}

私の設定と同じものです。
次へ・前への画像の幅 程度に設定しておくと、真ん中部分の閉じる領域 が開きますよ。

paruparu |  2011/11/19 (土) [ 編集 ] No.1196


たびたびありがとうございます

HPの確認までしてくださって、本当にありがとうございます
上のように書き換えたところ、思い通りの形になりました~♪

本当に感謝感謝です^0^b

初心者 |  2011/11/19 (土) [ 編集 ] No.1198


うまくいったと思ったら

cssを言われた通り直してみたところ、写真をクリックしても、前面に出なくなってしまいました><。

これは、<head> ~ </head> 部分に以下を記入 [A]した後の
<head> ~ </head> 部分 [A] より下に以下を追加

自分は2. 記事毎に グループ化させる設置方法 の場合 (FC2ブログ用)
をテンプレートに入れたのですが
1. 一番オーソドックスな設置方法 の場合
にテンプレートを変えなければいけないのでしょうか?
1.に変えた場合赤字になっているcontentが自分のテンプレートではわからないのですが
教えていただけないでしょうか?

今回までcssはそのままアップロードしただけで、いじっていないので、前面に出なくなったのはcssの変更によるものだと思うのですが

初心者 |  2011/11/19 (土) [ 編集 ] No.1199


お騒がせしております

css、jsをアップロードしなおしたところ
http://blog-imgs-36.fc2.com
のところが
http://blog-imgs-35.fc2.com
とアップロードされている場所が変化していました
テンプレートのhttp://blog-imgs-36.fc2.comの3635に直したところ
うまくいきました

jsでhttp://blog-imgs-36.fc2.comに修正したままのを使っているのですが、アップロードされる場所が変化しても、そのままで大丈夫なのか(これからのアップロード先はおそらくblog-imgs-35.fc2.comになると思うので)は試してみてみたいと思います
これから先はアップロード先を注意してみたいと思います
まさか変わるとは思わなかったので・・・

アップロード先が変わったことで、前の記事がうまくできない~とか騒ぎ始めるような素人なので・・・
これからもお世話になると思いますが、気長に見てやってください><



初心者 |  2011/11/19 (土) [ 編集 ] No.1200


ファイルのアップロード先

FC2ブログのファイルサーバー blog-imgs-○○.fc2.com は
そこが一杯になると変わるようです。私は開設から もう4回 変更されています。
変更されても、前のものが使えなくなることはないので、アドレスさえ間違えなければ以前と同様に使えますよ。 同名ファイルであれば (同じファイルサーバーに)上書き保存されます。

但し、ファイルサーバーにアップロードした js,css ファイルなど は上書きが反映されにくい場合があるのでご注意ください。 変更したはずなのに反映されないという場合は 別名でアップロードし直した方が手っ取り早いこともあります。

paruparu |  2011/11/20 (日) [ 編集 ] No.1201


ありがとうございました

ファイルサーバーって変わるものなんですね
まったく思ってもみなかったので、慌ててしまいました

おかげさまで無事に望み通りになりました
またわからない事があったり、いいカスタマイズが出ていたりしたら、お世話になります
その時はまたよろしくお願いします

初心者 |  2011/11/20 (日) [ 編集 ] No.1202


[2]でrel='lightboxなしの方法を実行しました。'
$('#entry_no<%topentry_no> a.lightbox').lightBox();
が関数ではありませんとエラーコンソールが出てしまっています。解決策が分からないです。お願いします。


閲覧者 |  2012/09/01 (土)  No.1477


同じ [2] のソースで実装されているサイト 2件で確認しましたが、いずれもエラーは出ていないようです。 例えば、以下のサイトで 同じソースを使っています。
http://makkori1105.blog133.fc2.com/?q=lightbox

閲覧者さんのサイトを見ていないので、何とも言えないですが... 一応の確認として
1. [2] は FC2ブログ用ソース であること。
2. <head>部分のソースも正しい順番で入っていること。
3.↓ 以下のようにしておくこと。 

<!--topentry-->
<div id="entry_no<%topentry_no>">
(記事本文)
</div>
<!--/topentry-->

などをチェックしてみてください。
※<%topentry_no> は FC2の変数 ですので、実際には 各記事番号 が反映されます。

paruparu |  2012/09/01 (土) [ 編集 ] No.1478


jQuery lightBoxのバグ?

はじめまして
グループ化ではないのですが不具合を発見しました

jQuery lightBoxのページからダウンロードします
http://leandrovieira.com/projects/jquery/lightbox/

ダウンロードしたファイルを解凍します。
解凍してできた「js」フォルダ内の「jquery.js」をリネームします(「jquery-org.js」等)
jQueryのページから「jQuery」のバージョン1.4.2以上をダウンロードします。
ダウンロードしたファイルを「jquery.js」として「js」フォルダに保存します。

index.htmを起動します

写真の1枚目をクリックします
lightBoxに写真の1枚目が表示され、左下に『Image 1 of 5』と表示されます
『NEXT』をクリックします
lightBoxに写真の2枚目が表示され、左下に『Image 2 of 5』と表示されます
ここでキーボードの『→』を押します
するとなぜかlightBoxに写真の4枚目が表示され、左下に『Image 4 of 5』と表示されます
マウスで『NEXT』や『PREV』をクリックする分には問題ないみたいですが、
キーボードの『←』『→』でチェンジすると1枚づつ切り替わらないみたいです
これってjQuery lightBoxのバグでしょうか?

元々あった「jquery.js」を利用すると、1枚づつ切り替わるみたいです。
わかりづらくてすみません

閲覧者 |  2013/02/09 (土) [ 編集 ] No.1588


情報ありがとうございます。

> (jQuery1.4.2 以上のバージョンにおいて)
> キーボードの『←』『→』でチェンジすると1枚づつ切り替わらないみたいです
> これってjQuery lightBoxのバグでしょうか?

jQuery1.4.2 と jQuery1.9.1 を適応させてテストしてみましたが、私の環境ではバグのような現象は再現しませんでした。 『←』『→』 を使っても 順番に画像を表示できています。

ただ、環境によってそのようなバグが起こる可能性があるのだとしたら、それより前のバージョン1.2.3(or同包のもの)か バージョン1.2.6 辺りが無難なのでしょうかね。。

paruparu |  2013/02/10 (日) [ 編集 ] No.1590


ありがとうございます

jQuery lightBoxのバグ?をコメントした者です
不具合?の構成はWindows7(SP1)で、Chromeを利用した場合です
ほかにいろんなパターンを試してみました

ブラウザを変えてみましたが、結果は以下の通りになりました
▲Windows7(SP1)・jQuery(ver 1.9.1)
Opera:一部不具合あり(順番通りに表示されない)
IE9 :動作せず 

▲Windows7(SP1)・jQuery(ver 1.3.2)
Opera:問題なし
IE9 :問題なし 

OSの違いかなと思い、別PC「XP(SP3)、VISTA(SP2)」でも試してみました
▲XP(SP3)・jQuery(ver 1.9.1)
FireFox:一部不具合あり(順番通りに表示されない)
IE7 :動作せず

▲XP(SP3)・jQuery(ver 1.3.2)
FireFox:問題なし
IE7 :問題なし

▲Vista(SP2)・jQuery(ver 1.9.1)
Chrome :一部不具合あり(順番通りに表示されない)
FireFox:一部不具合あり(〃)
Opera :一部不具合あり(〃)
IE9 :動作せず

▲Vista(SP2)・jQuery(ver 1.3.2)
Chrome :問題なし
FireFox:問題なし
Opera :問題なし
IE9 :問題なし


どうやら、最初からキーボードの『←』『→』のみでチェンジすれば問題ないが、
1回でもマウスで『NEXT』や『PREV』をクリックし、その後キーボードを使うと、
表示される順番が正常に表示されないみたいです。
(私のPCの場合のみ?)

とりあえず「jquery.lightbox-0.5」を使うページは、「jQuery」のver 1.3.2を使用することにしました。

閲覧者 |  2013/02/10 (日) [ 編集 ] No.1591


jQuery(ver 1.9.1) で不具合再現しました。

検証不足ですみません。確かに、
> 最初からキーボードの『←』『→』のみでチェンジすれば問題ないが、
> 1回でもマウスで『NEXT』や『PREV』をクリックし、その後キーボードを使うと、
> 表示される順番が正常に表示されないみたいです。

jQuery(ver 1.9.1) や jQuery(ver 1.4.2) でこの通りになりました。
jQuery(ver 1.3.2) や jQuery(ver 1.2.3) ではこの不具合は発生しないですね。

テストページに一時的に jQuery(ver 1.9.1) を適応させてあります。
このブログ(公開用)は jQuery(ver 1.2.3) です。

不具合あり テストページ jQuery(ver 1.9.1)
2013年02月末くらいまでこの状態にしておきます。
http://arinogotokuatumarite.blog19.fc2.com/?pc&template=temp_1&q=lightbox

途中から 『←』『→』 を使うと、ページ送り順が変になる。
IE においては 『NEXT』や『PREV』 だけを使っていても 途中から「ページでエラーが発生しました」 と表示される。 + 途中から 『←』『→』 を使うと、ページ送り順も変になる。
※「ページでエラーが発生しました」 は 1.4.2 では表示されないようです。

不具合なし 適応中ページ jQuery(ver 1.2.3)
http://arinogotokuatumarite.blog19.fc2.com/?q=lightbox


なので、適応する jQuery のバージョンは慎重に選んだ方がよさそうですね。
記事にも補足しておきたいと思います。 情報ありがとうございました。

paruparu |  2013/02/11 (月) [ 編集 ] No.1592

コメントを投稿する 記事: jQuery lightBox グループ化を操る3つの方法


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback


この記事にトラックバックする (FC2ブログユーザー限定)

IEによる閲覧時の不具合とか

 もう、メインで使用しているブラウザーを、FirefoxからGoogle Chromeにしてらから1年近く経つし、 IE7からFirefox2に変えた時からでも3年以上経っていて、ほとんどIEは使っていません。  *IE...

備忘LOG遷紀 2012/03/31
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。