2009/06/22

bloggerに無理やりLightbox Plusを実装

treffen @ alt web: bloggerに無理やりLightbox Plusを実装
bloggerに無理やりLightbox Plusを実装
bloggerでLightboxを実現させる方法のmemoです

bloggerでLightboxを使うには、色々と面倒なのですが、
Google Sites を使って無理やり実装してみました。

■参考Link

 参考文献がなかったら出来てません・・・。大感謝。

 Lightbox+
 http://serennz.sakura.ne.jp/toybox/lightbox/?ja

 Go!Go! Ubuntu--Blogger de Lightbox
 http://55ubuntu.blogspot.com/2008/03/blogger-de-lightbox.html

 Lightbox Plus で画像を同一画面にオーバーレイして表示
 http://www.drk7.jp/MT/archives/001029.html


■方法

1.Lightbox+を手に入れる

 Lightbox+をOtaniさんに感謝しながらダウンロード。
 http://serennz.sakura.ne.jp/toybox/lightbox/?ja

2.画像ファイルをgoogle siteへアップする

 サインインしていない方はこちらから。
 http://sites.google.com/site/
 
 ホームにいきなり添付ファイルとしてアップして問題ないです
 
3.lightbox_plus.jsを編集

 (1) 画像ファイルのURLをgoogle siteへアップしたものへ書き換える
 
  例)  
  ------------------------------------------------------------
  Event.register(window,"load",function() {
   var lightbox = new LightBox({
   loadingimg:'http://sites.google.com/site/XXXXX/Home/loading.gif',
  ------------------------------------------------------------

 (2) 必要に応じてrel属性を使用しない方法を実装
 
  Lightbox Plus で画像を同一画面にオーバーレイして表示
  http://www.drk7.jp/MT/archives/001029.html
  
  上を参考に編集。

4.lightbox.cssの編集

 2-(1)同様に画像ファイルのパスを書き換える。
 
5.jsファイルの拡張子を変更して、Google siteへアップロード(重要)

 google siteは、jsファイルのアップロードが出来ないので、
 拡張子を変更する必要があります。

 
 lightbox_plus.js ⇒ lightbox_plus
 spica.js ⇒ spica
 
 アップロード先は画像ファイルと同じ場所でよいです。
 
5.Bloggerのテンプレートへ追記する

 HTML の編集 > レイアウトから、head内に下記項目を追記します。
 スクリプトのパスは、google siteへアップしたパスを指定する。

 ・スクリプトが貼れないので画像で。
 

6.Bloggerでアップした画像ファイルのURLを一部変更する(重要2)

 bloggerでアップした画像は、アンカー部分のURLに「s1600-h」のように、
 余分なパスが入ってしまう。
 
 例)http://1.bp.blogspot.com/~~/s1600-h/XXX.jpg
 
 この部分を消さないと、Lightboxで何故か表示されないので、
 アップロードの度にこの部分は削除しましょう。
 
以上で完了です。
試される方はがんばってください!