Magnific Popup

JavaScript

レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」がとてもよかったのでご紹介します。指定した要素をクリックするとオリジナルの画像がポップアップして表示されます。一枚ずつ画像を見せることもできるし、画像グループを作ってギャラリーっぽくすることもできます。あと軽量なのも嬉しいですね。画像以外にもテキストやフォームといった色んなものをポップアップすることができます。以下、使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。

<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="magnific-popup/jquery.magnific-popup.js"></script> 

Magnific Popupをセットします。

$('.test-popup-link').magnificPopup({ 
    type: 'image'
});

HTMLは以下のように記述します。href属性には画像パスを指定します。

<a class="test-popup-link" href="画像パス">ポップアップ</a>

また、グループを作りたい場合は以下のようにクラス名「parent-container」をつけた要素で括ります。

<div class="parent-container">
    <a href="画像パス1">ポップアップ1</a>
    <a href="画像パス2">ポップアップ2</a>
    <a href="画像パス3">ポップアップ3</a>
</div>

で、Magnific Popupをセットします。セレクタには親要素を指定し、delegateにはその子要素であるaを指定します。

$('.parent-container').magnificPopup({
    delegate: 'a',
    type: 'image'
});

シンプルでとても使いやすいと思います。

オプションも色々あるのでダウンロードや詳細については公式サイトをご確認ください。

HatebuReaderはてブのタグを登録していつでも手軽にその最新記事をチェックできるiPhoneアプリ「HatebuReader」前のページ

Macのスリープモードをさせないように変更する設定方法次のページMacのスリープモードをさせない設定

関連記事

  1. JavaScript

    指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方

    ちょっと面白そうだったので試してみました。画像を表示させるまでの間にロ…

  2. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  3. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

  4. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  5. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  6. Thumbelina

    JavaScript

    サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」

    Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP