ウェブ家の備忘録

ウェブデザイナーの備忘録

LightBoxの使い方

 バージョンごとに仕様が変わって同様のソースでは使えなくなることがあります。ソースが古くなってたらすみません。
 ここでダウンロード
http://lokeshdhakar.com/projects/lightbox2/
dist中の「css」「images」「js」フォルダを使う。
下記を読み込むとLightBoxの動作環境が整う。


<link rel="stylesheet" href="css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/lightbox.min.js"></script>


動作は下記ソースをいじって確認してみてください。


<p>
  <a href="image.jpg" data-lightbox="グループ1" data-title="ここに説明文を入れる"><img src="image.jpg" alt="" width="100" /></a>
</p>


PHP使える環境では下記ソースもあり。


<?php call_user_func(function() { 
  $image        = "image.jpg";
  $dataLightbox = "";//グループ分け
  $dataTitle    = "";//説明文
  $width        = "100";
//<a href="画像" data-lightbox="グループ" data-title="画像説明文"><img src="画像" alt="" width="横幅" /></a>
  echo '<a href="' . $image . '" data-lightbox="' . $dataLightbox . '" data-title="' . $dataTitle . '"><img src="' . $image . '" alt="" width="' . $width . '" /></a>';
}); ?>