FacebookのようなアニメーションGIFをjqGifPreviewで埋め込む

TwitterとFacebookにはたくさんの人がいます アニメーションGIFを共有する 毎日。これらすべてが自動再生されている場合、フィードでは面倒かもしれません。.

両方のネットワークはこの問題を回避します。 クリックしてプレビューする機能 すべてのGIFに対してこれにより、ユーザーは選択することができます どのアニメーションを見たいですか いつアニメーションを開始/停止するかを選択する.

とともに jqGifPreviewプラグイン, あなたのウェブサイトにこれと同じ機能をもたらすことができます.

この 無料のjQueryプラグイン ページ上のすべてのGIFに対して機能します。素晴らしいリソースですが、セットアップには少し時間がかかります.

一時停止したGIFは本当に アニメーションの1フレーム, ページに表示.

残念ながら、このプラグイン ではない 自動的にGIFから静的写真を取得する あなたのために。しかし、これはPHPまたは他のバックエンド言語を使用して実現できます。そのため、少しコードを追加すると、これを自動化できます。.

このプラグインはdata- *属性を使用して GIF画像の場所を保存する. ユーザーが画像をクリックすると、自動的にその画像に読み込まれます。 src 画像の属性であり、画面に表示される.

シンプルで効果的、そして間違いなく素晴らしい効果です。必要なのは、このプラグイン用のCSS / JSファイルだけです。 GitHubから直接引っ張る. そしてもちろん、あなたは jQueryのコピーが必要です, も.

そこから、あなたはこのようにあなたのイメージをセットアップしました：

メイン src 属性は 静止画を含む. スクリプトを作成して生成することも、GIFごとに手動で静的ショットを編集してアップロードすることもできます。.

の データGIF 属性 本物のアニメーションGIFを保持 あなたがクリックした場合、彼らはクリックで交換します 主画像クラスをターゲットにする （この場合は、 .myImg）さて、あなたが必要とするのはそれをすべてうまく動かすためにjQueryの1行だけです：

 $（ "。myImg"）。jqGifPreview（）; 

確かに、今月見た中で最もクールなjQueryプラグインの1つで、セットアップはとても簡単です。.

あなたは訪問することによってもっと学ぶことができます GitHubページ そしてまたあります ライブデモプレビュー 開発者のWebサイトでホストされている.