0

我有一个页面，其中包含来自自定义字段的某些图像缩略图。我需要做的是让图像拇指上的链接直接链接到滑块中的图像，问题是滑块在其他页面中不一样。

这是我用来从自定义帖子转发器字段中获取图像的代码：

<?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 循环插件的代码：

$("#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 任何图像都会让您在滑块位置找到它的链接。

4

1 回答 1

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 循环中制作href标签a。

于 2012-10-22T09:32:07.770 回答