今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. なめらかなアニメ効果付きのグライドナビゲーション「Dynamic glide navigation」
  3. ExcelのようにTableが編集できちゃう「Handsontable」
  4. マウスオーバーで画像を拡大「ZoomPic」
  5. 画像スライドショー「jCarousel」オプションたくさんアルヨ

複数の画像をクラウド表示「imageCloud」

スポンサーリンク

複数の画像をクラウド表示するプラグイン「imageCloud」を紹介します。

jQueryプラグイン「imageCloud」

このプラグインを使えば、ブログ(WordPress)なんかでよくみるタグクラウドのように複数の画像をクラウドのように表示することができます。

クラウド化される画像は自動的に適切なサイズ(サムネイルみたいに)に調節してくれます。

また、画像にマウスカーソルをもっていくとその画像が大きく表示されます。

スポンサーリンク

それではデモページの画像クラウドをご覧ください。

「imageCloud」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="imageCloud のデモでーす。">
<title>jQuery Plugin - imageCloud</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.imagecloud.js"></script>
</head>
<body>
<h1>imageCloud のデモ。</h1>
<div id="demo" class="imagecloud">
  <img src="images/01-red.png" alt="1" />
  <img src="images/02-orange.png" alt="2" />
  <img src="images/03-yellow.png" alt="3" />
  <img src="images/04-green.png" alt="4" />
  <img src="images/05-blue.png" alt="5" />
  <img src="images/06-indigo.png" alt="6" />
  <img src="images/07-purple.png" alt="7" />
  <img src="images/01-red.png" alt="8" />
  <img src="images/02-orange.png" alt="9" />
  <img src="images/03-yellow.png" alt="10" />
  <img src="images/04-green.png" alt="11" />
  <img src="images/05-blue.png" alt="12" />
  <img src="images/06-indigo.png" alt="13" />
  <img src="images/07-purple.png" alt="14" />
</div>

<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/imagecloud/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)