まだデータがありません。
複数の画像をクラウド表示「imageCloud」
当ページのリンクには広告が含まれています。
スポンサーリンク
複数の画像をクラウド表示するプラグイン「imageCloud」を紹介します。
jQueryプラグイン「imageCloud」
このプラグインを使えば、ブログ（WordPress）なんかでよくみるタグクラウドのように複数の画像をクラウドのように表示することができます。
クラウド化される画像は自動的に適切なサイズ（サムネイルみたいに）に調節してくれます。
また、画像にマウスカーソルをもっていくとその画像が大きく表示されます。
スポンサーリンク
それではデモページの画像クラウドをご覧ください。
デモのソース（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>
スポンサーリンク