Magnific Popupというプラグインはレスポンシブ対応しており、今まで他のプラグインと干渉があまり無かったので使いやすくておすすめです。かつ幅広いブラウザで動くのがいいですよね。

対応ブラウザ
デスクトップ：Chrome、Safari、FF、Opera、IE8 +、IE7の部分的なサポート
モバイル：Android 2.3以上、iOS5 +、Blackberry 10以上、WP7 +、モバイル用Opera、Android用Chromeのデフォルトブラウザ

作成したデモはこちらです。
単体でポップアップさせる場合とギャラリーで表示させる2通りを設置しました。
DEMO

Magnific Popupのダウンロード

公式サイトはこちら
Magnific Popup: Responsive jQuery Lightbox Plugin

まずGitHubからファイルをダウンロードします。
GitHub画面右側の緑のボタン（Clone or download）のDownload ZIPを押すとダウンロードが出来ます。

ダウンロードファイルdistフォルダのjquery.magnific-popup.min.jsとmagnific-popup.cssファイルを自分のjs、cssフォルダに格納します。（jquery.magnific-popup.jsは非圧縮ファイル）

js、cssファイルの読み込み

HTMLファイルにjsとcssファイルの読み込みを記述します。
もちろんjQueryの読み込みも忘れずに。

<!--cssファイルの読み込み-->
<link rel="stylesheet" href="magnific-popup.css">

<!--jsファイルの読み込み-->
<script src='jquery.magnific-popup.min.js'></script>

単体で表示させたい場合

HTML

<div class="container">
  <a href="image_1_thumb.jpg" class="popup-link"><img src="image_1_thumb.jpg"></a>
  <a href="image_2_thumb.jpg" class="popup-link"><img src="image_2_thumb.jpg"></a>
  <a href="image_3_thumb.jpg" class="popup-link"><img src="image_3_thumb.jpg"></a>
  <a href="image_4_thumb.jpg" class="popup-link"><img src="image_4_thumb.jpg"></a>
</div>

aタグにクラス名を付けます。
今回はpopup-linkというクラス名を付けました。

js

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

aタグに付けたclass名でポップアップを起動する指示をします。

ギャラリーで表示させたい場合

HTML

<div class="container">
  <a href="image_1_thumb.jpg"><img src="image_1_thumb.jpg"></a>
  <a href="image_2_thumb.jpg"><img src="image_2_thumb.jpg"></a>
  <a href="image_3_thumb.jpg"><img src="image_3_thumb.jpg"></a>
  <a href="image_4_thumb.jpg"><img src="image_4_thumb.jpg"></a>
</div>

js

$(function(){
$('.container').magnificPopup({
  delegate: 'a', 
  type: 'image',
  gallery: {
    enabled:true
  }
});
});

ギャラリーの場合、aタグではなく親要素のclass名でモーダルウィンドウを起動させます。
delegate：クリックするとポップアップが開く子アイテムセレクタ
gallery: {enabled:true}：ギャラリー表示させるためのオプション

DEMO