Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
LightWindow 2.0を使う それでは実際にLightWindow 2.0を使ってみます。ここでは実画像をphotoフォルダ、サムネール画像をthumbフォルダ、スタイルシートファイルはcssフォルダ、スクリプトファイルはjsフォルダに入れてあります。 本稿の構成 LightWindow 2.0は非同期通信などの処理にprototype.jsライブラリ、エフェクト処理にscriptaculousライブラリを使用しています。これらのライブラリはLightWindow 2.0をダウンロードすると一式で入っていますので新たにダウンロードする必要はありません。LightWindow 2.0を使用する前には、これら2つのライブラリを読み込ませる必要があります。読み込ませる時には必ず最初にprototype.jsライブラリ、次にscriptaculousライブラリの順番で読み込ませます。 <s
ぼちぼち食傷気味のJavaScriptライブラリ「~boxもの」ですが、このLightWindowは画像もiframeもflashも、なんなら動画やpdfまでも簡単に表示できてしまう、なんとも自由度の高いシロモノです。 デモ画面 設置方法も一連のLightBoxたちと同じで、jsファイル(prototype.js、effects.js、lightWindow.js)とcssファイル(lightWindow.css)を読み込んだら、後は<a>タグに属性を指定するだけです。 サンプルはこんな感じ 動作も軽く、全体的に扱いやすいです。
下準備 1:Lightwindowスクリプトをこちらからダウンロードします。 2:以下のソースコードを<head>内に記述し、必要な.jsと.cssファイルを読み込みます。 (読み込み元の階層によっては、lightWindow.js内の画像読み込みのパスを書換える必要があります) <!--Lightwindowスクリプト開始--> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightWindow.js"></script> <link rel="styleshee
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く