2009年05月22日

SeesaaブログでLightbox!

Lightbox 2
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

画像イメージのリンクを、ページを移動させることなく、
グラフィカルに表示させるスクリプト「Lightbox」。

Seesaaブログで利用できるかな…?
試してみました…できました。
ちょっと長くなりますが、やり方を書いておきます。

※予め、これをする前の準備として、
「マイブログ-設定-ブログ設定-画像詳細ページ」の項目が、
「表示する」の場合は「表示しない」に設定変更してから、
ブログを最新の情報に更新してください。

1: Lightbox 2のサイトへ。
ページの少し下がったあたりにある「DOWNLOAD」を押して、
zipファイルをダウンロードする。

2: 手に入れたzipを解凍し、imagesフォルダにある、
prevlabel.gif、nextlabel.gif、loading.gif、closelabel.gif
の4つのファイルがあることを確かめたら、
マイ・ブログ-記事投稿-ファイルマネージャでアップロード。
(デフォルトの「image」ディレクトリに置きます)
各gifファイルのURLをメモ帳などにコピーしておく。
(このブログの場合、gif画像のURLは↓のようになる。
https://act2furoku.up.seesaa.net/image/ファイル名.gif)

3: jsフォルダ内の、lightbox.jsをメモ帳等で開く。
(できればスクリプトが編集できるエディタの方が見易いです)
「LightboxOptions」以降にある2箇所、

fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

右側の''で囲まれた部分を先ほどアップロードした、
対応するgifファイルのURLに置き換えて保存。

4: 編集済みのlightbox.jsを含めた、
jsフォルダ内の5つのスクリプトファイルをアップロード。
(オプションの項目からjsファイルをアップするディレクトリを、
デフォルトの「image」から「js」にする。念のため)
アップロード先のURLをメモ帳等に控える。
(このブログの場合、jsファイルのURLは↓のようになる。
https://act2furoku.up.seesaa.net/js/ファイル名.js)

5: cssフォルダ内のlightbox.cssを同じ要領でアップロード。
ここではアップ先のディレクトリを「css」にした。
(このブログの場合、cssファイルのURLは↓のようになる。
https://act2furoku.up.seesaa.net/css/ファイル名.css)

6: Seesaaのページからマイブログ-デザイン-HTMLを選択。
今使用しているHTMLの編集を選び、以下をheadタグ内に追加。
各ファイルのURLは、先ほどアップしたURLに置き換えてください。

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

念のため、編集後にブログを最新の情報に更新しておく。

7: 書いた記事の画像リンクのaタグ内に、
rel="lightbox" を加える。target属性は一応外す。
ちなみにtitle属性を加えると、つけたタイトルが下に出ます。

8: 結果↓

しろ太

(注:現在はjQuery用のlightboxを使用しています。
jQueryを利用したlightboxはこちらの記事をご参考に)
というわけで…かなり長くなりましたが、以上で設定完了です。
描画速度等、細部の設定を変えてみるのも良いかもしれません。


posted by garni at 04:14 | Comment(6) | TrackBack(0) | IT関連 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
はじめまして、seesaaブログをやってるyuckeyと申します。
こちらのページを参考に導入しようと試みたんですが、6番の『今使用しているHTMLの編集を選び』というところがわかりません。
デザイン→HTML→と選ぶと、デフォルトHTML 適用という画面しか出ません。
画面の内容が変わっているのでしょうか?

できたらご教授いただけないでしょうか?
Posted by yuckey at 2010年03月27日 16:39
>>yuckeyさん
はじめまして、拙ブログを参考にしてくださりありがとうございます。

デフォルトHTMLのみを使用している場合は、
一覧の右上にあるリンク「HTMLを追加」から編集画面へ移動できます。
https://blog.seesaa.jp/pages/my/blog/cms/template/regist/input?free_edit=1
URLは上記になります。
説明足らずで失礼しました。
Posted by gar at 2010年03月27日 21:48
garさん

早速のご回答、ありがとうございました。

仰る通り、自分なりにやってみたのですが、
lightboxが反映されることはありませんでした(泣)

HTMLをまったく理解してない初心者の身には、ハードルが高すぎたようです・・・

せっかく回答してくれたのに申し訳ありません。
Posted by yuckey at 2010年03月28日 10:40
>>yuckeyさん
いえ、とんでもありません、お力になれなくて申し訳ないです。
手順としてはjQuery版のlightBoxの方が簡単なので、
もし良ければ試してみてください。
わからない点ありましたら、お気軽にコメント頂ければ。
Posted by gar at 2010年03月29日 02:34
はじめまして。ひないぶと申します。
この数日間、seesaaにlightboxを設置しようと試行錯誤していますが、なかなかうまく動いてくれません。
自分のPCだと正常に動くのですが、seesaaにアップするとなぜか途中で読み込みkが止まってしまいます。
何か考えられる原因はありますか?
これだけでは分かりにくいかと思いますが・・・。
もし、思い当たる節がございましたら教えてください。
よろしくお願いいたします。
Posted by ひないぶ at 2011年03月30日 01:20
>>ひないぶさん
初めまして、コメントありがとうございます。
現在、こちらではjQuery版のlightboxを使用しています。http://act2furoku.seesaa.net/article/121757500.html
上記の記事に書いた方法では現在も問題なく動作しており、
アップするファイルも少なめで設定も若干簡易になってますので、
差し支えなければ、jQuery版の方を試されてみてはいかがでしょうか。

あまり的確なお答えになってなくて心苦しいのですが、
よろしくお願いいたします。
Posted by garni at 2011年04月02日 14:14
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。