瀏覽到特定幻燈片-jQuery循環

Question

我有一個頁面，其中包含來自自定義字段的某些圖像標記。 我需要做的是將圖像縮略圖上的鏈接直接鏈接到滑塊中的圖像，問題是滑塊在其他頁面中不一樣。

這是我用來從自定義后期轉發器字段獲取圖像的代碼：

<?php $query = new WP_Query( 'post_type=artworks_post&posts_per_page=-1&order=DESC' ); ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>

<?php  $slides = get_field('project_slider');  
    // Grabs the array
     if($slides) {     
       foreach($slides as $s) {  
              echo '<div id="project_slider" class="item"> ';     
              echo '<div class="aimagediv" >'; //
              echo '<a>';          
              echo '<img src="'.$s['project_image'].'" alt="" width="240" />';
              echo '</a>';
              echo '</div>'; //aimagediv     
              echo '<div class="art_title">';        
              echo '<p>SWEET LIFE</p>';        
              echo '</div>';        
              echo '<div class="mask">';        
              echo '</div>';  
              echo '</div>'; //first div
             }
         }
 ?>  
 <?php endwhile; // end of the loop. ?>

我正在使用它來鏈接到滑塊頁面（我知道這種方式的鏈接是錯誤的，但是我必須這樣做以向您展示它如何鏈接到滑塊）：

$('#project_slider').click(function() {
    location.href = '?page_id=42';
});

這是我用於滑塊的jquery cycle插件的代碼：

$("#slideshow").css("overflow", "hidden");

$('ul#slides').cycle({
    fx:       'fade',
    timeout:   0,
    prev: '#prev',
    next: '#next',
    after:     onAfter
});

function onAfter(curr,next,opts) {
    var caption = '' + (opts.currSlide + 1) + ' / ' + opts.slideCount;
    $('.project_number p').html(caption);
}

如何固定將每個項目鏈接到滑塊中的相應位置，而不是始終在滑塊的起始圖像中打開它？

這里是我要實現的工作示例：loscarpinteros.net/#exhibitions任何圖像都可以將您帶到滑塊位置的鏈接。

Answer 1

<?php $query = new WP_Query( 'post_type=artworks_post&posts_per_page=-1&order=DESC' ); ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>

<?php  $slides = get_field('project_slider');  
    // Grabs the array
     if($slides) {    
       $i = 0; 
       foreach($slides as $s) {  
              echo '<div id="project_slider" counter="'.$i++.'" class="item"> ';     
              echo '<div class="aimagediv" >'; //
              echo '<a>';          
              echo '<img src="'.$s['project_image'].'" alt="" width="240" />';
              echo '</a>';
              echo '</div>'; //aimagediv     
              echo '<div class="art_title">';        
              echo '<p>SWEET LIFE</p>';        
              echo '</div>';        
              echo '<div class="mask">';        
              echo '</div>';  
              echo '</div>'; //first div
             }
         }
 ?>  
 <?php endwhile; // end of the loop. ?>

在JS中

$('#project_slider').click(function() {
    location.href = '?page_id=42&slide='+$(this).attr('counter');
});

並在JQuery周期中

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

$("#slideshow").css("overflow", "hidden");

$('ul#slides').cycle({
    fx:       'fade',
    timeout:   0,
    prev: '#prev',
    next: '#next',
    after:     onAfter,
    startingSlide:     getURLParameter('slide'),
});

function onAfter(curr,next,opts) {
    var caption = '' + (opts.currSlide + 1) + ' / ' + opts.slideCount;
    $('.project_number p').html(caption);
}

順便說一句，您可以在PHP循環中a標簽的href 。