以前写过一篇实现WordPress图片灯箱功能的文章，详见：lightgallery给你的WordPress网站快速实现图片灯箱效果。最近更新主题后发现该方式使用的js插件与主题使用的js插件存在冲突，作为半吊子的我自然是无法解决这个问题的，于是换个思路，去DUX中拿了一段代码来用，DUX是用swiper幻灯片轮播插件实现的，效果不错还能放大图片，完全和DUX主题一样，大家可以对比下本站与DUX的图片灯箱效果。
教程十分详细，但需要对自己的主题结构有了解，不要问我代码该加在哪里了！感兴趣的可以跟随本文一起实现这个功能。
使用Swiper实现图片灯箱功能
首先下载Swiper，建议去官方下载，注意，下载的压缩包里面包含Swiper的全部基础演示和未压缩的js、css文件，我们仅仅需要swiper文件夹下的swiper-bundle.min.js文件即可。
官方下载地址：https://www.swiper.com.cn/download/index.html
下载好后，我们需要在你主题中引入它，由于每个主题的构成方式不同，最简单的方式就是在WordPress中使用钩子添加一个底部JS。详见：新版WordPress需使用wp_enqueue_script管理js与css。也可以直接修改主题的footer.php文件，在HTML的</body>标签前添加如下代码即可。
复制
<script type="text/javascript" src="你的swiper-bundle.min.js文件路径"></script>
然后需要在你的主题样式文件中添加如下样式代码，下面代码不保证在别的主题中不存在样式冲突。
复制
<style>
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1
}
.swiper-container-no-flexbox .swiper-slide {
float: left
}
.swiper-container-vertical>.swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.swiper-container-android .swiper-slide,.swiper-wrapper {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.swiper-container-multirow>.swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.swiper-container-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform,-webkit-transform
}
.swiper-slide-invisible-blank {
visibility: hidden
}
.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
-o-transition-property: transform, height;
transition-property: transform, height;
transition-property: transform,height,-webkit-transform
}
.swiper-container-3d {
-webkit-perspective: 1200px;
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.5)), to(transparent));
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.5), transparent);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.5), transparent);
background-image: linear-gradient(to left, rgba(0,0,0,0.5), transparent)
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.5)), to(transparent));
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), transparent);
background-image: -o-linear-gradient(left, rgba(0,0,0,0.5), transparent);
background-image: linear-gradient(to right, rgba(0,0,0,0.5), transparent)
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(transparent));
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), transparent);
background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.5), transparent);
background-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent)
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(transparent));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), transparent);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.5), transparent);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent)
}
.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y
}
.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x
}
.swiper-button-next,.swiper-button-prev {
position: absolute;
top: 50%;
width: 40px;
height: 60px;
line-height: 60px;
margin-top: -30px;
z-index: 10;
cursor: pointer;
font-size: 28px;
text-align: center;
color: #fff;
outline: none;
opacity: .9
}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-prev,.swiper-container-rtl .swiper-button-next {
left: -50px;
right: auto;
}
.swiper-button-next,.swiper-container-rtl .swiper-button-prev {
right: -50px;
left: auto
}
.swiper-container:hover .swiper-button-prev,.swiper-container-rtl .swiper-button-next {
left: 0
}
.swiper-container:hover .swiper-button-next,.swiper-container-rtl .swiper-button-prev {
right: 0
}
.swiper-button-lock {
display: none
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
position: relative
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33)
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #fff
}
.swiper-container-vertical>.swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block
}
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px
}
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
-webkit-transition: .2s top, .2s -webkit-transform;
transition: .2s top, .2s -webkit-transform;
-o-transition: .2s transform, .2s top;
transition: .2s transform, .2s top;
transition: 0.2s transform,0.2s top,0.2s -webkit-transform
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: .2s left, .2s -webkit-transform;
transition: .2s left, .2s -webkit-transform;
-o-transition: .2s transform, .2s left;
transition: .2s transform, .2s left;
transition: 0.2s transform,0.2s left,0.2s -webkit-transform
}
.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: .2s right, .2s -webkit-transform;
transition: .2s right, .2s -webkit-transform;
-o-transition: .2s transform, .2s right;
transition: .2s transform, .2s right;
transition: 0.2s transform,0.2s right,0.2s -webkit-transform
}
.swiper-pagination-progressbar {
background: rgba(0,0,0,0.25);
position: absolute
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top
}
.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0
}
.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar {
width: 4px;
height: 100%;
left: 0;
top: 0
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255,255,255,0.25)
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
background: #fff
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0,0,0,0.25)
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
background: #000
}
.swiper-pagination-lock {
display: none
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0,0,0,0.1)
}
.swiper-container-horizontal>.swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical>.swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0,0,0,0.5);
border-radius: 10px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-scrollbar-lock {
display: none
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain
}
.swiper-slide-zoomed {
cursor: move
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube {
overflow: visible
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-container-flip {
overflow: visible
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-coverflow .swiper-wrapper {
-ms-perspective: 1200px
}
.swiper-fixed {
overflow: hidden
}
.article-swiper-no-transition {
transition-duration: 0ms !important
}
.article-swiper-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
background-color: rgba(0,0,0,0.9);
z-index: 99999
}
.article-swiper-container:hover .swiper-button-next {
right: 20px
}
.article-swiper-container:hover .swiper-button-prev {
left: 20px
}
@media (max-width: 640px) {
.article-swiper-container {
background-color: #000
}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {
bottom: 3px
}
.article-swiper-container:hover .swiper-button-next {
display: none !important
}
.article-swiper-container:hover .swiper-button-prev {
display: none !important
}
}
#bigslide {
margin-bottom: 15px;
margin-top: -15px;
text-align: center
}
#bigslide .swiper-pagination-bullet {
width: 30px;
height: 6px;
border-radius: 10px
}
#bigslide .swiper-pagination {
bottom: 15px
}
#bigslide .swiper-button-next,#bigslide .swiper-button-prev {
display: none
}
@media (max-width: 640px) {
#bigslide {
margin-bottom: 0
}
#bigslide .swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%
}
#bigslide .swiper-pagination {
bottom: 3px
}
}
.fa-chevron-left {
font-weight: 900;
}
.fa-chevron-left:before {
content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
}
.fa-chevron-right {
font-weight: 900;
}
.fa-chevron-right:before {
content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
}
</style>以上完成后整个引入过程完成，接下来通过如下代码使用它，你可以编辑你的主题js文件，也可以直接在footer.php文件中添加。
复制
<script>
$(function(){
var t = $(".article-content img").map(function(t, e) {
var i = $(this).parent()
, a = i.attr("href");
return "A" == i[0].tagName && a && /.(jpg|jpeg|webp|svg|bmp|png|gif)$/.test(a.toLowerCase()) ? a : $(this).attr("src")
})
, e = null;
$(".article-content img").each(function(i, a) {
var r = $(this).parent()
, n = r.attr("href")
, o = "A" == r[0].tagName && n && /.(jpg|jpeg|webp|svg|bmp|png|gif)$/.test(n.toLowerCase());
o && r.on("click", function() {
return !1
}),
$(this).on("click", function() {
if ("A" !== r[0].tagName || "A" == r[0].tagName && !n || o) {
clearTimeout(e);
for (var a = "", s = 0; s < t.length; s++)
a += '<div class="swiper-slide"><div class="swiper-zoom-container"><img src="' + t[s] + '"></div></div>';
var l = '<div class="swiper-container article-swiper-container"> <div class="swiper-wrapper">' + a + '</div> <div class="swiper-pagination"></div> <div class="swiper-button-next swiper-button-white"><i class="fa fa-chevron-right"></i></div> \t\t\t\t<div class="swiper-button-prev swiper-button-white"><i class="fa fa-chevron-left"></i></div> </div>';
$("body").addClass("swiper-fixed").append(l);
var u = new Swiper(".article-swiper-container",{
initialSlide: i,
zoom: {
maxRatio: 5
},
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
on: {
click: function(t) {
t.target.className.indexOf("fa-") > -1 || t.target.className.indexOf("swiper-button") > -1 || (e = setTimeout(function() {
TBUI.bd.removeClass("swiper-fixed"),
$(".article-swiper-container").remove(),
u.destroy(!0, !0)
}, 50))
},
slideNextTransitionStart: function(t) {
$(".article-swiper-container .swiper-slide-prev img").addClass("article-swiper-no-transition")
},
slidePrevTransitionStart: function(t) {
$(".article-swiper-container .swiper-slide-next img").addClass("article-swiper-no-transition")
},
slideChange: function(t) {
$(".article-swiper-container .article-swiper-no-transition").removeClass("article-swiper-no-transition")
}
}
});
return !1
}
})
})
})
</script>注意：请将上面代码中的article-content更改为你的主题文章内容容器元素的样式名，也可使用id等方式，参考jQuery的选择器。最后别忘了引入jQuery支持，并且jQuery需要在Swiper之前引入。
到此使用swiper实现图片灯箱功能完成，最后提醒大家在修改代码前请先备份文件！
评论 （2）