jQuery滝流プラグイン:Wookmark
原文リンク:jQuery Wookmark
オンライン例:jQuery Wookmark Demo
Wookmark公式サイト: http://www.wookmark.com/jquery-plugin
アンカー
原文日付:2013年03月05日翻訳日付:2014年02月22日
初めて画像共有サイトPinterestを開くと、「わあ、各列の図の幅は同じで、すべての画像が正しい割合で切り取られて表示されています」と心から感嘆するかもしれません.
一般ユーザーは何も感じないかもしれませんが、開発者として、サーバ側とクライアントを含む設計、革新、実装に対する努力を理解することができます.これも私がWookmarkを好きになった理由です.一致した画像レイアウト効果を作成するためのjQueryプラグインです.
Wookmarkプラグインの使い方を見てみましょう.
開発作業は数分で完了します.まずimg画像を何らかのラベルで包装します.例えば、リストを使ってもいいです.:
Wookmarkは一つのことだけを一心にやっていて、とても良いプラグインです.エレガントでスタイルの統一されたフォトギャラリー(gallery)を作りたいなら、Wookmarkで試してみると印象に残ると思います!
公式ガイドブック:
http://www.wookmark.com/jquery-plugin
翻訳は以下の通りです.
1.GithubからWookmark-jQueryプラグインをダウンロードする:またはここをクリックしてZIPパッケージをダウンロードする
2.jQuery導入後にscriptを導入する: align-整列:left、right、またはcenter autoResize-「true」に設定すると、ブラウザウィンドウのサイズが変更されると、レイアウト が自動的に更新されます. resizeDelay-デフォルト値「50」、単位:ミリ秒(milisecond)、ブラウザresizeの後に再レイアウトされる遅延時間 comparator-カスタムソート関数(sorting function) を指定します. container-この要素のwidthは列の数を計算するために使用され、デフォルトは「window」です.たとえば$('myContentGrid').ContainerはCSS属性「position:relative」を設定する必要があります. direction-方向:「left」or「right」、左上または右上から要素 を配列する ignoreInactiveItems-「true」に設定すると、非アクティブなitemsも表示されます.このオプションは、フィルタされた items実行フェードアウト効果 itemWidth-単一grid itemのwidthは、ピクセル値(たとえば「200」)またはパーセント(「10%」)を使用できます.デフォルト値は最初のitemの width fillEmptySpace-trueに設定すると、各列の下部にプレースホルダを作成して等しいレイアウトを作成します.Placeholders要素はCSSクラス「wookmark-placeholder」に設定されます. flexibleWidth-「true」or「false」、ブラウザウィンドウのサイズに基づいてitem widthを調整して最適レイアウト を作成する offset-items間の(水平、垂直)間隔で、デフォルト値は2 です. onLayoutChanged-コールバック関数で、すべてのレイアウトが変更されると が呼び出されます. outerOffset-デフォルトは「0」 です.
例(ソート、フィルタリング、プレス、スクロール、ライトボックス、API統合...)および貢献リストを表示し、Wookmark on githubにアクセスします.楽しんでほしいです.
オンライン例:jQuery Wookmark Demo
Wookmark公式サイト: http://www.wookmark.com/jquery-plugin
アンカー
原文日付:2013年03月05日翻訳日付:2014年02月22日
初めて画像共有サイトPinterestを開くと、「わあ、各列の図の幅は同じで、すべての画像が正しい割合で切り取られて表示されています」と心から感嘆するかもしれません.
一般ユーザーは何も感じないかもしれませんが、開発者として、サーバ側とクライアントを含む設計、革新、実装に対する努力を理解することができます.これも私がWookmarkを好きになった理由です.一致した画像レイアウト効果を作成するためのjQueryプラグインです.
Wookmarkプラグインの使い方を見てみましょう.
開発作業は数分で完了します.まずimg画像を何らかのラベルで包装します.例えば、リストを使ってもいいです.
<ul id="tiles">
<li><img src="images/image_1.jpg" width="200" height="283"><p>1</p></li>
<li><img src="images/image_2.jpg" width="200" height="300"><p>2</p></li>
<li><img src="images/image_3.jpg" width="200" height="252"><p>3</p></li>
<li><img src="images/image_4.jpg" width="200" height="158"><p>4</p></li>
<li><img src="images/image_5.jpg" width="200" height="300"><p>5</p></li>
<li><img src="images/image_6.jpg" width="200" height="297"><p>6</p></li>
<li><img src="images/image_7.jpg" width="200" height="200"><p>7</p></li>
<li><img src="images/image_8.jpg" width="200" height="200"><p>8</p></li>
<li><img src="images/image_9.jpg" width="200" height="398"><p>9</p></li>
<li><img src="images/image_10.jpg" width="200" height="267"><p>10</p></li>
<li><img src="images/image_1.jpg" width="200" height="283"><p>11</p></li>
<li><img src="images/image_2.jpg" width="200" height="300"><p>12</p></li>
<li><img src="images/image_3.jpg" width="200" height="252"><p>13</p></li>
<!-- ... -->
</ul>$(document).ready(new function() {
// .
$('#tiles li').wookmark({
autoResize: true, //
container: $('#tiles'), // , CSS
offset: 2, // , (item)
itemWidth: 210 // , (item)
});
});Wookmarkは一つのことだけを一心にやっていて、とても良いプラグインです.エレガントでスタイルの統一されたフォトギャラリー(gallery)を作りたいなら、Wookmarkで試してみると印象に残ると思います!
公式ガイドブック:
http://www.wookmark.com/jquery-plugin
翻訳は以下の通りです.
1.GithubからWookmark-jQueryプラグインをダウンロードする:またはここをクリックしてZIPパッケージをダウンロードする
2.jQuery導入後にscriptを導入する:
<script type="text/javascript" src="jquery.wookmark.js"></script>$('#myContent li').wookmark();例(ソート、フィルタリング、プレス、スクロール、ライトボックス、API統合...)および貢献リストを表示し、Wookmark on githubにアクセスします.楽しんでほしいです.