Я создаю страницу портфолио, и я немного застрял. Я в основном перебираю все изображения в определенной папке и создаю страницу с миниатюрами. Одновременно я создаю галерею 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();
У кого-нибудь есть идея, как решить мою проблему?
Задача ещё не решена.
Других решений пока нет …