亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

燈箱插件不適用于自定義開發主題

燈箱插件不適用于自定義開發主題

PHP
慕無忌1623718 2022-07-29 10:54:46
我正在開發自定義 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 個藥丸從帖子中檢索圖像。（僅供參考）請幫我解決一下這個。
查看完整描述

2 回答

?
寶慕林4294392

TA貢獻2021條經驗 獲得超8個贊

您是否嘗試過使用響應式燈箱和圖庫插件？這可以幫助您根據需要在網站上實現燈箱。它將動態地為圖像添加屬性。



查看完整回答
反對 回復 2022-07-29
?
侃侃爾雅

TA貢獻1801條經驗 獲得超16個贊

我會幫你裝燈箱的。但是您需要為圖片庫添加一個循環，以便顯示您單擊的相關圖片。


請使用高級自定義字段。我還使用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;

}

希望你能從中找到答案。


查看完整回答
反對 回復 2022-07-29
  • 2 回答
  • 0 關注
  • 134 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號