今日の人気記事

まだデータがありません。

レスポンシブな画像ポップアップ Lightbox「Magnific Popup」

当ページのリンクには広告が含まれています。

スポンサーリンク

レスポンシブデザインの画像ポップアップ Lightboxを簡単に実現するjQueryプラグイン「Magnific Popup」を紹介します。

jQueryプラグイン「Magnific Popup」

このプラグインの特徴は、なんといってもレスポンシブデザインです。Lightboxプラグインは、他にもいろいろありますが、レスポンシブなものはあまりないので、おすすめプラグインです。

スポンサーリンク

デモの画像をクリックするとポップアップするので、ブラウザの幅をいろいろ変えてみてみましょう。

「Magnific Popup」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Magnific Popup - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="css/magnific-popup.css">
</head>
<body>
<h1>Magnific Popupのデモでーす。</h1>
<p>ブラウザの幅を縮めてみてください。</p>
<div class="popup-gallery">
  <a href="img/1.gif" title="One"><img src="img/1.gif" width="75" height="75"></a>
  <a href="img/2.gif" title="Two"><img src="img/2.gif" width="75" height="75"></a>
  <a href="img/3.gif" title="Three"><img src="img/3.gif" width="75" height="75"></a>
  <a href="img/4.gif" title="Four"><img src="img/4.gif" width="75" height="75"></a>
  <a href="img/5.gif" title="Five"><img src="img/5.gif" width="75" height="75"></a>
</div>

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script>
$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
      titleSrc: function(item) {
        return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
      }
    }
  });
});
</script>
</body>
</html>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Magnific Popup

スポンサーリンク

関連記事(一部広告含む)