表示モード 指定なしimg01

表示モード stackedimg02

表示モード hideimg03

表示モード animatedimg04

FROM ショーシャンクの空に

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/captionjs.min.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.caption.min.js"></script>
<script>
	$(window).load(function(){
		$('#Captions #CaptionsDemo01').captionjs();
		$('#Captions #CaptionsDemo02').captionjs({'mode': 'stacked'});
		$('#Captions #CaptionsDemo03').captionjs({'mode': 'hide'});
		$('#Captions #CaptionsDemo04').captionjs({'mode': 'animated'});
	});
</script>
<p><span>表示モード 指定なし</span><img id="CaptionsDemo01" src="<PATH>/img13.jpg" alt="img01" data-caption="世界には石でできていない場所もある。そしてそのなかに誰もたどり着けない、誰も触れない何かがある。" /></p>

<p><span>表示モード stacked</span><img id="CaptionsDemo02" src="<PATH>/img18.jpg" alt="img02" data-caption="ひとつ言わせてくれ。希望は危険だ。希望は人を狂わせる。" /></p>

<p><span>表示モード hide</span><img id="CaptionsDemo03" src="<PATH>/img12.jpg" alt="img03" data-caption="希望は素晴らしいものだ。おそらくもっとも素晴らしいものだ。そして素晴らしいものは死なない。" /></p>

<p><span>表示モード animated</span><img id="CaptionsDemo04" src="<PATH>/img07.jpg" alt="img04" data-caption="アンディに会えるといいが。国境を越えられるといいが。親友に再会して、その手を握れるといいが。太平洋が、夢に見たのと同じように青く美しいといいが。それが俺の希望だ" /></p>

<p>FROM ショーシャンクの空に</p>

Captionsについて

Captionsは画像のキャプションを表示してくれるプラグインです。
表示させる方法が複数用意されているので、色々な見せ方ができそうです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • loupe

    loupe

    画像をルーペで見たように拡大できる

  • ImageScroller

    ImageScroller

    サムネイルをドラッグすることで大きな画像を見ることができる

  • FeaturedImageZoomer

    FeaturedImageZoomer

    画像上をマウス移動することで拡大画像を見ることができる

  • simplyScroll

    simplyScroll

    シンプルな画像ギャラリーを設置できる

  • jQZoom

    jQZoom

    色々な方法で拡大画像を表示できる