Web Design Leaves

<div class="col-md-4">
  <a class="luminous3" href="../img/01-w1800.jpg"> 
    <img src="../img/01-w600.jpg" alt="" width="300" height="185"> 
  </a> 
</div>
<div class="col-md-4">
  <a class="luminous3" href="../img/02-w1800.jpg"> 
    <img src="../img/02-w600.jpg" alt="" width="300" height="185"> 
  </a> 
</div>
<div class="col-md-4">
  <a class="luminous3" href="../img/03-w1800.jpg"> 
    <img src="../img/03-w600.jpg" alt="" width="300" height="185"> 
  </a> 
</div>

//querySelectorAll() で全ての luminous3 クラスを指定した a 要素を取得
const luminousGalleryElems = document.querySelectorAll('.luminous3');
// または getElementsByClassName() を使ってもほぼ同じ（※）
//const luminousGalleryElems = document.getElementsByClassName('luminous3');

//取得した要素の数が 0 より大きければ
if( luminousGalleryElems.length > 0 ) {
  // LuminousGallery で初期化
  new LuminousGallery(luminousGalleryElems);
}

<div class="grid-wrapper">
  <div class="grid">
    <div class="grid-item">
      <div class="grid-content"> 
        <a class="luminous" href="images/01.jpg"> 
          <img class="thumb" src="images/thumbs/01.jpg" alt="sample image 01"> 
        </a>
        <h3 class="title">Title 1</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-content"> 
        <a class="luminous" href="images/02.jpg"> 
          <img class="thumb" src="images/thumbs/02.jpg" alt="sample image 02"> 
        </a>
        <h3 class="title">Title 2</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-content"> 
        <a class="luminous" href="images/03.jpg"> 
          <img class="thumb" src="images/thumbs/03.jpg" alt="sample image 03"> 
        </a>
        <h3 class="title">Title 3</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-content"> 
        <a class="luminous" href="images/04.jpg"> 
          <img class="thumb" src="images/thumbs/04.jpg" alt="sample image 04"> 
        </a>
        <h3 class="title">Title 4</h3>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="luminous.min.js"></script> 

<script>
//img 要素の alt 属性の値をキャプションとして表示するためのオプション
const luminousOpts = {
  caption: (trigger) => {
    return trigger.querySelector('img').getAttribute('alt');
  },
}
 
//全ての luminous クラスを指定した a 要素を取得
const luminousGalleryElems = document.querySelectorAll('.luminous');
//取得した要素が１つ以上あれば Luminous Lightbox を初期化
if( luminousGalleryElems.length > 0 ) {
  new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
} 
  
//画像の先読み
//拡大画像へのリンク要素は上記の luminousGalleryElems で取得されているのでそれを利用
for(let i=0; i<luminousGalleryElems.length; i++) {
  // img 要素を生成
  const img = document.createElement('img');
  // img 要素の src 属性にリンクの href 属性の値を設定
  img.src = luminousGalleryElems[i].href;
}
</script>

window.addEventListener('load', () =>{
  for(let i=0; i<luminousGalleryElems.length; i++) {
    const img = document.createElement('img');
    img.src = luminousGalleryElems[i].href;
  }
});

for(let i=0; i<luminousGalleryElems.length; i++) {
  const img = document.createElement('img');
  img.src = luminousGalleryElems[i].href;

  // img 要素が読み込まれた時点で行う処理があれば以下ように画像の load イベントで実行可能
  img.addEventListener('load', function(){
    //画像の height 及び width プロパティの値をコンソールに出力
    console.log(`height:${img.height} / width:${img.width}`);
  }); 
}

.grid-wrapper {
  padding: 1.5em;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}
.grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}
.grid-item {
  background-color: #efefef;
}
.thumb {
  max-width: 100%;
}
.title {
  font-size: 16px;
  color: #999;
  text-align: center;
}
.desc {
  padding: 0 1rem;
  position: relative;
  overflow: visible;
  color: #aaa;
  font-size: 14px;
}

