我正在建立一个投资组合页面,我有点卡住了。我基本上遍历特定文件夹中的所有图像并创建缩略图页面。同时,我正在灯箱中构建ResponsiveSlides库。
如果我点击任何缩略图,我会打开灯箱。但是,它始终以幻灯片的第一张图片开头。如何在我实际点击的幻灯片中转到图像?
PHP(WordPress)
<?php
/*
Template Name: Portfolio Category
*/
get_header();
?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="portfolio-container">
<?php
$slideshow = array();
if(get_field('image_gallery')): ?>
<div class="row">
<?php
while(the_repeater_field('image_gallery')):
$medium = wp_get_attachment_image_src( get_sub_field('image'), 'medium' )[0];
$full = wp_get_attachment_image_src( get_sub_field('image'), 'full' )[0];
array_push($slideshow, $full);
?>
<div class="col-xs-6 col-sm-3 tile">
<?php echo '<img src="'.$medium.'">'; ?>
<div class="plusSign"><i class="fa fa-plus-circle"></i></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
<!-- Build Lightbox Slideshow -->
<?php if (!empty($slideshow)): ?>
<div id="lightbox">
<div id="close">
<img src="<?php bloginfo('template_directory'); ?>/img/close-x.png">
</div>
<div id="currentImage">
<ul class="rslides">
<?php
$title = 'title';
$currentSlide = 'currentslide';
foreach ($slideshow as $slide) {
echo '<li><img src="'.$slide.'"></li>';
}
?>
</ul>
</div>
<div id="album"><em></em></div>
<div id="portfolioNav">
<span class="portfolioPagination"></span>
<a href="#" class="rslides_nav rslides1_nav prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a href="#" class="rslides_nav rslides1_nav next"><span class="glyphicon glyphicon-chevron-right"></span></a>
<span class="glyphicon glyphicon-th tileIcon"></span>
</div>
</div>
<?php endif; ?>
<?php include('footer.php'); ?>
JS
tile.click(function() {
window.scrollTo(0,0);
$('#lightbox').css('display', 'block');
$('html body').css('overflow', 'hidden');
});
$(".rslides").responsiveSlides();
任何人都知道如何解决我的问题?