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上市。