LightBox – Saoline Tips

[ Javascript, CSSのセット ]


  <script type="text/javascript" src="Script/js/lightbox.js" charset="UTF-8"></script>
  <link rel='stylesheet' href='Script/css/lightbox.css' />

[ コード例 ]

リンクタグの属性に、rel=’lightbox[imagegroup]’ を入れることで、LightBox がアフェクトする


        // サムネイル画像読込完了した時 //
        loadComplete: function () {

          // ストレッチ画像とライトボックスリンク //
          var IMG_HTML = "<a href='%HSRC%' rel='lightbox[imagegroup]' target='new' class='stshide'>" +
                  "<Img src='%SRC%' width='200px' height='150px' style='object-fit: contain;'></img></a>";


          // 画像表示とライトボックスリンク //
          /* html を置換て、LightBoxのリンクに行けるようにする */
          imguri = 'tmpimages/' + thumbdir + '/' + $(this).text();
          imguriact = 'tmpimages/' + thumbdir + '/' + $(this).text().slice(2);

          html = IMG_HTML.replace('%SRC%', imguri).replace('%HSRC%', imguriact);
          $(this).html(html);