0

我正在建立一个投资组合页面，但我有点卡住了。我基本上循环浏览特定文件夹中的所有图像并创建一个缩略图页面。同时，我正在灯箱中构建 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();

有人知道如何解决我的问题吗？

4

0 回答 0