2008年03月06日 00:33
以前から使っていたLightBox2.0とほとんど同じなのですが
最近Webプログラミングもちょこちょこ始めたので
試しに角が丸くなったLightViewでも導入してみようと頑張ってみた。
画像のプレビューが出てくるJavaScriptですね。
さっそくlightbox2.0で編集した内容を思い出して
テンプレートの設定のhtml編集で以下4行をheadに追加します。
<link rel="stylesheet" type="text/css" href="<%url>file/lightview.css" />
<script type='text/javascript' src='<%url>file/prototype.js'></script>
<script type='text/javascript' src='<%url>file/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='<%url>file/lightview.js'></script>
lightview2.0.2、Scriptaculous 1.8.1をダウンロードして解凍します。
Prototype 1.6.0.2を右クリックで対象保存しちゃってください。
lightview2.0.2.zipを解凍後、lightview2.0.2/js/のlightview.jsに手を加えます。
19行目にある
images: '../images/lightview/'
を
images: '/'
にして保存します。
そしてFC2のアップロード機能を使って、以下のファイルをアップロードします。
・lightview2.0.2/image/lightviewの中の画像全部
・lightview2.0.2/css/のlightview.css
・lightview2.0.2/js/のlightview.js
・scriptaculous-js-1.8.1/src/scriptaculous.js
・scriptaculous-js-1.8.1/src/effects.js
あとprototype-1.6.0.2.jsをprototype.jsとしてアップロードします。
最後にプレビューを使いたいリンクタグにclass='lightview'を追加して終了。
スティで盾とったぞおおおおおおお画像で試してみますとこうなります。

でも動作がすこし重め??Firefoxではスムーズ、IE6,7では少しカクカクな感じ。
まあ本家も同じだったのでそういうものなんでしょう・・・。
javascript初心者がいじったので間違ってたらつっこみをc⌒っ-ω-)っ
○詳しくはこちら
http://www.nickstakenburg.com/projects/lightview/
※IEでは画像が↑のほうに表示されてしまうみたいデス(´・ω・`)
最近Webプログラミングもちょこちょこ始めたので
試しに角が丸くなったLightViewでも導入してみようと頑張ってみた。
画像のプレビューが出てくるJavaScriptですね。
さっそくlightbox2.0で編集した内容を思い出して
テンプレートの設定のhtml編集で以下4行をheadに追加します。
<link rel="stylesheet" type="text/css" href="<%url>file/lightview.css" />
<script type='text/javascript' src='<%url>file/prototype.js'></script>
<script type='text/javascript' src='<%url>file/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='<%url>file/lightview.js'></script>
lightview2.0.2、Scriptaculous 1.8.1をダウンロードして解凍します。
Prototype 1.6.0.2を右クリックで対象保存しちゃってください。
lightview2.0.2.zipを解凍後、lightview2.0.2/js/のlightview.jsに手を加えます。
19行目にある
images: '../images/lightview/'
を
images: '/'
にして保存します。
そしてFC2のアップロード機能を使って、以下のファイルをアップロードします。
・lightview2.0.2/image/lightviewの中の画像全部
・lightview2.0.2/css/のlightview.css
・lightview2.0.2/js/のlightview.js
・scriptaculous-js-1.8.1/src/scriptaculous.js
・scriptaculous-js-1.8.1/src/effects.js
あとprototype-1.6.0.2.jsをprototype.jsとしてアップロードします。
最後にプレビューを使いたいリンクタグにclass='lightview'を追加して終了。
スティで盾とったぞおおおおおおお画像で試してみますとこうなります。

でも動作がすこし重め??Firefoxではスムーズ、IE6,7では少しカクカクな感じ。
まあ本家も同じだったのでそういうものなんでしょう・・・。
javascript初心者がいじったので間違ってたらつっこみをc⌒っ-ω-)っ
○詳しくはこちら
http://www.nickstakenburg.com/projects/lightview/
※IEでは画像が↑のほうに表示されてしまうみたいデス(´・ω・`)


最近のコメント