BaguetteBox.jsでレスポンシブで美しいフルページライトボックスを作成する

がある 多数のライトボックスプラグイン そしてそれらはすべて素晴らしいです さまざまな理由で. ポートフォリオサイトでうまく機能するものもあれば、レスポンシブレイアウトに最適なものもあります。.

しかし、私のお気に入りの新しいプラグインの1つは、 baguetteBox.js, JavaScript開発者Marek Grzybekによって作成されました.

もちろん、このプラグインは完全に無料で使用でき、手動でコードを掘り下げたい場合はGitHubをオープンソースにしています。.

図書館 依存関係はありません, そのため、jQuery、Zepto、その他の機能なしで実行できます。それは 本当に簡単な設定の純粋なJavaScriptライブラリ.

それは モバイル機器で完璧に動作する, デスクトップとラップトップのデフォルトの動作と共に、スワイプとタップをサポートすることができます。それはそのいくつかのフルスクリーンギャラリーのうちの1つです。 完全なモーダル効果とともに、モバイルインタラクションをサポート.

をチェック デモページ それが生きているのを見るために。それはと一緒に、フル機能のギャラリーを持っています 機能させるには1行のコードが必要：

 baguetteBox.run（ '。baguetteBoxOne'）; 

したがって、この クラスを持つコンテナ要素をターゲットとする .baguetteBoxOne そしてギャラリー全体がそれをうまく動かします.

あなたは出来る カスタムオプションを設定する キャプション、ボタンスタイル、プリロード機能、onclick / onchangeイベントのコールバックメソッドなどが必要な場合。これらのオプションはすべて GitHubでよく文書化されている 飛び込みたいのなら.

しかし、これをコンテナ要素といくつかの基本的な画像要素を超えて実行するのは、実際にはそれほど時間がかかりません。.

君は フルコントロール アニメーション、画像サイズ、スワイプ効果、そしてタイトル/キャプションのようなギャラリーの内容について。この JavaScriptが必要ですか, そのため、モーダルに代わる純粋なCSSはありません。しかし、ほとんどのブラウザはJavaScriptをサポートしているので問題にならないはずです。.

詳細については、baguetteBox.jsのメインページにアクセスして、Twitterの作成者と自分の考えを共有することもできます@feimosi.