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

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

浏览到特定的幻灯片 - jquery循环

1 个答案: