jQueryのギャラリー/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

ギャラリーjquery-1.3.2.min.js

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link type="text/css" rel="stylesheet" href="style.css" /> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="jquery.timers-1.1.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#photos').galleryView({
			panel_width: 666,
			panel_height: 400,
			frame_width: 100,
			frame_height: 100
		});
	});
</script>

</head>

<body>
<div id="photos" class="galleryview">
  <div class="panel">
     <img src="1.jpg" /><!--パネル画像--> 
    <div class="panel-overlay">
      <h2>title1</h2><!--キャプションのタイトル-->
      <p>Comment</p><!--キャプションのコメント-->
    </div>
  </div>

  <div class="panel">
     <img src="2.jpg" /><!---->
    <div class="panel-overlay">
      <h2>title2</h2>
      <p>Comment</p>
    </div>

  </div>
  <div class="panel">
     <img src="3.jpg" /> 
    <div class="panel-overlay">
      <h2>title3</h2>
      <p>Comment</p>

    </div>
  </div>
  <div class="panel">
     <img src="4.jpg" /> 
    <div class="panel-overlay">
      <h2>title4</h2>
      <p>Comment</p>

    </div>
  </div>
  <div class="panel">
     <img src="6.jpg" /> 
    <div class="panel-overlay">
      <h2>title5</h2>
      <p>Comment</p>

    </div>
  </div>
  <div class="panel">
     <img src="5.jpg" /> 
    <div class="panel-overlay">
      <h2>title6</h2>
      <p>Comment</p>

    </div>
  </div>
  <div class="panel">
     <img src="7.jpg" /> 
    <div class="panel-overlay">
      <h2>title7</h2>
      <p>Comment</p>

    </div>
  </div>
  <div class="panel">
     <img src="8.jpg" /> 
    <div class="panel-overlay">
      <h2>title8</h2>
      <p>Comment</p>

    </div>
  </div>
  <ul class="filmstrip">
    <li><img src="01.jpg" alt="title1" title="title1" /></li>
    <li><img src="02.jpg" alt="title2" title="title2" /></li>
    <li><img src="03.jpg" alt="title3" title="title3" /></li>
    <li><img src="04.jpg" alt="title4" title="title4" /></li>
    <li><img src="06.jpg" alt="title5" title="title5" /></li>
    <li><img src="05.jpg" alt="title6" title="title6" /></li>
    <li><img src="07.jpg" alt="title7" title="title7" /></li>
    <li><img src="08.jpg" alt="title8" title="title8" /></li>
  </ul>
</div>
</body>
</html>

	GalleryView: A jQuery Content Gallery Plugin — Space for a Name

jQueryを使用したシンプルなフォトギャラリーです。
サムネイルとパネル画像を用意してスクリプトを読み込ませれば簡単に設置することが出来ます。
すでにjQueryを使用していて、他のライブラリのギャラリーを使えない場合など便利だと思います。

セッティング

１．ダウンロード＆セッティング

まず、jQueryをダウンロードしてください。
次に、jquery.easing.1.3.js と jquery.galleryview-1.1.js と jquery.timers-1.1.2.js もダウンロード。
jquery.timers-1.1.2.jsは .txt が付いているので削除してから保存してください。
完了したら全部適当な場所へアップロード。

２．<head>設定

アップしたスクリプトを読み込ませます。

次にギャラリーのサイズを記述します。

#photos はギャラリーのID名です。

３．HTMLマークアップ

まずギャラリーの大枠を記述します。

そしてこの中に、パネル画像とサムネイル画像を記述していきます。
まずは、パネル画像ですが、

<div id="photos" class="galleryview">
<div class="panel">
     <img src="1.jpg" />

    <div class="panel-overlay">
      <h2>title1</h2>
      <p>Comment</p>
    </div>
</div>
</div>

このように class="panel" を付加したdiv要素内に画像とキャプションをレイアウトして記述します。

枚数を増やしたいときは、この panel が付いた div要素を増やしていけばOKです。

次にサムネイル画像ですが、これはパネルの後に ul要素にてレイアウトしていきます。

必ずパネル画像と枚数を合わせてください。
サムネイル画像を増やすときは、li要素を追加していけばOKです。