中程度の画像をズームする方法

ブログプラットフォームMediumでは、 カスタム画像ズーム効果 彼らのブログページで。ユーザーが画像をクリックするたびに、自動的に大きなサイズに拡大されます。.

これは素晴らしい効果であり、確かにMediumに特有のものですが、簡単にコピーできるものではありませんでした。.

今、 MediumLightbox スクリプト、それは今までよりも簡単です。このJSスクリプトは軽量で、簡単にウェブサイトやブログに追加できます。.

これがどのように機能するのかを知りたい場合は、にアクセスしてください。 ライブデモページ 作成者Davide Calignanoによるホスト.

正確なトランジションとカスタムアニメーション効果を Mediumの画像ズームの鏡像を作成する. ライブラリ全体は 純粋なJavaScriptで書かれた, だからそれは3に頼らない^第二 jQueryなどのパーティスクリプト.

あなたはそれを設定するために少しのJSを知る必要があるでしょうが、あなたは確かに専門家になる必要はありません.

各画像は取ることができます data- *属性 フルサイズの高さと幅を設定するためのものです。 動的に引っ張られる ライトボックスプラグインから。セットアップコードはとてもシンプルで、 画像自体をターゲットにする, または のような容器

素子.

これが、プラグインを実行するために必要な単一のコードスニペットです。

 MediumLightbox（ 'figure.zoom-effect'）; 

関数の中では、 セレクタを渡す すべての要素に対して（例：.

） とともに .ズーム効果 クラス。このクラスは 具体的に定義された MediumLightboxスタイルシートでは、ページにもこれを使用するのが最善です。.

そして、それが設定されれば、あなたはすべて設定されます!

ページのコンテンツ領域では、すべての画像を

このクラスを使ったタグ。彼らは自動的にこの最愛の中クリック/ズーム効果を得るでしょう デスクトップユーザーとモバイルユーザーの両方に.

このスクリプトのコピーをダウンロードして開始するには、メインのGitHubリポジトリにアクセスしてください。ここで、あなたはまた見つける コードスニペットとともにドキュメント あなたは速くセットアップするためにコピーすることができます.