Javascript Wordpress post';s缩略图将打开此帖子';灯箱画廊
我有点迷路了,还没有找到解决问题的办法,所以我决定请你帮忙。也许我不知道如何表达这个问题,这就是为什么我找不到任何解决方案,所以任何帮助都是感激的 我的客户的网站是建立在Wordpress上的,但该网站是手写的(不是买来的主题),在一个页面上,她希望有她公司投资组合的参考资料。目前,参考资料的作用类似于Wordpress帖子,但我们希望在每篇帖子中添加图库,如果客户点击帖子的链接,就会在灯箱中打开一个图库 。(对爱沙尼亚语感到抱歉) 我添加了“”插件(在帖子中),以便在帖子页面上,我可以将图像添加到图库中。现在我的问题是,我怎样才能把这些图片拿到lightbox gallery 我已经设法将这些图像上传到我的网站,但不是我想要的方式,以下是我的代码:Javascript Wordpress post';s缩略图将打开此帖子';灯箱画廊,javascript,php,html,wordpress,lightbox,Javascript,Php,Html,Wordpress,Lightbox,我有点迷路了,还没有找到解决问题的办法,所以我决定请你帮忙。也许我不知道如何表达这个问题,这就是为什么我找不到任何解决方案,所以任何帮助都是感激的 我的客户的网站是建立在Wordpress上的,但该网站是手写的(不是买来的主题),在一个页面上,她希望有她公司投资组合的参考资料。目前,参考资料的作用类似于Wordpress帖子,但我们希望在每篇帖子中添加图库,如果客户点击帖子的链接,就会在灯箱中打开一个图库 。(对爱沙尼亚语感到抱歉) 我添加了“”插件(在帖子中),以便在帖子页面上,我可以将图像添
<div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>">
<a href="<?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' %s', $image_src[0] );
}
?>">
<div class="bg_img"<?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' style="background-image: url(%s);"', $image_src[0] );
}
?>> </div>
<h3><?php the_title(); ?></h3>
<p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p>
</a>
</div>
<div>
<?php $galleryarray = get_post_gallery_ids($post->ID);
foreach ($galleryarray as $id) {
$image = wp_get_attachment_image_src( $id, ‘thumb’ );
$attachment_meta = wp_get_attachment( $id ); ?>
<a id="<?php echo $id; ?>" href="<?php echo $image[0]; ?>" data-lightbox="image-1">
<img src="<?php echo wp_get_attachment_url( $id ); ?>">
<?php echo '</a>';?>
<?php } ?>
</div>
我说到了一点,每篇文章都有自己的图库,如果你打开网站上的第一篇文章,就会有一个灯箱图库,你可以在这里查看这篇文章的所有图片。HTML/PHP代码:
<?php
$i = 1;
while( $refs->have_posts() ): $refs->the_post();
$galleryarray = get_post_gallery_ids($post->ID);?>
<div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>">
<div class="bg_img cursor"<?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' style="background-image: url(%s);"', $image_src[0] );
}
?> onclick="openModal(<?php echo $i; ?>);currentSlide(1)"> </div>
<h3><?php the_title(); ?></h3>
<p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p>
</a>
</div>
<!-- Modal -->
<div id="myModal-<?php echo $i; ?>" class="modal">
<span class="close cursor" onclick="closeModal(<?php echo $i; ?>)">×</span>
<div class="modal-content">
<?php
foreach ($galleryarray as $index => $id) {
$image = wp_get_attachment_image_src( $id, ‘thumb’ );
$number = $index+1; ?>
<div class="mySlides">
<div class="numbertext"><?php echo $number; ?> / <?php echo count($galleryarray); ?></div>
<img id="<?php echo $id; ?>" src="<?php echo $image[0]; ?>" style="width:100%">
</div>
<?php } ?>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<?php
foreach ($galleryarray as $index => $id) {
$image = wp_get_attachment_image_src( $id, ‘thumb’ );
$alt = get_post_meta( $id, '_wp_attachment_image_alt', true);
$number = $index+1; ?>
<div class="column">
<img id="<?php echo $id; ?>" class="demo cursor" src="<?php echo $image[0]; ?>" style="width:100%" onclick="currentSlide(<?php echo $number ?>)" alt="<?php echo $alt; ?>">
</div>
<?php } ?>
</div>
</div>
<?php $i++;
endwhile; ?>
<script type="text/javascript" id="lightbox-js">
function openModal(i) {
document.getElementById('myModal-'+i).style.display = "block";
document.getElementById('pageHeader').style.zIndex = "0";
document.getElementById('pageFooter').style.zIndex = "0";
document.getElementById('pageContainer').style.textAlign = "left";
}
function closeModal(i) {
document.getElementById('myModal-'+i).style.display = "none";
document.getElementById('pageHeader').style.zIndex = "10";
document.getElementById('pageFooter').style.zIndex = "9";
document.getElementById('pageContainer').style.textAlign = "center";
}
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;
}
</script>