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

我正在开发自定义wordpress主题,并且已经删除了wordpress下的默认主题。

但是,我已经安装了灯箱插件,用于在灯箱中显示画廊图像。但这不起作用。

这是我的代码:

page-gallery.php

get_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> -->

                        <ul class="nav nav-pills">
                                <li class="active"><a data-toggle="pill" href="#showall">Show All</a></li>
                                <li><a data-toggle="pill" href="#Category1">Category 1</a></li>
                                <li><a data-toggle="pill" href="#Category2">Category 2</a></li>
                                <li><a data-toggle="pill" href="#Category3">Category 3</a></li>
                        </ul> 
                        </div><!-- // Menu -->

                        <!-- Gallery Items -->

                <div class="gallery-items pull-left width-wide">

                <div class="tab-content">
                        <div id="showall" class="tab-pane fade in active">

                            <?php if(have_posts()): while(have_posts()): the_post(); ?>
                            <?php the_content(); ?>

                            <?php endwhile; 
                                else: 
                                    echo "Content not found";
                                 endif; 
                            wp_reset_postdata();?>  

                        </div>   

                         <div id="Category1" class="tab-pane">

                            <?php
                                $my_page_id = 766; //your page or post ID
                                $my_page = get_post($my_page_id); //retrieves the page via the ID
                                $content = $my_page->post_content; //gets the unfiltered page content
                                $content = apply_filters('the_content',$content); //cleanup content
                                $content = str_replace(']]>',']]&gt;',$content); //cleanup content
                                $title = $my_page->post_title; //retrieves page title and sets the variable
                                ?>

                                <?php
                                echo $content; //show page content
                            ?>


                    </div>

                         <div id="Category2" class="tab-pane">

                            <?php
                                $my_page_id = 769; //your page or post ID
                                $my_page = get_post($my_page_id); //retrieves the page via the ID
                                $content = $my_page->post_content; //gets the unfiltered page content
                                $content = apply_filters('the_content',$content); //cleanup content
                                $title = $my_page->post_title; //retrieves page title and sets the variable
                                ?>

                                <?php
                                echo $content; //show page content
                            ?>

                    </div>



                         <div id="Category3" class="tab-pane">

                            <?php
                                $my_page_id = 772; //your page or post ID
                                $my_page = get_post($my_page_id); //retrieves the page via the ID
                                $content = $my_page->post_content; //gets the unfiltered page content
                                $content = apply_filters('the_content',$content); //cleanup content
                                $title = $my_page->post_title; //retrieves page title and sets the variable
                                ?>

                                <?php
                                echo $content; //show page content
                            ?>

                         </div>

                     </div>
                        </div><!-- // Gallery Items -->
                    </div><!-- // Gallery -->

                </div><!-- Inside Content -->
            </div>
        </section><!-- // Content -->
<?php get_footer(); ?>

我已经添加了到header.php的relavent引导程序和jquery最小链接

我在3个动态药丸下创建了图库页面。主动的一种是通过wordpress循环从主画廊页面检索图像,而其他3种从帖子中检索图像。 (仅供参考)

请帮助我。

jinjuanyang 回答:灯箱插件不适用于“自定义开发”主题

您是否尝试过使用Responsive Lightbox & Gallery插件?这可以帮助您根据需要在网站上实现灯箱广告。它将动态地向图像添加属性。

,

我会帮助您使用灯箱广告。但是您需要为图库添加一个循环,以显示您单击的相关图像。

请使用高级自定义字段。我也使用w3school lightbox

创建了灯箱

gallery.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; ?> 

custom.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.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;
}

custom.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;
}

希望您会从中找到答案。

本文链接:https://www.f2er.com/2727639.html

大家都在问