Google画像のようにサムネイルを拡大する方法
Google Imagesは、独自のUIを実行します。 さまざまなWebサイトからのサムネイルプレビュー. これらのサムネイルのいずれかをクリックすると、より詳細と大きな写真で画面が拡大します.
これは私が今使った中で最高の画像ギャラリー機能の1つです。, あなたはそれをGridder.jsで複製することができます.
この無料のjQueryプラグインは、この効果に合ったプラグインを作成することによって、Googleの素晴らしいUXの足跡をたどります。あなたはできる フォトギャラリーをGoogle Imagesスタイルのギャラリーに変える すべて同じアニメーションと表示機能を使用.
私はこのプラグインに付属しているスピードと使いやすさに心から驚いています。サムネイルをクリックするだけ すぐに大きいショットを表示します そしてアニメーションはとてもきれいです.
画像 説明文のセクションを含める あなたが写真に関連するいくつかの詳細やリンクを追加したい場合に備えて。これは、画像に焦点を当てることを目的とした単純なポートフォリオサイトに特に適しています。.
それに加えて、あなたはすることができます Ajax経由でコンテンツを取得する. これはあなたをすることができます 動的サムネイルを作成する 他のWebサイトから、またはAPIを通じてコンテンツを取得する.
各クリックイベント コールバックメソッドを提供します, だからあなたはGridderと一緒に他のプラグインやJavaScript関数を実行することさえできます。非常に多くの選択肢があるため、実際にはグリッドフレームワーク全体のように感じられます。!
Gridder以来 jQueryで動作します, 依存関係として最新バージョンが必要です。しかし、それだけで（Gridder.jsファイルと共に）必要なのはすべてです。数行のHTMLを使用すれば、グリッドをスムーズに実行できます。.
GitHubのページをチェックしてください。 フルセットアップ手順 しかし、ここに クイックプレビュー HTMLの外観について
すべてのコンテンツ JavaScriptを介して引っ張られる, だからあなたが望むほとんど何でもロードすることができます.
それはオプションを持つ信じられないほど用途の広いプラグインです。 アニメーション速度、イージング、ボタンスタイル、スクロールオフセット位置を変更する ユーザーが新しいサムネイルをクリックしたとき.
初心者とプロの開発者は同じようにこのプラグインに多くの価値を見つけるでしょう。それでも、これが自分のためかどうかわからない場合は、ライブのGridderデモページを見て試してみてください。.
