Browse to specific slide - jquery cycle

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.

Shahid · Accepted Answer · 2012-10-22T09:44:49.387

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

thank you. I put it all but now I get this error: Uncaught TypeError: Cannot read property '1' of null. It's on the line of "return results[1] || 0;". you can see in the webtest — codek, Oct 22 '12 at 09:36
@FxG edited the answer. only in jquery cycle plugin section. reference `http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery` — Shahid, Oct 22 '12 at 09:45
Changed in the web test but now it only let me click on the first thumb project, the others became useless. We are close to get it :) — codek, Oct 22 '12 at 09:49
@FxG you have to change `id="project_slider"` to `class="project_slider"` and `$('#project_slider').click` to `$('.project_slider').click`. But I think it would be better if you prepare `href` of `a` tag in php. `echo '';` — Shahid, Oct 22 '12 at 09:54

Browse to specific slide - jquery cycle

1 Answers1