写真の高さなどを自動的にリサイズしてタイル状に並べてくれるjQuery「jMosaic」です。
使い方
使い方は簡単で、jQueryと「jquery.jMosaic.js」を読み込みます。
<script src="js/jquery.js"></script> <script src="js/jquery.jMosaic.js"></script>
CSSを読み込みます。
<link rel="stylesheet" href="css/jquery.jMosaic.css"/>
HTMLは単純にdivで囲み、画像を挿入するだけです。
<div class="pictures"> <img src="img/one.jpg" width="267" height="400"/> <img src="img/two.jpg" width="500" height="350"/> . . . <img src="img/last.jpg" width="400" height="300"/> </div>
jMosaicを開始すれば終了です。
$('.pictures').jMosaic();
写真が複数あるけど、高さが違う場合などに重宝しますね!
執筆者:KIYOTA
関連記事
-
-
スクロールしたら「トップへ戻る」ボタンを表示するプラグインjquery.pageTopButton.js
SPONSORED LINK Wordpressによくある スクロールしたら「トップへ戻る」ボタンを表示するプラグインをいれたけど、 うまく動かなかったので作った方がはやいので作ってみました。 このブ …
-
-
jQueryのaddClassで複数のclassを追加する方法
SPONSORED LINK 下記のようにスペースで区切れば、複数指定できます。 $(‘div).addClass(‘btn btn-default btn-lg’); 簡単ですが、使う機会もなかった …
-
-
SPONSORED LINK jQueryを使っていると、知っているものや、よく使うものしか使わなくて、意外と知らないイベントやセレクタがあったりします。 jQuery Cheat Sheet こちら …
-
-
SPONSORED LINK jQueryでアニメーションなどを行うとインライン要素でstyle属性が追加されますが全て削除したい場合は、 $(‘#area *’) *で#area内の全ての要素を取得 …
-
-
ドロワーメニューの「simple-sidebar」の簡単なサンプル
SPONSORED LINK simple-sidebar スマホなどの、ドロワーメニューの追加で便利な「simple-sidebar」。 サンプル通りに作っても、つまづいたので、備忘録代わりに簡単な …
- PREV
- 料理や食品のフリーフォト「FOODSHOT」
- NEXT
- 仕事をうまく回すには、気をきかせる