//img 要素の alt 属性の値をキャプションとして表示するためのオプション
const luminousOpts = {
  caption: (trigger) => {
    return trigger.querySelector('img').getAttribute('alt');
  },
  onOpen: () => {
    //ライトボックス画像を表示する際に呼び出される関数
    loadPrevNext();
  },
  onClose: () => {
    //ライトボックス画像を閉じる際に呼び出される関数（不要？）
    removeEvents();
  }
}
 
//全ての luminous クラスを指定した a 要素を取得
const luminousGalleryElems = document.querySelectorAll('.luminous');
//取得した要素が１つ以上あれば Luminous Lightbox を初期化
if( luminousGalleryElems.length > 0 ) {
  new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
} 
  
//全ての luminous クラスを指定した a 要素の配列を作成
const luminousGalleryElems_array = Array.prototype.slice.call( luminousGalleryElems ) ;
//上記配列の長さ
const elems_array_length = luminousGalleryElems.length;
//拡大表示する画像の src を格納する配列
const src_array = [];
  
//luminous クラスを指定した a 要素を for 文でループ
for(let i=0; i<elems_array_length; i++) {
  //それぞれにクリックイベントを設定
  luminousGalleryElems[i].addEventListener('click', () => {
    //その要素が全体の何番目か（インデックス）を取得
    const index = luminousGalleryElems_array.indexOf( luminousGalleryElems[i]) ;
    //img 要素を生成
    const nextImg = document.createElement('img');
    //生成した img 要素にその要素の次の要素のパスを設定してプリロード
    if(index === elems_array_length-1){
      nextImg.src = luminousGalleryElems[0].href;
    }else{
      nextImg.src = luminousGalleryElems[i+1].href;
    }
    //生成した img 要素にその要素の前の要素のパスを設定してプリロード
    const prevImg = document.createElement('img');
    if(index === 0){
      prevImg.src = luminousGalleryElems[elems_array_length-1].href;
    }else{
      prevImg.src = luminousGalleryElems[i-1].href;
    }
  });
  //拡大表示する画像の src を格納する配列にその要素のパスを追加
  src_array.push(luminousGalleryElems[i].href);
}
  
//現在表示されている拡大画像の前の画像をプリロードする関数
const loadPrev = () => {
  //ライトボックス表示された画像を取得
  const lumImage = document.querySelector('.lum-img');
  //現在表示されている拡大画像が全体の何番目か（インデックス）を取得
  const src_index = src_array.indexOf( lumImage.src) ;
  //img 要素を生成
  const prevImg = document.createElement('img');
  //生成した img 要素に現在表示されている拡大画像の前の要素のパスを設定してプリロード
  if(src_index === 0){
    prevImg.src = src_array[src_array.length-1];
  }else{
    prevImg.src = src_array[src_index-1];
  } 
}

//現在表示されている拡大画像の次の画像をプリロードする関数
const loadNext = () => {
  //ライトボックス表示された画像を取得
  const lumImage = document.querySelector('.lum-img');
  //現在表示されている拡大画像が全体の何番目か（インデックス）を取得
  const src_index = src_array.indexOf( lumImage.src) ;
  //img 要素を生成
  const nextImg = document.createElement('img');
  //生成した img 要素に現在表示されている拡大画像の次の要素のパスを設定してプリロード
  if(src_index === src_array.length-1){
    nextImg.src = src_array[0];
  }else{
    nextImg.src = src_array[src_index+1];
  }
}

//ライトボックス画像を表示する際に呼び出される関数を定義
const loadPrevNext = () => {
  //「前へ」のボタン要素
  const prevButton = document.getElementsByClassName('lum-previous-button')[0];
  //「次へ」のボタン要素
  const nextButton = document.getElementsByClassName('lum-next-button')[0];
  if(prevButton) { 
    //「前へ」のボタン要素にクリックイベントを設定
    prevButton.addEventListener('click',loadPrev);
  }
  if(nextButton) { 
    //「次へ」のボタン要素にクリックイベントを設定
    nextButton.addEventListener('click',loadNext);
  } 
}

