浏览到特定幻灯片-jQuery循环

Question

I have a page that features certain image thumbs from a custom field. What I need to do is have the link on the images thumbs link directly to it's image in the slider, the problem is that the slider is in other page not the same.

This is the code i'm using to get the images from the custom post repeater field:

<?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. ?>

I'm using this to link to the slider page ( I know it's wrong link that way but I had to do it to show you how it links to slider):

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

and this is the code of the jquery cycle plugin i'm using for the slider:

$("#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);
}

How can I fix to link each project to it's corresponding position in the slider, instead of always opening in the start image of the slider?

here it's a working example of what i'm trying to achieve: loscarpinteros.net/#exhibitions any image get's you to the link of it in the slider position.

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. ?>

in JS

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

and in JQuery cycle

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);
}

BTW you can make href of a tag in your php loop.