ResponsiveSlides.js - 转到列表中的幻灯片

时间:2014-10-28 00:02:47

标签: javascript php jquery wordpress responsive-slides

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

任何人都知道如何解决我的问题?

0 个答案:

没有答案