要素の後ろに挿入しています。要素にクリックイベントを設定しています。#over_layer(拡大画像を表示する領域)が非表示かどうかの条件判定で、非表示の場合それ以降を実行します。#bg_layer(半透明の領域)を表示します。属性から取得しています。13行目、14行目はブラウザの高さと幅を取得しています。15行目から24行目では、ブラウザの高さと幅と、拡大画像の高さと幅を比較して、表示する拡大画像のサイズを調整しています。要素と「閉じる」ボタンを挿入しています。メソッドで拡大画像を表示する領域(#over_layer)の位置(marginTop、marginLeft)を調整します。拡大画像の横幅の半分のネガティブマージンを設定すると、画面中央に配置できます。});画像の先読み(プリロード)拡大表示する画像の先読み(プリロード)しておくと、拡大画像の表示がスムーズになります。属性に画像のパスが記述されているのでそれを利用します。属性に画像のパスを設定することで拡大表示する画像のプリロードができます。属性に記述しましたが、以下のサンプルでは拡大画像の幅と高さをスクリプトを使って取得します。記述されていない場合は少し工夫が必要です。使って画像を先読みしてその画像のオリジナルのサイズを取得するようにします。使った先読みでは、画像のサイズは取得できません。オブジェクトを使い、下記のようにすることで、画像の元の(オリジナルの)サイズを取得することができます。値の設定は最後に記述することに注意してください。"images/sample.jpg";以下は、画像を先読みして、その際に画像のサイズを取得する記述です。配列に要素を付け加えるメソッドです。使って先読みをします。文を使って、先読みしようとしてもうまく行かないので注意が必要です。記述では、画像の高さと幅は画像の先読みの際に取得した値を利用しています。$(this).index('a.myLbox');でそれぞれの画像に対応するインデックスを取得しています。モーダルウィンドウのサンプル2スライドショースライドショーのサンプルです。要素に写真を表示します。最初に表示する写真を配置しておき、絶対配置に設定します。要素には、写真のタイトルを表示します。属性の値を使用します。要素にスライドショーで使用する写真を記述しておき、この部分は非表示にしておきます。画像を使用しています。/*---基点とします。要素のインデックスを格納します。要素のラップ集合です。表示する画像要素の総数になります。スライドショーを表示するための関数です。使って、取得しています。要素の前に、次に表示する画像を配置します。要素は絶対配置を指定しているので、2つの画像は完全に重なって配置されます。(現在表示されている画像が手前になります)11行目は、画像のタイトルをフェードインで表示しています。フェードアウトして非表示にしていきます。これにより、10行目で配置された画像が少しずつ表示されて、クロスフェード効果ができます。使って削除しています。15行目は、次に表示する画像のインデックスを1つ増やしてします。使って繰り返し処理するように設定しています。20行目、21行目は、ページを閉じた際に、一応念のため、繰り返し処理を停止しています。以下は、ここまでの記述で表示されるスライドショーのサンプルのリンクです。使って以下のように記述することも可能です。続いて、再生ボタンやそれぞれの画像に対応する丸いアイコンを追加します。