13時52分はじめに前回の記事で解説したLightbox2を使うと、画像のポップアップやスライドショーが簡単に実行できますが、この他にもプラグインはあります。そこで今回は、Lightbox2と並んで人気のあるColorboxの使用方法を解説します。作業の前提条件は、下記のとおりです。必要なアーカイブをダウンロードし、解凍します。展開されたcolorboxフォルダ中に、example1~5のサンプルが用意されていますので、好みのCSSファイルと、imagesフォルダをコピーします。今回は、example3のCSSとイメージを使用します。..以上で、colorboxフォルダに、colorbox.css、jquery.colorbox.js、jquery.colorbox-min.js、imagesフォルダが揃いましたので、その他のファイルやフォルダは削除しても構いません。CSSファイルの指定Colorboxのスタイルシートを、HTMLファイル中に指定します。720px;">jsファイルの指定とJavaScriptの追加jquery.colorbox.jsを、HTMLファイル中に指定し、Colorboxのロードを行うJavaScriptを追加します。表示する画像ファイルを、HTMLファイル中に指定します。ここでは、以前の記事で使用した画像を指定します。画像を同一グルーブで表示するため、demoクラスを使用して指定するところがポイントです。ここで指定されたクラス名を、上の23行目のようにJavaScriptに指定することで、画像を表示しますので、クラス名とJavaScriptで指定するrel:の値は同一のものを使用します。alt="06"></a>ページを表示して、画像をクリックすると元画像がポップアップ表示され、グルーブ化された画像に左右の矢印によってアクセスできます。</body></html>デモは、019.htmlからご覧頂けます。ファイルは、019.zipからダウンロードできます。