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. タイトル通り複数のカスタムフィールドの値で投稿をソートする

  2. Slickっていうjsプラグインが便利!

  3. EC-CUBE 2.11.4 インストールエラーのメモ

  4. EC-CUBE 2.11登場

  5. macで使えるshareアプリ「Teleport」がすごく便利!

  6. BaserCMSをテスト中!

最近の記事

  1. NFCカード
  2. vcard形式 qrコード
  3. FileMakerとTwilio連携がSMS配信を劇的に変える理由
  4. FileMaker QRコード
  5. phantom4pro
  6. 2017.06.07

    iPad Pro 新型
  7. wwdc2017

カテゴリー


  1. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    @美浜から

  2. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    Appleのように「デザインのある会社!」

  3. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    Books

  4. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    DX戦略

  5. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    EC-CUBE

  6. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    googleのように「オープンに働ける会社!」

  7. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    IDEOのように「発想する会社!」

  8. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    Server

  9. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    Swift

  10. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    Wordpressを使いこなせ!【developer編】

  11. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    アップル

  12. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    ウェブサイト

  13. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    オープンソース

  14. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    パタゴニアのように「環境を考える会社!」

  15. Warning: Trying to access array offset on false in /var/www/vhosts/ddwnet.com/httpdocs/ddwnet/wp-content/themes/source_tcd045/widget/category_list.php on line 60
    ファイルメーカー