ありのごとくあつまりて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? | ↑ ページ先頭へ ↑ |

rel="lightbox" を入れずに jQurey lightBox を

2010/07/12 (月)  カテゴリー: ブログカスタマイズ上級

以前の記事 jQuery lightBox グループ化を操る3つの方法 で紹介した方法。 jQuery版 の lightBox は rel="lightbox" を入れなくてもOK(不要) なんだと勘違いしていた私。

このサイトでは lightBox で開きたい画像リンクには rel="lightbox" を入れているので、問題なかったのですが、先日 ある方のサイトで rel="lightbox" を入れずに lightBox を適応させてみたところ、画像クリックで lightBox が機能したものの、範囲内の <a> 全てが反応してしまい、読み込み状態のままになり不具合があることが判りました。

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

テンプレートの構造

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

[ 参考 : ブログやサイトで使う写真や画像を自動的にLightBoxで表示する方法 | THE HAM MEDIA ] ← この方法を先日のソースに適応させると、以下のようになります。

rel="lightbox" を入れずに、範囲内全ての 画像リンク で lightBox をグループ化して適応する方法

<script type="text/javascript">
$(function(){
$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
.addClass("lightbox");
$('#content a.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より前のバージョンでもこの方法で問題ないようです。

画像のリンクに class="lightbox" が自動付与された状態になります。
#content 部分に、記事全体を囲っているような ID を指定すればOKです。(上図参照)


rel="lightbox" を入れずに、記事毎全ての 画像リンク で lightBox をグループ化して適応する方法 (FC2ブログ用)

<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>

画像のリンクに class="lightbox" が自動付与された状態になります。
<!--topentry--> ~ <!--/topentry--> 部分が 記事数分 繰り返されるので、テンプレートの <%topentry_body>(記事本文が入る変数) 部分を id="entry_no<%topentry_no>" で囲っておけば、記事毎のグループ化 にも対応できます。 (上図参照)

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

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

<%topentry_body>

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


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

先日の記事も修正済みですので、詳細 や 基本的な設定方法 は jQuery lightBox グループ化を操る3つの方法 を参照してください。

また、この方法は jQuery版 lightBox での方法ですが、 Lightbox 2(prototype版), Lightbox plus, Lightbox JS でも rel="lightbox" 自動付与の方法 はあるようです。

既にたくさんの記事 (画像リンク) があり、これから lightBox を使ってみたいようなケースでは rel="lightbox" を1つずつ追加するより 簡単な方法 かもしれませんね!

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

スポンサーリンク

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

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

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

-0 Comment

コメントを投稿する 記事: rel="lightbox" を入れずに jQurey lightBox を


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

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

Trackback

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