//ライトボックス画像を閉じる際に呼び出される関数を定義
const removeEvents = () => {
  //「前へ」のボタン要素
  const prevButton = document.getElementsByClassName('lum-previous-button')[0];
  //「次へ」のボタン要素
  const nextButton = document.getElementsByClassName('lum-next-button')[0];
  if(prevButton) { 
    //「前へ」のボタン要素のクリックイベントを削除
    prevButton.removeEventListener('click',loadPrev);
  }
  if(nextButton) { 
    //「次へ」のボタン要素のクリックイベントを削除
    nextButton.removeEventListener('click',loadNext);
  }  
}

//デフォルトのオプション
var options = {
  namespace: null,
  sourceAttribute: "href",
  caption: null, //キャプション
  openTrigger: "click",
  closeTrigger: "click",
  closeWithEscape: true,
  closeOnScroll: false,
  showCloseButton: true, //ドキュメントでは false となっている
  appendToNode: document.body,
  appendToSelector: null,
  onOpen: null,
  onClose: null,
  includeImgixJSClass: false,
  injectBaseStyles: true
};

//単体表示の場合（第2引数にオプションを指定）
new Luminous(document.querySelector(".luminous"), options);

//ギャラリー表示の場合（第3引数にオプションを指定）
new LuminousGallery(document.querySelector(".luminous"), {}, options);

<div class="lum-lightbox lum-open">
  <div class="lum-lightbox-inner">
    <div class="lum-lightbox-loader"></div>
    <div class="lum-lightbox-image-wrapper" style="width: 1603px; max-width: 1603px; height: 411px; max-height: 411px;">
      <span class="lum-lightbox-position-helper">
        <img class="lum-img" src="..img/01-w1800.jpg">
        <p class="lum-lightbox-caption">白い蓮の花</p>
      </span>
    </div>
    <button class="lum-previous-button lum-gallery-button">previous</button>
    <button class="lum-next-button lum-gallery-button">next</button>
  </div>
  <div class="lum-close-button"></div>
</div>

.lum-lightbox {
  /* ライトボックスの背景色 */
  background: rgba(0, 0, 0, 0.6);  
}

/* ライトボックス画像の表示領域 */
.lum-lightbox-inner {
  top: 2.5%;
  right: 2.5%;
  bottom: 2.5%;
  left: 2.5%;
}

.lum-lightbox-inner img {
  position: relative;
}

/* キャプション（画面幅が460px以上の場合） */
.lum-lightbox-inner .lum-lightbox-caption {
  margin: 0 auto;
  color: #fff;
  max-width: 700px;
  text-align: center;
}

  
.lum-lightbox {
  background: rgba(0, 0, 0, 0.7);  /* 背景色を上書き */
  z-index: 9999;    /* z-index を追加  */
}

.lum-close-button {
  position: absolute;
  right: 5px; /* ボタンの位置 */
  top: 5px; /* ボタンの位置 */
  width: 32px; /* ボタンの幅 */
  height: 32px; /* ボタンの高さ */
  opacity: 0.3;
}
.lum-close-button:hover {
  opacity: 1;
}
.lum-close-button:before,
.lum-close-button:after {
  position: absolute;
  left: 15px;
  content: " ";
  height: 33px; /* X 印の高さ（長さ）*/
  width: 2px;  /* X 印の幅（太さ）*/
  background-color: #fff;
}
.lum-close-button:before {
  transform: rotate(45deg);
}
.lum-close-button:after {
  transform: rotate(-45deg);
}

.lum-previous-button {
  left: 12px;
}

.lum-next-button {
  right: 12px;
}

/* 左右の矢印ボタンの共通のスタイル */
.lum-gallery-button:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  border-top: 4px solid rgba(255, 255, 255, 0.8);
}

.lum-previous-button:after {
  transform: translateY(-50%) rotate(-45deg);
  border-left: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: -2px 0 rgba(0, 0, 0, 0.2);
  left: 12%;
  border-radius: 3px 0 0 0;
}

.lum-next-button:after {
  transform: translateY(-50%) rotate(45deg);
  border-right: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: 2px 0 rgba(0, 0, 0, 0.2);
  right: 12%;
  border-radius: 0 3px 0 0;
}

