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

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

如何將 photoswipe 實現到 wordpress 自定義主題中?

如何將 photoswipe 實現到 wordpress 自定義主題中?

PHP
慕田峪7331174 2023-04-15 10:11:52
我正在嘗試在我的網站中實現 photoswipe,但我不確定如何為 wordpress 網站實現它。我正在使用 acf 中繼器在網格中顯示所有圖像。單擊圖像時,我想顯示 photoswipe 畫廊。我已經閱讀了 photoswipe 的文檔,但我不明白如何將它與轉發器字段一起使用。任何幫助,將不勝感激..
查看完整描述

1 回答

?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

在我看來,取消 photoswipe 并使用lightgallery。

Photoswipe 臃腫,而 lightgallery 做同樣的事,但有更甜美的選擇。

如果您以語義方式輸出中繼器字段圖像網格,那么這將起到作用......

$('.grid').lightGallery({

? selector: '.lightgallery'

});

.grid {

? width: 100%;

? height: 100%;

}


FIGURE {

? margin: 0;

? width: 25%;

? display: block;

? float: left;

? position: relative;

? overflow: hidden;

}


FIGURE A {

? display: block;

? width: 100%;

}


FIGURE A::after {

? content: '';

? display: block;

? padding-top: 100%;

}


FIGURE A IMG {

? height: 100%;

? position: absolute;

? left: 50%;

? top: 50%;

? transform: translate(-50%, -50%);

}

<div class="grid">

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/8HjXPXD.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/vUDcfcy.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/okTDHas.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/x7ZYW4i.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/EYTCssm.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/3sAFPmL.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/IqLrd0o.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/6JplNl6.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/6X5GKWJ.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/SefTwI1.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/qBmDrTU.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/x7ZYW4i.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/EYTCssm.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/3sAFPmL.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/IqLrd0o.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/6JplNl6.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/6X5GKWJ.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/SefTwI1.png" alt="" />

? ? </a>

? </figure>

? <figure>

? ? <a class="lightgallery">

? ? ? <img src="https://i.imgur.com/qBmDrTU.png" alt="" />

? ? </a>

? </figure>

</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/js/lightgallery-all.min.js"></script>


查看完整回答
反對 回復 2023-04-15
  • 1 回答
  • 0 關注
  • 132 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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