olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. ギャラリー>
  4. ポラロイド写真を並べたようなギャラリー

ギャラリーjQuery

ポラロイド写真を並べたようなギャラリー

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Polaroid Photo Viewer with jQuery and CSS3</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="polaroid">
	<img src="images/01_colosseum.png" alt="Colloseum" />
	<p>Coloseum in Rome</p>
</div>
<div class="polaroid">
	<img src="images/02_vatican.png" alt="Vatican" />
	<p>Vatican</p>
</div>
<div class="polaroid">
	<img src="images/03_forum_romanum.png" alt="Forum Romanum" />
	<p>Forum Romanum</p>
</div>
<div class="polaroid">
	<img src="images/04_fiat_500.png" alt="Fiat 500" />
	<p>Fiat 500 - Typical Italian car</p>
</div>
<div class="polaroid">
	<img src="images/05_me_gf.png" alt="Me and my girl in Florance" />
	<p>My girl and me in Florance</p>
</div>
<div class="polaroid">
	<img src="images/06_venetian_gondolas.png" alt="Venetian Gondolas" />
	<p>Venetian Gondolas</p>
</div>
<div class="polaroid">
	<img src="images/07_pizza.png" alt="Pizza" />
	<p>Delicious pizza - <strong>the</strong> Italian food</p>
</div>
<div class="polaroid">
	<img src="images/08_pool.png" alt="Swimming pool" />
	<p>Swimming pool near our house</p>
</div>
<div class="polaroid">
	<img src="images/09_florence.png" alt="Florence" />
	<p>Bridge in Florence - Ponte Vecchio</p>
</div>
<div class="polaroid">
	<img src="images/10_tower_of_pisa.png" alt="Tower of Pisa" />
	<p>Leaning Tower of Pisa</p>
</div>
</body>
</html>

机の上にポラロイド写真をバラ撒いたようなギャラリーです。
基本的にページ全体を使用するため、コンテンツとしてでなく独立した感じで設置すると良いと思います。
jQueryを使用します。
サンプルはこちらからご覧下さい。

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

サイトへ行き、「SRC」というボタンをクリックして、polaroid_photo_viewer.zip をダウンロードしてください。
それを解凍したら、cssフォルダとjsフォルダをアップロードしておきます。

２．<head>設定

アップしたファイルを読み込ませます。

<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>

順番とパスに注意して記述して下さい。

３．HTMLマークアップ

一枚のポラロイド写真は、

<div class="polaroid">
    <img src="images/01_colosseum.png" alt="Colloseum" />
    <p>Coloseum in Rome</p>
</div>

というタグ構造で構成されています。
画像とコメントを変更して、これを複製していけば、ポラロイド写真をバラ撒いたようなギャラリーを設置することが出来ます。

関連スクリプト

感想

こういったギャラリーを定期的に差し替えて使用すると、変化があって面白いかもしれませんね。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。