最近の記事

スポンサーサイト

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

Lightbox→Slimbox変更(画像ギャラリー対応)&設置方法

Lightboxを最新版にしたら動作がおかしくなった事などあって、Lightbox互換のSlimboxに変更しました。FC2ブログへの設置方法を、備忘録的にメモ。

Lightboxを一応解説すると、「サムネイルをクリック→同じウィンドウで拡大画像を表示する」という、あれです。下の画像をクリックしてみてください。
3年前の待機モードの長門有希 メガネかけてない長門有希
画像のグループ化や、拡大画像の下に解説を入れたりも出来るので、「イラスト系サイトでギャラリーみたいなのを作る」といった時に結構便利かと。→Lightbox2公式サイト


Lightboxがうまく動かない

古いバージョンから最新版(v2.04)にしてみたら、いろいろおかしくなってしまった。

一部画像でLightboxが全く動作しない
これは自分のミス。
Lightboxを有効にする場合、 <a rel="lightbox" href="拡大画像のURL"><img src="サムネイル画像のURL" /></a>という風に書かなきゃいけないけど、一部画像で「rel="Lightbox"」という風に、Lを大文字にしてた。
古いバージョンは大文字と小文字を区別しなかったけど、v2.04は区別するようになってたので、大文字で始めていたものが動かなくなってた。

IE7とIE8でKB927917エラーが出る
特にIE7は重症で、ページが表示されない。
927917エラーはLightboxに限らず発生しうるエラーで、JavaScriptを書く場所・内容・他のJavaScriptとの干渉などが原因です。
いろいろ回避策はあるけど、Lightbox2自体の更新がなかば止まっているようだし、Slimboxに乗り換える事に。


Slimbox(jQuery版)

2007年頃はLightbox互換スクリプトがたくさん作られてたけど、流行も一段落ついて、更新されなくなったものが多いです。
今回選んだのは、SlimboxのjQuery版。以前はmootools版だけだったけど、久しぶりに見に行ったらjQuery版が出てた。
  • Lightboxとほぼ完全に互換性があり、同じ書式で動く
  • ファイル数が少ないし、ファイルサイズも小さめ
  • FC2ブログで使う場合、ファイル編集がslimbox2.cssだけで済む(Lightboxはlightbox.jsとlightbox.cssを編集する必要がある)
  • jQueryが使える
  • 地道に更新が続いてる


FC2ブログに設置

Slimbox2公式サイトから最新版(2009/05/22時点で2.02)をダウンロードし、展開。

アップロード+slimbox2.css編集
  1. jsフォルダ内のslimbox2.jsをアップロード
  2. cssフォルダ内にある画像(closelabel.gif、loading.gif、nextlabel.gif、prevlabel.gif)をアップロード
  3. cssフォルダ内のslimbox2.cssを開き、画像パスをアップロードした画像のURLになるよう、書き換え
  4. slimbox2.cssをアップロード
slimbox2.cssの編集箇所は、loading.gif、prevlabel.gif、nextlabel.gif、closelabel.gifを指定している部分。 background: #fff url(http://blog-imgs-xx.fc2.com/e/x/a/example/loading.gif) no-repeat center;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/prevlabel.gif) no-repeat 0 15%;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/nextlabel.gif) no-repeat 100% 15%;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/closelabel.gif) no-repeat center;


FC2ブログテンプレートの書き換え
jQueryは、Google AJAX Libraries APIを利用。
jQuery公式サイトからファイルを手に入れてアップロードしてもいいけど、Google AJAX APIを使う方が簡単です。
で、テンプレートの<head></head>内に、以下みたいな感じで書く。
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<script type="text/javascript" src="http://blog-imgs-xx.fc2.com/e/x/a/example/slimbox2.js"></script>
<link rel="stylesheet" href="http://blog-imgs-xx.fc2.com/e/x/a/example/slimbox2.css" type="text/css" media="screen" />
slimbox2.jsとslimbox2.cssのパス(緑色の部分)は、アップロードしたURLに書き換えてください。


使い方

基本書式
拡大画像へのリンク(aタグ)に、『rel="lightbox"』と書く。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> 拡大画像の下に画像のタイトルをつけたい場合は、『title="タイトル名"』を書く。

グループ化
aタグで呼び出す画像をグループ化する事で、簡単な画像ギャラリーを作れます。
グループ化したい画像へのリンクに、『rel="lightbox-グループ名"』または『rel="lightbox[グループ名]"』と書く。
<a href="images/image-1.jpg" rel="lightbox-cats">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-cats">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-cats">image #3</a>

グループはいくつでも作れます。ただし、1つの画像を複数のグループに入れる事は出来ません。

『lightbox[グループ名]』はXHTMLでは不適切なので、公式サイトでは『lightbox-グループ名』を推奨してます。
本家Lightboxとの互換性にあまりこだわらないなら、『lightbox-グループ名』の方でよいかと。

TAG :
JavaScript
Web制作
Lightbox
Slimbox
jQuery

トラックバック


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

slimbox2を使う。

ちょっとお試し。 ↓の画像をクリックすると、同じウィンドウ内に表示されます。

コメントの投稿

ありがとうございます

