灯箱插件不适用于自定义开发主题

Question

我正在开发自定义 wordpress 主题，并且我已经删除了 wordpress 下的默认主题。但是，我已经安装了灯箱插件，用于在灯箱中显示我的画廊图像。但它不起作用。这是我的代码：page-gallery.phpget_header(); ?> <section class="content pull-left width-wide clear-both">            <div class="wrap">                <!-- Inside Content -->                <div class="inside-content inside-page pull-left width-wide clear-both">                    <!-- page header -->                    <div class="page-header pull-left width-wide">                        <!-- Title -->                        <h1>Gallery</h1><!-- Title -->                        <!-- Breadcrumb -->                    <ul class="_bread">                    <li><a href="http://localhost:8080/wordpress/" title="Home">Home</a></li>                    <li><a href="#" title="Gallery" class="active">Gallery</a></li>            </ul><!-- Breadcrumb -->                      </div><!-- // page header -->                    <!-- Gallery -->                    <div class="gallery pull-left width-wide">                        <!-- Menu -->                        <div class="cat-menu pull-right padding-right-20">                            <!--Categories : -->                         <!-- <a href="#showall" title="Show All" class="active">Show All</a>                                                        <a href="#Category1" title="Category 1 " >Category 1 </a>                                                        <a href="#Category2" title="Category 2" >Category 2</a>                                                        <a href="#Category3" title="Category 3" >Category 3</a> -->  我已经添加了相关的引导程序和 jquery min 链接到 header.php我在 3 个动态药丸下创建了图库页面。活动的一个是通过 wordpress 循环从主画廊页面检索图像，其他 3 个药丸从帖子中检索图像。（仅供参考）请帮我解决一下这个。

Answer 1

您是否尝试过使用响应式灯箱和图库插件？这可以帮助您根据需要在网站上实现灯箱。它将动态地为图像添加属性。

Answer 2

我会帮你装灯箱的。但是您需要为图片库添加一个循环，以便显示您单击的相关图片。

请使用高级自定义字段。我还使用w3school 灯箱创建了灯箱

画廊.php

<?php $images = get_field('gallery');

                        if( $images ): ?>

                                <?php foreach( $images as $image ): ?>

                                    <div class="gallery_content_wrapper"> 

                                            <div class="item col-md-4">

                                                <img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>"  width="344" height="215" onclick="openModal();currentSlide(1)" class="cursor">

                                            </div>

                                    <?php if ( function_exists('slb_activate') ){

                                    $content = slb_activate($content);

                                    }

                                    echo $content; ?>

                            <div id="myModal" class="modal">

                                <span class="close cursor" onclick="closeModal()">&times;</span>

                                <div class="modal-content">

                                <div class="mySlides">

                                <img src="<?php echo $image['url']; ?>">

                                </div>

                                 <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

                                <a class="next" onclick="plusSlides(1)">&#10095;</a>

                            </div>

                            </div>

                                <?php endforeach; ?>

                        <?php endif; ?> 

自定义.css

* {

  box-sizing: border-box;

}

.row > .column {

  padding: 0 8px;

}

.row:after {

  content: "";

  display: table;

  clear: both;

}

.column {

  float: left;

  width: 25%;

}

/* The Modal (background) */

.modal {

  display: none;

  position: fixed;

  z-index: 100000000;

  padding-top: 100px;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: black;

}

/* Modal Content */

.modal-content {

  position: relative;

  background-color: #000000;

  margin: auto;

  padding: 0;

  width: 90%;

  max-width: 1200px;

  /*text-align: center;*/

}

.mySlides{

  text-align: center;

}

/* The Close Button */

.close {

  color: white;

  position: absolute;

  top: 10px;

  right: 25px;

  font-size: 35px;

  font-weight: bold;

  opacity: 1;

}

.close:hover,

.close:focus {

  color: #999;

  text-decoration: none;

  cursor: pointer;

}

.mySlides {

  display: none;

}

.cursor {

  cursor: pointer;

}

/* Next & previous buttons */

.prev,

.next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -50px;

  color: white;

  font-weight: bold;

  font-size: 20px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

  -webkit-user-select: none;

}

/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */

.prev:hover,

.next:hover {

  background-color: rgba(0, 0, 0, 0.8);

}

/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}

img {

  margin-bottom: -4px;

}

.caption-container {

  text-align: center;

  background-color: black;

  padding: 2px 16px;

  color: white;

}

.demo {

  opacity: 0.6;

}

.active,

.demo:hover {

  opacity: 1;

}

footer{

  position: sticky;

}

自定义.js

function openModal() {

  document.getElementById("myModal").style.display = "block";

}

function closeModal() {

  document.getElementById("myModal").style.display = "none";

}

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

  showSlides(slideIndex += n);

}

function currentSlide(n) {

  showSlides(slideIndex = n);

}

function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("demo");

  var captionText = document.getElementById("caption");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

      slides[i].style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

  captionText.innerHTML = dots[slideIndex-1].alt;

}

希望你能从中找到答案。