javascript - ResponsiveSlides.js - go to correct slide in list -
javascript - ResponsiveSlides.js - go to correct slide in list -
i'm building portfolio page , i'm bit stuck. loop through images in specific folder , create thumbnail page. simultaneously, building responsiveslides gallery in lightbox.
if click on thumbnail open lightbox. however, starts first image of slideshow. how can go image in slideshow clicked on?
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 $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();
anyone thought how solve problem?
javascript php jquery wordpress responsive-slides
Comments
Post a Comment