<div class="sample-content"> 
  <a class="luminous9" href="../img/02-w1800.jpg"> 
    <img class="thumb" src="../img/02-w600.jpg" alt="庭に来る半野良の猫"> 
  </a> 
  <span class="icon-plus"></span> 
</div>

.sample-content {
  position: relative;
  overflow: hidden;
  max-width: 280px;
}
.thumb {
  max-width: 100%;
  transition: transform 0.3s;
}
/*画像ホバー時に画像を拡大*/
.thumb:hover {
  transform: scale(1.1);
}
/*ホバー時に画像の上に表示するアイコン*/ 
.icon-plus {
  opacity: 0;
  position: absolute;
  /*アイコンホバー時に反応しないように*/
  pointer-events: none;
  /* トランジションで opacity を使って表示 */
  transition: opacity 0.3s;
  /* 以下は水平及び垂直方向に中央配置するための設定 */
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
/*SVG アイコンを擬似要素 ::after で表示*/ 
.icon-plus::after{
  display: inline-block;  
  margin: 0;  
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E  %3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E  %3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}  
/*ホバー時にアイコンを表示*/ 
.sample-content:hover .icon-plus {
  opacity: 1;
}  

//オプションの設定
const luminousOpts9 = {
  caption: (trigger) => {
    //alt 属性の値をキャプションに表示
    return trigger.querySelector('img').getAttribute('alt');
  },
}

//luminous クラスを指定した a 要素を取得
const luminousElem9 = document.querySelector('.luminous9');

//上記で要素が取得できていれば Luminous を初期化
if( luminousElem9 !== null ) {
  new Luminous(luminousElem9, luminousOpts9);
} 

<div class="grid">
  <div class="grid-item">
    <div class="grid-content"> 
      <a class="luminous10" href="../img/01-w1800.jpg"> 
        <img class="thumb" src="../img/01-w600.jpg" alt="白い蓮の花"> 
      </a> 
      <span class="icon-plus"></span>
      <div class="caption">
        <p>白い蓮の花</p>
      </div>
    </div>
  </div>
  <div class="grid-item">
    <div class="grid-content"> 
      <a class="luminous10" href="../img/02-w1800.jpg"> 
        <img class="thumb" src="../img/02-w600.jpg" alt="庭に来る半野良の猫"> 
      </a> 
      <span class="icon-plus"></span>
      <div class="caption">
        <div class="caption">
          <p>庭に来る半野良の猫</p>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item">
    <div class="grid-content"> 
      <a class="luminous10" href="../img/03-w1800.jpg"> 
        <img class="thumb" src="../img/03-w600.jpg" alt="枝垂れ桜と経堂"> 
      </a> 
      <span class="icon-plus"></span>
      <div class="caption">
        <div class="caption">
          <p>枝垂れ桜と経堂</p>
        </div>
      </div>
    </div>
  </div>
</div>

.grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}
.grid-item {
}
.grid-content {
  /*.caption の基準となるように position: relative を指定 */
  position: relative;
  /*キャプションが隠れるように*/
  overflow: hidden;
}
.thumb {
  max-width: 100%;
  transition: transform 0.3s;
}
/*画像ホバー時に画像を拡大*/
.thumb:hover {
  transform: scale(1.1);
}
.caption {
  position: absolute;  /*絶対配置*/
  bottom: 0;  /*基準をボトムに配置*/
  text-align: center;
  width: 100%;
  height: 3rem;
  background-color: rgba(0,0,0,0.55);
  transform: translateY(3rem);   /*3rem 下方向に配置*/
  transition: transform 0.3s;  /*アニメーション表示*/
  font-size: .875rem;
  pointer-events: none;
}
.caption p {
  color: #fff;
  margin-top: 1rem;
}
/*グリッドアイテムホバー時にキャプションを表示*/
.grid-item:hover .caption {
  transform: translateY(0px);
}
/*ホバー時に画像の上に表示するアイコン*/ 
.icon-plus {
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.grid-item:hover .icon-plus {
  opacity: 1;
}
.icon-plus::after{
  display: inline-block;  
  margin: 0;  
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E  %3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E  %3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
} 

// caption のオプション（img 要素の alt 属性の値をキャプションに表示）
const luminousOpts10 = {
  caption: (trigger) => {
    return trigger.querySelector('img').getAttribute('alt');
  },
}

//全ての luminous10 クラスを指定した a 要素を取得
const luminousGalleryElems10 = document.querySelectorAll('.luminous10');

//取得した要素が存在していれば
if( luminousGalleryElems10.length > 0 ) {
  //キャプションのオプションを指定して LuminousGallery で初期化
  new LuminousGallery(luminousGalleryElems10, {}, luminousOpts10);
} 

wp-content
  └── themes         
      ├── index.php
      └── my-theme //使用するテーマのディレクトリ
          ├── content.php
          ├── footer.php
          ├── functions.php
          ├── header.php
          ├── index.php
          ├── luminous //Luminous 関連のファイルを格納するフォルダ
          │   ├── luminous-basic.min.css //ダウンロードしたファイル
          │   ├── luminous.min.js //ダウンロードしたファイル
          │   └── myLuminous.js //初期化などを記述したファイル
          ├── sidebar.php
          ├── single.php
          └── style.css

//オプション（キャプション）の設定
const luminousOpts = {
  caption: (trigger) => {
    const figCaption = trigger.parentElement.querySelector('figcaption');
    if(figCaption !== null && figCaption.textContent !== '') {
      return figCaption.textContent;
    }else{
      if(trigger.querySelector('img').hasAttribute('alt')) {
        return trigger.querySelector('img').getAttribute('alt');
      }else{
        return '';
      }
    }
  },
}

//luminous クラス（単体＆ギャラリー表示用）を指定した a 要素を取得
const luminousElems = document.querySelectorAll('.luminous');
 
if( luminousElems !== null ) {
  if( luminousElems.length > 1 ) {
    //対象の要素が複数ある場合は LuminousGallery でギャラリー表示
    new LuminousGallery(luminousElems, {}, luminousOpts);
  }else if(luminousElems[0]){
    //対象の要素が1つだけの場合 Luminous で単体表示
    new Luminous(luminousElems[0], luminousOpts);
  }
}

//アイキャッチ画像用オプション（キャプション）の設定
const lumiSoloOpts = {
  caption: (trigger) => {
    const figCaption = trigger.parentElement.querySelector('figcaption');
    if(figCaption !== null && figCaption.textContent !== '') {
      return figCaption.textContent;
    }else{
      if(trigger.querySelector('img').hasAttribute('alt')) {
        return trigger.querySelector('img').getAttribute('alt');
      }else{
        return '';
      }
    }
  },
}

//lumi-solo クラス（アイキャッチ画像用：ページに1つのみ）を指定した a 要素を取得
const lumiSoloElem = document.querySelector('.lumi-solo');
 
//上記で要素が取得できていれば Luminous を初期化
if( lumiSoloElem !== null ) {
  new Luminous(lumiSoloElem, lumiSoloOpts);
}

function add_my_styles_and_scripts() {
          
   ・・・その他の読み込み・・
  
  //Luminous の JavaScript の読み込み
  wp_enqueue_script( 
    'luminous-js', 
    get_theme_file_uri( '/luminous/luminous.min.js' ), 
    array(), //依存するスクリプトはなし
    filemtime( get_theme_file_path( '/luminous/luminous.min.js' ) ), 
    true //</body> 終了タグの前に配置
  );
  //Luminous の設定（初期化を記述したファイル）の読み込み
  wp_enqueue_script( 
    'my-luminous', 
    get_theme_file_uri( '/luminous/myLuminous.js' ), 
    array('luminous-js'), //依存するスクリプト（Luminous の JavaScript）
    filemtime( get_theme_file_path( '/luminous/myLuminous.js' ) ), 
    true //</body> 終了タグの前に配置
  );
  //CSS の読み込み
  wp_enqueue_style(
    'luminous-style',
    get_theme_file_uri( '/luminous/luminous-basic.min.css' ),
    array(),  //依存するスタイルシートはなし
    filemtime( get_theme_file_path( '/luminous/luminous-basic.min.css' ) )
  );
  
}
add_action( 'wp_enqueue_scripts', 'add_my_styles_and_scripts' );