レンタルサーバー活用方法｜jQuery

レンタルサーバー活用方法｜jQuery－lightBoxプラグイン

jQueryのプラグインを使用して画像をオシャレに表示してみましょう。

使用するプラグインは「jQuery lightBox plugin」といいます。こちらのページ左「Get the new version」から圧縮ファイルがダウンロードできますので、ダウンロードしておいてください。

このプラグインを使用したサンプルは下になります。画像をクリックしてみて下さい。

ではプラグインを使用してみましょう。

まず圧縮ファイルを解凍します。

「jQuery.lightbox-0.5.min.js」と、CSSファイルの「jQuery.lightbox-0.5.css」を外部ファイルとして読み込み、コードを記述します。

<html>
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" src="jQuery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jQuery.lightbox-0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jQuery.lightbox-0.5.css">
<script type="text/javascript">
<!--
$(function () {
  $('#gallery a').lightBox();
});
// -->
</script>
   :
   :

「jQuery.lightbox-0.5.min.js」は必ず、jQueryの後に記述してください。

そして、解凍したファイルの中にある「images」フォルダを設置してください。

HTML部分は以下のようになります。

<div id="gallery">
  <ul>
    <li>
      <a href="photos/image1.jpg" title="テスト画像1です。">
        <img src="photos/thumb_image1.jpg" width="72" height="72" alt="">
      </a>
    </li>
    <li>
      <a href="photos/image2.jpg" title="テスト画像2です。">
        <img src="photos/thumb_image2.jpg" width="72" height="72" alt="">
      </a>
    </li>
    <li>
      <a href="photos/image3.jpg" title="テスト画像3です。">
        <img src="photos/thumb_image3.jpg" width="72" height="72" alt="">
      </a>
    </li>
  </ul>
</div>

上のサンプルのCSSは以下になります。

#gallery ul {
  list-style-type: none;
  border: solid 1px #555555;
  padding: 5px;
}

#gallery li {
  display: inline;
}

#gallery li a img {
  border: none;
}

もし正常に動作しないようでしたら、jQueryの設置位置、呼び出し、「;」等コードの記述ミスが無いか確認してみてください。

jQueryのプラグインは沢山あるので色々試してみては如何でしょうか。

※このページで紹介しているサンプルは「jQuery 1.2.6」を使用しています。バージョンの違い等により正常に動作しない場合がありますのでご注意ください。

ページの先頭へ