FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

jQuery

写真をタイル状に並べてくれるjQuery「jMosaic」

投稿日:

SPONSORED LINK

01
jMosaic

写真の高さなどを自動的にリサイズしてタイル状に並べてくれるjQuery「jMosaic」です。

SPONSORED LINK

使い方

使い方は簡単で、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();

写真が複数あるけど、高さが違う場合などに重宝しますね!

jMosaic

-jQuery

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スクロールしたら「トップへ戻る」ボタンを表示するプラグインjquery.pageTopButton.js

SPONSORED LINK Wordpressによくある スクロールしたら「トップへ戻る」ボタンを表示するプラグインをいれたけど、 うまく動かなかったので作った方がはやいので作ってみました。 このブ …

jQuery

jQueryのaddClassで複数のclassを追加する方法

SPONSORED LINK 下記のようにスペースで区切れば、複数指定できます。 $(‘div).addClass(‘btn btn-default btn-lg’); 簡単ですが、使う機会もなかった …

一覧が見やすい、jQueryのチートシート

SPONSORED LINK jQueryを使っていると、知っているものや、よく使うものしか使わなくて、意外と知らないイベントやセレクタがあったりします。 jQuery Cheat Sheet こちら …

jQuery

jQueryで追加したstyle属性を全て削除する方法

SPONSORED LINK jQueryでアニメーションなどを行うとインライン要素でstyle属性が追加されますが全て削除したい場合は、 $(‘#area *’) *で#area内の全ての要素を取得 …

ドロワーメニューの「simple-sidebar」の簡単なサンプル

SPONSORED LINK simple-sidebar スマホなどの、ドロワーメニューの追加で便利な「simple-sidebar」。 サンプル通りに作っても、つまづいたので、備忘録代わりに簡単な …

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。