Javascript 如何在wordpress循环中添加灯箱并获取_post（）？
我是wordpress自定义主题开发的新手。目前我正在把一个网站改造成wordpress，有一个带有灯箱的图库页面。在网站中，图像被预先选择，图像被src链接到代码 但是，当谈到我的wordpress改造时，我使用wordpress循环来显示所有动态药丸，并使用get_post（）函数来显示类别动态药丸 我所需要的只是想一想如何定制我的wordpress循环，并获取_post（）函数来添加最初网站使用的lightbox。这是我的代码和原始站点代码 原址 gallery.htmlJavascript 如何在wordpress循环中添加灯箱并获取_post（）？,javascript,php,wordpress,Javascript,Php,Wordpress,我是wordpress自定义主题开发的新手。目前我正在把一个网站改造成wordpress，有一个带有灯箱的图库页面。在网站中，图像被预先选择，图像被src链接到代码 但是，当谈到我的wordpress改造时，我使用wordpress循环来显示所有动态药丸，并使用get_post（）函数来显示类别动态药丸 我所需要的只是想一想如何定制我的wordpress循环，并获取_post（）函数来添加最初网站使用的lightbox。这是我的代码和原始站点代码 原址 gallery.html 画廊 ima
画廊
；（函数（e，t，n，r）{“使用严格的”；var i=function（）{var e=n.body | n.documentElement，e=e.style；if（e.WebkitTransition==“”）return“-webkit-”；if（e.MozTransition==“”）return“-o-”；if（e.transition==“”）return”“；return false}，s=i==“”？false：true，o=function（e，t，t，n）{var=“”，s=i）；transform+“transition”]=s+“transform”+n+“s linear”；t中的e.css（r）}，u=“ontouchstart”，a=t.navigator.pointerEnabled | | | t.navigator.msPointerEnabled，f=function（e）{if（u）返回true；if（！a | | typeof e==“undefined”| typeof e.pointerType==“undefined”）返回false；if（typeof e.MSPOINTER | u TYPE|鼠标！=“undefined”）返回true}否则，如果（e.pointerType！=“mouse”）返回true；返回false}；e.fn.imageLightbox=function（r）{var r=e.extend（{selector:'id=“imageLightbox””，允许类型：“png | jpg | jpeg | gif”，动画速度：250，预下一步：true，启用键盘：true，quitoned:false，quitOnImgClick:false，quitOnDocClick:true，onStart:false，oned:false，onLoadStart:false，onLoadEnd:false，r），i=e（[]））l=e，c=e，c=e，c=e，c=e，c=e，p=0，p=0，d=0，p=0，p=0，p=0，p=0，c=0，c=e，c=e，c=e，c=e，c=e，c=e，c=e，c=0，p=0，p=0，p=0，p=0，p=0，p=e，c=e，c=e，c=e，c=e，c=e，c=e，c=e，c=e，c=e，l，l，c=e，c=e，c=e，l，l（），l，c=e，l，l（），l（），l（），c=e，c（=，，，，，，，，、c=a（===，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，(右)（宽度：h+“px”，高度：p=p+“px”，高度：p+“px”，顶部：（e（t）高度（）：高度（t）高度（t）高度（t）高度（t）高度（t）高度（t）高度（t）高度（t）高度（t）高度（p）p）p）p）p）p）p）p）p）p）p）p）p）p）p）p）p，p）p）p）p）c.cscss，顶部，（顶部：（e（上：（e（e（e（t）p）p）p）p）p）p）p）p）p）p）p）p）p）p）p）p）p），p），p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，p，（p，（p，（p：（t：（e，（t，（t：（t，（t y（h/2>t？“左”：“右”）}）touchstart pointerdown MSPointerDown”，函数（e）{if（！f（e.originalEvent）| r.quitOnImgClick）返回true；if（s）p=parseInt（c.css（“左”）；n=e.originalEvent.pageX | | e.originalEvent.touch[0].pageX}）。在（“touchmove move pointermove MSPointerMove”上，函数（e）{if（！f（e（e.originalEvent）| | | r.quitOnImgClick）返回true；e.prevent）u=e.originalEvent.pageX | e.originalEvent.touch[0].pageX；d=n-u；if（s）o（c，-d+“px”，0）；else c.css（“left”，p-d+“px”））））on（“touchend touch取消点rup pointercancel MSPointerUp MSPointerCancel”，函数（e）{if（！f（e（e.originalEvent）| r.quitOnImgClick）返回true；if（Math.abs（d）>50{=i.eq（i.index）（l）
$（''+说明+''）。附录（'正文'）；
},
captionOff=函数（）
{
$（“#imagelightbox标题”）.remove（）；
},
//航行
navigationOn=函数（实例、选择器）
{
变量图像=$（选择器）；
if（images.length）
{
价值净值=$（''）；
对于（var i=0；i<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SEO -->
<title>Gallery</title>
<meta name="description" content="Hello">
<meta name="keywords" content="Hello">
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Open Sans -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Lightbox -->
<link href="assets/css/lightbox.css" rel="stylesheet">
<!-- Pre Classes -->
<link href="assets/css/pre-classes.css" rel="stylesheet">
<!-- Styles -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Content -->
<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">
<!-- Gallery -->
<div class="gallery pull-left width-wide">
<!-- Gallery Items -->
<div class="gallery-items pull-left width-wide">
<!-- Item -->
<a href="img1" data-imagelightbox="a" class="item col-md-4">
<img src="img1" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img2" data-imagelightbox="a" class="item col-md-4">
<img src="img2" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img3" data-imagelightbox="a" class="item col-md-4">
<img src="img3" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img4" data-imagelightbox="a" class="item col-md-4">
<img src="img4" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img5" data-imagelightbox="a" class="item col-md-4">
<img src="img5" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img6" data-imagelightbox="a" class="item col-md-4">
<img src="img6.jpg" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
</div><!-- // Gallery Items -->
</div><!-- // Gallery -->
</div><!-- Inside Content -->
</div>
</section><!-- // Content -->
<!-- jScripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- <script src="assets/js/cycle.min.js"></script> -->
<script src="assets/js/imagelightbox.min.js"></script>
<!-- Custom jsPlugins -->
<!-- <script src="assets/js/plugins.jquery.js"></script> -->
<!-- Custom jScripts -->
<script src="assets/js/custom.jquery.js"></script>
</body>
</html>
;(function(e,t,n,r){"use strict";var i=function(){var e=n.body||n.documentElement,e=e.style;if(e.WebkitTransition=="")return"-webkit-";if(e.MozTransition=="")return"-moz-";if(e.OTransition=="")return"-o-";if(e.transition=="")return"";return false},s=i()===false?false:true,o=function(e,t,n){var r={},s=i();r[s+"transform"]="translateX("+t+")";r[s+"transition"]=s+"transform "+n+"s linear";e.css(r)},u="ontouchstart"in t,a=t.navigator.pointerEnabled||t.navigator.msPointerEnabled,f=function(e){if(u)return true;if(!a||typeof e==="undefined"||typeof e.pointerType==="undefined")return false;if(typeof e.MSPOINTER_TYPE_MOUSE!=="undefined"){if(e.MSPOINTER_TYPE_MOUSE!=e.pointerType)return true}else if(e.pointerType!="mouse")return true;return false};e.fn.imageLightbox=function(r){var r=e.extend({selector:'id="imagelightbox"',allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,preloadNext:true,enableKeyboard:true,quitOnEnd:false,quitOnImgClick:false,quitOnDocClick:true,onStart:false,onEnd:false,onLoadStart:false,onLoadEnd:false},r),i=e([]),l=e(),c=e(),h=0,p=0,d=0,v=false,m=function(t){return e(t).prop("tagName").toLowerCase()=="a"&&(new RegExp(".("+r.allowedTypes+")$","i")).test(e(t).attr("href"))},g=function(){if(!c.length)return true;var n=e(t).width()*.8,r=e(t).height()*.9,i=new Image;i.src=c.attr("src");i.onload=function(){h=i.width;p=i.height;if(h>n||p>r){var s=h/p>n/r?h/n:p/r;h/=s;p/=s}c.css({width:h+"px",height:p+"px",top:(e(t).height()-p)/2+"px",left:(e(t).width()-h)/2+"px"})}},y=function(t){if(v)return false;t=typeof t==="undefined"?false:t=="left"?1:-1;if(c.length){if(t!==false&&(i.length<2||r.quitOnEnd===true&&(t===-1&&i.index(l)==0||t===1&&i.index(l)==i.length-1))){w();return false}var n={opacity:0};if(s)o(c,100*t-d+"px",r.animationSpeed/1e3);else n.left=parseInt(c.css("left"))+100*t+"px";c.animate(n,r.animationSpeed,function(){b()});d=0}v=true;if(r.onLoadStart!==false)r.onLoadStart();setTimeout(function(){c=e("<img "+r.selector+" />").attr("src",l.attr("href")).load(function(){c.appendTo("body");g();var n={opacity:1};c.css("opacity",0);if(s){o(c,-100*t+"px",0);setTimeout(function(){o(c,0+"px",r.animationSpeed/1e3)},50)}else{var u=parseInt(c.css("left"));n.left=u+"px";c.css("left",u-100*t+"px")}c.animate(n,r.animationSpeed,function(){v=false;if(r.onLoadEnd!==false)r.onLoadEnd()});if(r.preloadNext){var a=i.eq(i.index(l)+1);if(!a.length)a=i.eq(0);e("<img />").attr("src",a.attr("href")).load()}}).error(function(){if(r.onLoadEnd!==false)r.onLoadEnd()});var n=0,u=0,p=0;c.on(a?"pointerup MSPointerUp":"click",function(e){e.preventDefault();if(r.quitOnImgClick){w();return false}if(f(e.originalEvent))return true;var t=(e.pageX||e.originalEvent.pageX)-e.target.offsetLeft;l=i.eq(i.index(l)-(h/2>t?1:-1));if(!l.length)l=i.eq(h/2>t?i.length:0);y(h/2>t?"left":"right")}).on("touchstart pointerdown MSPointerDown",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(s)p=parseInt(c.css("left"));n=e.originalEvent.pageX||e.originalEvent.touches[0].pageX}).on("touchmove pointermove MSPointerMove",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;e.preventDefault();u=e.originalEvent.pageX||e.originalEvent.touches[0].pageX;d=n-u;if(s)o(c,-d+"px",0);else c.css("left",p-d+"px")}).on("touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(Math.abs(d)>50){l=i.eq(i.index(l)-(d<0?1:-1));if(!l.length)l=i.eq(d<0?i.length:0);y(d>0?"right":"left")}else{if(s)o(c,0+"px",r.animationSpeed/1e3);else c.animate({left:p+"px"},r.animationSpeed/2)}})},r.animationSpeed+100)},b=function(){if(!c.length)return false;c.remove();c=e()},w=function(){if(!c.length)return false;c.animate({opacity:0},r.animationSpeed,function(){b();v=false;if(r.onEnd!==false)r.onEnd()})};e(t).on("resize",g);if(r.quitOnDocClick){e(n).on(u?"touchend":"click",function(t){if(c.length&&!e(t.target).is(c))w()})}if(r.enableKeyboard){e(n).on("keyup",function(e){if(!c.length)return true;e.preventDefault();if(e.keyCode==27)w();if(e.keyCode==37||e.keyCode==39){l=i.eq(i.index(l)-(e.keyCode==37?1:-1));if(!l.length)l=i.eq(e.keyCode==37?i.length:0);y(e.keyCode==37?"left":"right")}})}e(n).on("click",this.selector,function(t){if(!m(this))return true;t.preventDefault();if(v)return false;v=false;if(r.onStart!==false)r.onStart();l=e(this);y()});this.each(function(){if(!m(this))return true;i=i.add(e(this))});this.switchImageLightbox=function(e){var t=i.eq(e);if(t.length){var n=i.index(l);l=t;y(e<n?"left":"right")}return this};this.quitImageLightbox=function(){w();return this};return this}})(jQuery,window,document);
$( function()
{
// ACTIVITY INDICATOR
var activityIndicatorOn = function()
{
$('.overlay-bg').remove();
$( '<div id="imagelightbox-loading"><div></div></div><div class="overlay-bg"></div>' ).appendTo( 'body' );
},
activityIndicatorOff = function()
{
$( '#imagelightbox-loading' ).remove();
},
// OVERLAY
overlayOn = function()
{
$( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
},
overlayOff = function()
{
$( '#imagelightbox-overlay' ).remove();
},
// CLOSE BUTTON
closeButtonOn = function( instance )
{
$( '<button type="button" id="imagelightbox-close" title="Close"></button>' ).appendTo( 'body' ).on( 'click touchend', function(){ $( this ).remove(); instance.quitImageLightbox(); return false; });
},
closeButtonOff = function()
{
$( '#imagelightbox-close' ).remove();
},
// CAPTION
captionOn = function()
{
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
if( description.length > 0 )
$( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
},
captionOff = function()
{
$( '#imagelightbox-caption' ).remove();
},
// NAVIGATION
navigationOn = function( instance, selector )
{
var images = $( selector );
if( images.length )
{
var nav = $( '<div id="imagelightbox-nav"></div>' );
for( var i = 0; i < images.length; i++ )
nav.append( '<button type="button"></button>' );
nav.appendTo( 'body' );
nav.on( 'click touchend', function(){ return false; });
var navItems = nav.find( 'button' );
navItems.on( 'click touchend', function()
{
var $this = $( this );
if( images.eq( $this.index() ).attr( 'href' ) != $( '#imagelightbox' ).attr( 'src' ) )
instance.switchImageLightbox( $this.index() );
navItems.removeClass( 'active' );
navItems.eq( $this.index() ).addClass( 'active' );
return false;
})
.on( 'touchend', function(){ return false; });
}
},
navigationUpdate = function( selector )
{
var items = $( '#imagelightbox-nav button' );
items.removeClass( 'active' );
items.eq( $( selector ).filter( '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).index( selector ) ).addClass( 'active' );
},
navigationOff = function()
{
$( '#imagelightbox-nav' ).remove();
},
// ARROWS
arrowsOn = function( instance, selector )
{
var $arrows = $( '<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>' );
$arrows.appendTo( 'body' );
$arrows.on( 'click touchend', function( e )
{
e.preventDefault();
var $this = $( this ),
$target = $( selector + '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ),
index = $target.index( selector );
if( $this.hasClass( 'imagelightbox-arrow-left' ) )
{
index = index - 1;
if( !$( selector ).eq( index ).length )
index = $( selector ).length;
}
else
{
index = index + 1;
if( !$( selector ).eq( index ).length )
index = 0;
}
instance.switchImageLightbox( index );
return false;
});
},
arrowsOff = function()
{
$( '.imagelightbox-arrow' ).remove();
};
// WITH ACTIVITY INDICATION
$( 'a[data-imagelightbox="a"]' ).imageLightbox(
{
onLoadStart: function() { activityIndicatorOn(); },
onLoadEnd: function() { activityIndicatorOff(); },
onEnd: function() { activityIndicatorOff();$('.overlay-bg').remove(); }
});
});
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(']]>', ']]>', $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;
$my_page = get_post($my_page_id);
$content = $my_page->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$title = $my_page->post_title;
?>
<?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
$content = str_replace(']]>', ']]>', $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{
position: sticky;
}
footer{
position: sticky;
}
<div class="tab-content">
<?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()">×</span>
<div class="modal-content">
<div class="mySlides">
<img src="<?php echo $image['url']; ?>">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
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;
}
* {
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;
}