2009年6月8日

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で何故か表示されないので、
 アップロードの度にこの部分は削除しましょう。
 
以上で完了です。
試される方はがんばってください! 


0 件のコメント:

コメントを投稿