caroufredsel图片缩略图在wordpress分页

Question

我想要一个旋转木马，在wordpress文章中显示媒体画廊的图像和图像缩略图。

我可以得到它来查询数据库，但我不知道如何使用caroufredsel返回缩略图数组。

我现在只是返回第一个缩略图，这是合理的，因为函数返回变量设置为$ src [0]。我需要.pager-wrapper类来接收在php循环中找到的所有图像。

举个例子，我想回报是：

<img src=image1.jpg /> 
<img src=image2.jpg /> 
<img src=image3.jpg /> 

我怎么caroufredsel以缩略图阵列返回到选定的容器类？

projectCarousel = $("#project-carousel").carouFredSel({ 
    pagination : { 
    container  : ".pager-wrapper", 
    anchorBuilder : function(nr) { 
     //var src = $(this).attr("src"); 
     //src = src.replace("/large/", "/small/"); 
     <?php 

     $meta = get_post_meta(get_the_ID(), 'icrave_project_media_gallery', false); 
       if (!is_array($meta)) 
        $meta = (array) $meta; 

       if (!empty($meta)): 
        $meta = implode(',', $meta); 
        $images = $wpdb->get_col(" 
         SELECT ID FROM $wpdb->posts 
         WHERE post_type = 'attachment' 
         AND ID IN ($meta) 
         ORDER BY menu_order ASC 
        "); 
        foreach ($images as $att): 
         // Get image's source based on size, can be 'thumbnail', 'medium', 'large', 'full' or registed post thumbnails sizes 
         $src = wp_get_attachment_image_src($att, 'thumbnail'); 
         $src = $src[0]; 
         ?> 


     return '<img src="' + '<?php echo $src ?>' + '" />'; 

     <?php endforeach ?> 
        <?php endif ?> 

     } 
    } 
}); 

Answer 1

我正在谈论这一切都是错误的。你必须设置2个轮播。这里是链接到帮助教程： http://favbulous.com/post/628/create-and-style-an-image-slider-with-thumbnail-carousel

这是我必须做的......

首先在你想要的拇指去一个新的div添加一个新的循环。

<div id="thumbs"> 
        <?php global $wpdb, $post; 

        $meta = get_post_meta(get_the_ID(), 'icrave_project_media_gallery', false); 
        if (!is_array($meta)) 
         $meta = (array) $meta; 

        if (!empty($meta)) { 
         $meta = implode(',', $meta); 
         $images = $wpdb->get_col(" 
          SELECT ID FROM $wpdb->posts 
          WHERE post_type = 'attachment' 
          AND ID IN ($meta) 
          ORDER BY menu_order ASC 
         "); 
         foreach ($images as $att) { 
          // Get image's source based on size, can be 'thumbnail', 'medium', 'large', 'full' or registed post thumbnails sizes 
          $src = wp_get_attachment_image_src($att, 'thumbnails'); 
          $src = $src[0]; 

          // Show image 
          echo "<div class='thumb'> 
               <a href='#'> 
               <img src='{$src}' alt='Thumbnail Title' width='72' height='38' /></a></div>"; 
         } 
        } 
        ?> 

       </div> 

如果需要，您可以将此减少为单个数据库查询以节省一些速度。

二是增加了jQuery：

$(function(){ 
    /* Attached an unique class name to each thumbnail image */ 
    $('#thumbs .thumb a').each(function(i) { 
     $(this).addClass('itm'+i); 

     /* add onclick event to thumbnail to make the main 
     carousel scroll to the right slide*/ 
     $(this).click(function() { 
      $('#project-carousel').trigger('slideTo', [i, 0, true]); 
      return false; 
     }); 
    }); 

    /* Highlight the first item on first load */ 
    $('#thumbs a.itm0').addClass('selected'); 


projectCarousel = $("#project-carousel").carouFredSel({ 
     responsive:true, 
     circular:true, 
     infinite:true, 
     width:983, 
     height:550, 
     scroll: { 
      fx: 'crossfade', 
      onBefore: function() { 
       /* Everytime the main slideshow changes, it check to 
        make sure thumbnail and page are displayed correctly */ 
       /* Get the current position */ 
       var pos = $(this).triggerHandler('currentPosition'); 

       /* Reset and select the current thumbnail item */ 
       $('#thumbs a').removeClass('selected'); 
       $('#thumbs a.itm'+pos).addClass('selected'); 
       /* Move the thumbnail to the right page */ 
       var page = Math.floor(pos/3); 
       $('#thumbs').trigger('slideToPage', page); 
      } 
     }, 
     auto: { 
      play:true 
     }, 
     items:{ 
      height:winHeight, 
      visible:1, 
      width:1000 
     }, 
     prev:$("#left"), 
     next:$("#right"), 
    }); 

    /* Carousel for the thumbnails */ 
    $('#thumbs').carouFredSel({ 
     direction: 'left', 
     circular: true, 
     infinite: false, 
     align: false, 
     auto: false, 
     prev: '#prev', 
     next: '#next' 
    }); 

我希望这是对别人的帮助，因为我没有找到很多文档上进行图像的缩略图使用fredSel上市。