ものすごく勉強になります!
おかげでやり方がわかりました!
わかりやすい解説本当にありがとうございますm(_ _ )m

※ちばこちばおさま
ありがとうございます。

「クリックすると画像が拡大する」というスクリプトは沢山見ていったんですが、書式や操作方法が他と全然違ったり設置が大変だったり…といろいろあって、最終的にLightboxそっくりで設置が簡単なSlimboxにしました。

実際のところ、ブログの記事で使う場合は「画像の拡大縮小」と「簡単なグループ分け」が出来れば十分だと思っています。

ありがとうございます。

自分のサイトでも、Lightbox2 や Fancyboxなどを試しましたが、個別記事ページにしか反映しないので、対処法をさがしていました。こちらの記事を参考にしたら、うまく動作するようになりました。
Private :

BD/DVD/CD
リンク(公式サイトとか)
カテゴリ
ブログ内検索
最近のコメント
プロフィール

せれすと

Author:せれすと
アニメ:涼宮ハルヒの憂鬱、ガールズ&パンツァー


トラックバックやリンクは、自由に張ってください。

<推奨ブラウザ>
◎Opera/Firefox系 ○Chrome系/Safari △IE
主に使っているのは、OperaとFirefoxです。

ブロとも申請フォーム

この人とブロともになる

RSSフィード
タグリスト

アニメ マクロスF 涼宮ハルヒの憂鬱 いとうのいぢ ななついろ★ドロップス コードギアス 宙のまにまに らき☆すた OP 視聴予定 ゲーム オリコン とある科学の超電磁砲 けいおん!! ED PS2 WORKING!! 挿入歌 ソ・ラ・ノ・ヲ・ト AngelBeats! 漫画 坂本真綾 ながされて藍蘭島 乃木坂春香の秘密 はなまる幼稚園 コミック ブログ投票 瀬戸の花嫁 とある魔術の禁書目録 アニメ作風考察 アニメ誌 化物語 true_tears ARIA ハヤテのごとく! CMS NewType サントラ ゆるゆり 涼宮ハルヒの戸惑 動画 WordPress バスカッシュ! スクールデイズ 灼眼のシャナ 黒執事 DVD マクロス けいおん! 魔法少女まどか☆マギカ 涼宮ハルヒちゃんの憂鬱 とある魔術の禁書目録II キミキス 狼と香辛料 ガンダム00 インフィニット・ストラトス 俺の妹がこんなに可愛いわけがない 侵略!?イカ娘 侵略!イカ娘 ベン・トー 相関図 ロザリオとバンパイア エヴァンゲリオン この青空に約束を たまゆら 宇宙をかける少女 かんなぎ BD ブログ フィギュア 神曲奏界ポリフォニカ シゴフミ ストライクウィッチーズ 逆境無頼カイジ コミックス 鉄腕バーディー もってけ!セーラーふく セキレイ MODx 黒神 さよなら絶望先生 Firefox ユニゾンシフト PSP WORKING´!! Little_Lovers_2nd YouTube みつどもえ sola ポリフォニカ クレイモア Drupal ヱヴァンゲリヲン ライトノベル 京アニ ゼロの使い魔 侵略!イカ娘 DS ベルセルク もってけ!セーラーふく スケッチブック ロロナのアトリエ カイジ 長門有希 CD 君が主で執事が俺で しゅごキャラ! ねんどろいど 破天荒遊戯 電撃文庫 涼宮ハルヒ ニュース 声優 坂井泉水 バイク 撲殺天使ドクロちゃん ユーチューブ どきどき魔女神判 歌詞 字幕.in 字幕 地球へ 絶対可憐チルドレン 小岩井フローラ ご愁傷さま二ノ宮くん ef プリズム・アーク レンタルマギカ ブルードロップ バンブーブレード 京都アニメーション スカイガールズ 色彩 こどものじかん ドラゴノーツ RD潜脳調査室 水樹奈々 生徒会の一存  聖地 Google日本語入力 Newtype バカとテストと召喚獣 ゴンゾ 科学 Lightbox Web制作 JavaScript Slimbox jQuery 青い花 ヒャッコ 聖地巡礼 オオカミさんと七人の仲間たち フラクタル お兄ちゃんのことなんかぜんぜん好きじゃないんだから 夢喰いメリー 日記 ロウきゅーぶ! 神様ドォルズ 森田さんは無口 ヨスガノソラ ミルキィホームズ アマガミSS 祝福のカンパネラ 学園黙示録 あそびにいくヨ! 神のみぞ知るセカイ 生徒会役員共 けいおん Opera PV PC Movable_Type 僕は友達が少ない カドゥン firefox ロボテック H2O FC2ブログ ゴルゴ13 windows_xp ブログ検索 ダ・カーポII 灼眼のシャナII DokuWiki CLANNAD ヴィンランド・サガ 薬師寺涼子 まりあ†ほりっく ホワイトアルバム アルバム 明日のよいち! アニソン RIDEBACK ラノベ 同人誌 鉄のラインバレル アニメディア スレイヤーズ アニメージュ イラスト とらドラ! ジブリ インターネット 

BD/DVD
Twitter
今やっていること
メールフォーム

名前:
メール:
件名:
本文:

2007-04-11頃から
月別アーカイブ
このページのトップへ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。