East of R134 元(仮)
<< 201706||01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30  >>
Index[Web]JUGEM/Blog Lightbox JS v2.0を導入 

Lightbox JS v2.0を導入

JUGEMでは.gif/.jpg/.png拡張子のファイルしかアップロードができないので外部呼出し可のサーバーが必要。幸い、普通にサイトをやっているので有料サーバー有り。ということ、以下メモ。

 ファイルを入手
まずLightbox JS v2.0(別窓)に行き、DOWNLOADからファイルをダウンロードする。

 解凍
圧縮されているので解凍ソフトを使って、解凍する。

 書き換え
jsフォルダ内lightbox.jsとcssフォルダ内lightbox.cssの画像URLに書き換えが必要なので、相対パスから絶対パスに書き換える。
lightbox.js l.62,63
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
lightbox.js l.199
<img src="images/loading.gif">
lightbox.js l.212
<img src="images/close.gif">
lightbox.css l.48
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
lightbox.css l.53,54
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
この合計7箇所を書き換える。※追加箇所
lightbox.js l.62,63
var fileLoadingImage = "http://[設置するURL]/images/loading.gif";
var fileBottomNavCloseImage = "http://[設置するURL]images/closelabel.gif";
lightbox.js l.199
<img src="http://[設置するURL]/images/loading.gif">
lightbox.js l.212
<img src="http://[設置するURL]/images/close.gif">
lightbox.css l.48
background: transparent url(http://[設置するURL]/images/blank.gif) no-repeat; /* Trick IE into showing hover */
lightbox.css l.53,54
#prevLink:hover, #prevLink:visited:hover { background: url(http://[設置するURL]/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://[設置するURL]/images/nextlabel.gif) right 15% no-repeat; }

 アップロード
FTPソフトなどと使い、サーバーにファイルをアップロードする。

HTMLファイル変更
<head>〜</head>内に以下を記載。
JavaScriptファイル
<script type="text/javascript" src="http://[設置したURL]/js/prototype.js"></script>
<script type="text/javascript" src="http://[設置したURL]/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://[設置したURL]/js/lightbox.js"></script>
cssファイル
<link rel="stylesheet" href="http://[設置したURL]/css/lightbox.css" type="text/css" media="screen" />
ここでもまた相対パスではなく、絶対パス。
またcssファイルは直接テンプレートのcssファイルにコピー&ペーストも可能。その場合はこの項目のcssの処置は必要なし。

投稿時
最後に、エントリの投稿時に
<a href="[画像URL]" rel="lightbox"><img src="[画像URL]" alt="" border="0" class="pict" /></a>
rel="lightbox"を忘れないように。

コダミタカ * Category of [Web]JUGEM/Blog*1 Comments * 1 Trackbacks * 
Check
このエントリーをはてなブックマークに追加
Background Photo Material by ©FlashNatural

同じカテゴリの記事

    【JUGEM】ツリー化スクリプトver.5(2016.01.09)
    【JUGEM】個別編集ページへのリンク(2014.11.02)
    【JUGEM】JUGEMdress(2011.01.02)
    【JUGEM】パンくずナビもどき(2009.11.21)
    【JUGEM】独自タグ50個追加に伴うscriptの修正(2009.11.20)
Index- スポンサーサイト 

スポンサーサイト


スポンサードリンク * Category of -*0 Comments * 0 Trackbacks * 
Check
このエントリーをはてなブックマークに追加
Background Photo Material by ©FlashNatural
Trackback
Trackback URL :
ご利用の前にこちら(別窓)を一読ください。

前から興味があって、ずっと導入したかったLightbox。 ついに導入してみました。 Lightboxってなんのこと?と言う方は、下の写真をクリックしてみて下さい。 (ただし、JavaScriptが利用できる環境に限ります) まぁあれですね。Web2.0風ですよね。
飛行機が好きな美濃焼エバンジェリストのBlog at 2007/05/14 (Mon)18:10

Comment by Facebook
Comment
  • 2008
  • 04.26
  • [Sat]
  • 17:25
  • -
管理者の承認待ちコメントです。

ご利用の前にこちら(別窓)を一読ください。







About
元 (仮) 2007.01.01改名。
読了の書籍メモ(2004.03〜+α)⇒946冊。
JUGEM改造は[Web]JUGEM/Blogから。
海外ドラマメモ有り。※本国放送ネタ有り⇒ネタバレ有り。
書籍メモにBL(BoysLove)的内容を含むものもあります。苦手な方、ご注意下さい。
2008.11.04から写真の表示方法変更に伴い携帯電話からの写真閲覧ができない場合がありますが、表示させる方向を考えてはいません。

過去のはこちらから
Twitter
Pick Up Entries

New Entries
Entries
Comments
Trackbacks
Category
Archives
Links
Blog People
BL×B.L. People
BL×B.L. People
BL NOVELS TB
BL COMICS TB
Ranking


Others

  • RSS feed meter for http://koda.jugem.cc/
  • あわせて読みたい
  • SEO対策My Zimbio

adadadadadad

▲Page Top

アクセスランキング