2012.01.26 Thursday
Lightbox
家人が書いているブログにLightboxを入れてあげることに。
最新バージョンをダウンロードしてきます。
http://lokeshdhakar.com/projects/lightbox2/
解凍して、lightbox.jsをテキストエディタで開きます。
http://www.●●●●●●●●/lightbox/images/ を
書き換えます。
ブログのURLではなく、サーバーのURLを入れます。
フォルダ
・css
・images
・js
ファイル
・index.html
を家人が使っているさくらサーバーの
/home/ユーザー名/sblo_files/ブログ名/の配下にアップします。
ヘッダーに以下の行を追加します。
<link rel="stylesheet" href="http://*****/lightbox/css/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="http://*****/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://*****/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://*****/lightbox/js/lightbox.js"></script>
*****部分は自分の環境に合わせて記述します。
ところがprototype.jsがバージョンが合わないのかIE9で
画面が黒くなってしまいます。
prototype.jpは最新バージョンをこちらからダウンロードします。
http://www.prototypejs.org/
これを、http://*****/lightbox/js/に上書きします。
これで完了です。
写真をアップするとき、rel="lightbox" title="タイトル"を
書き足すだけです。
最新バージョンをダウンロードしてきます。
http://lokeshdhakar.com/projects/lightbox2/
解凍して、lightbox.jsをテキストエディタで開きます。
http://www.●●●●●●●●/lightbox/images/ を
書き換えます。
ブログのURLではなく、サーバーのURLを入れます。
フォルダ
・css
・images
・js
ファイル
・index.html
を家人が使っているさくらサーバーの
/home/ユーザー名/sblo_files/ブログ名/の配下にアップします。
ヘッダーに以下の行を追加します。
<link rel="stylesheet" href="http://*****/lightbox/css/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="http://*****/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://*****/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://*****/lightbox/js/lightbox.js"></script>
*****部分は自分の環境に合わせて記述します。
ところがprototype.jsがバージョンが合わないのかIE9で
画面が黒くなってしまいます。
prototype.jpは最新バージョンをこちらからダウンロードします。
http://www.prototypejs.org/
これを、http://*****/lightbox/js/に上書きします。
これで完了です。
写真をアップするとき、rel="lightbox" title="タイトル"を
書き足すだけです。
- | - | trackbacks (0)