カテゴリー: LightBox

jQuery-ui LightBox 使い方

投稿日: 投稿者:

公式ホーム

[ 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);

jQuery-ui LightBox について

投稿日: 投稿者:

サムネイル画像とかで、クリックすると画像がふわっと現れるようにする、jQuery-uiのプラグインです。
同様のプラグインは他にも、星の数ほどありますが、特に画像を販売目的で使うわけでないので、落ち着いてシンプルな仕様のLightBoxを採用しています。

本家 Home : https://lokeshdhakar.com/projects/lightbox2/

説明ページ : https://kigiroku.com/frontend/lightbox.html

[ 画面例 ]