JS shadowbox の使い方

jQuery

shadowbox 自分用メモ

ウェブ制作をする際に画像を綺麗に出すjsプラグインは色々ありますが今回はshadowboxのメモをします。

使うのはこれも簡単で

https://github.com/mjackson/shadowbox

このURLから持ってきて自分のディレクトリーにcssとjsを設置するだけで 機能を追加することができます!

スクリーンショット 2016-12-07 19.21.57

このファイルの中身がこうなっています。

<script type=“text/javascript”>  
Shadowbox.init();
</script>
あとはこのコードをヘッド内に記入すれば準備おkです!
<a href=“sample1.jpg” rel=“shadowbox” title=“タイトル”><img src=“sample1.jpg” class=“wid200”/></a>
aタグでrel=“shadowbox”と写真にhrefを追加するだけで写真を出すことができます。
成功するとこんな感じで出るようになります。
スクリーンショット 2016-12-07 19.30.54

関連記事

  1. EC-CUBE 2.4系→2.11系へ【インポート編】

  2. WordPress 管理画面にフィールドを追加してみる

  3. EC-CUBE3系 on Plesk! Plesk搭載サーバーでEC-…

  4. Mac DICOM ViewerのOsiriX(オザイリクス)

  5. WordPress有料テーマ

  6. Xoops d3downloadsソートの初期設定を変更