Lightbox実装

Lightbox 2のページからDOWNLOAD Lightbox v2.04(ページの真ん中くらい)をクリックしてダウンロードするとlightbox2と言う名のフォルダが現れる、中をのぞくとcssフォルダ、jsフォルダ、imagesフォルダとhtmlファイルがあるのでcssファイル、jsファイル、画像ファイルをアップする事になるのだが

始めに画像ファイルをアップしてファイルのパスを調べておき、cssファイル、jsファイルに記述されている画像までのパスを書き換える。

書き換えるファイルはlightbox.jslightbox.cssで、テキストエディタ等で.gifで検索してパスを書き換えればOK(´∇`)

パスの書き換えが済んだらcssファイル、jsファイルをアップしてファイルまでのパスを調べておく。

ダウンロードしたlightbox2フォルダにあるhtmlを開くと導入の方法が記載してあり、そのなかの下記の箇所をフルパス表記した。

<script type="text/javascript" src="この部分を絶対パスで指定/prototype.js"></script>
<script type="text/javascript" src="この部分を絶対パスで指定/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="この部分を絶対パスで指定/lightbox.js"></script>


<link rel="stylesheet" href="この部分を絶対パスで指定/lightbox.css" type="text/css" media="all" />

この手順でブログにLightbox JSが実装できます。
このブログに実装したLightboxは少しだけ、カスタマイズしてあるので本家とは一部記述が異なります。下記の行がscriptaculous.jsの正しい記述です。
<script type="text/javascript" src="この部分を絶対パスで指定/scriptaculous.js?load=effects,builder"></script>

ネットで調べれば私より上手に解説してあるページがあると思います。

SINGLE IMAGE



ハイビスカス


IMAGE SET



ハイビスカス

蝶

夕日


コメント

非公開コメント

トラックバック

http://tethering.blog84.fc2.com/tb.php/19-d93658d0