クイックスタート

このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに LightBox ウィジェットを追加する方法について学びます。

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「Wijmo CDN」の CDN ファイルを参照してください。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

参照	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script>

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。<div> 要素はウィジェットを作成し、その id 属性を jQuery で呼び出して初期化します。hyperlink 要素と image 要素は、表示する画像を設定します。

ドロップダウンからマークアップをコピーして body タグ内に貼り付けます

マークアップ	コードのコピー
<div id="lightbox1" class=""> <a href="Images/sports1.png" rel="wijlightbox[stock];player=img"> <img src="Images/sports1.png" title="Sports 1" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href="Images/sports2.png" rel="wijlightbox[stock];player=img"> <img src="Images/sports2.png" title="Sports 2" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href="Images/sports3.png" rel="wijlightbox[stock];player=img"> <img src="Images/sports3.png" title="Sports 3" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href="Images/sports4.png" rel="wijlightbox[stock];player=img"> <img src="Images/sports4.png" title="Sports 4" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " /></a> </div>

<head> タグ内の参照の下に次のスクリプトを追加して、ウィジェットを初期化し、ボタンとコントロールを表示し、コントロールの位置を設定し、選択した画像をモーダルボックス（画像が開いている間はページを操作できない）に表示します。

ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます

<head> タグ内のウィジェットを初期化するためのスクリプトの上で、CSS を使用してウィジェットのサイズを設定します。
ドロップダウンからマークアップをコピーして head タグ内に貼り付けます
スタイル
コードのコピー

<style type="text/css"> #lightbox1 { width: 640px; } </style>
HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。画像をクリックすると、大きなサイズで表示されます。また、alt テキストがキャプションテキストとして表示されます。

関連トピック