在wordpress上尋找照片的Nivo滑塊

Question

我正在尋找一種簡單的方法來在Wordpress上使用頁面指示器來創建照片庫。 我找到了WP Nivo Slider http://wordpress.org/extend/plugins/wp-nivo-slider/screenshots/，但就它能做什么以及何時可以使用它而言，它是非常嚴格的。

理想情況下，我想在HTML中包含一堆圖像，並在標簽上自動拾取一些滑塊並將它們組合成一個...任何簡單但靈活的API都會非常棒！

Answer 1

我沒有看過Nivo Slider Wordpress插件及其限制，但Standalone Nivo Slider可以在Wordpress安裝中輕松使用，並為您提供了很大的靈活性。 我不確定您的頁面指示符是什么意思，但如果您願意，可以從頁面/帖子中提取信息。 只是舉個例子，下面是一些代碼我用來創建一個圖像滑塊，使用自定義查詢從特定類別的帖子中拉出特色圖像。

     <!-- Slideshow -->
        <div id="nivowrapper">
          <div id="nivoslider">
            <?php 
            $featured_slide = new WP_Query('cat=4&showposts=-1');
            while ($featured_slide->have_posts()) : $featured_slide->the_post();
              ?>
               <?php 

                if (function_exists('has_post_thumbnail') && has_post_thumbnail()) {
                    $img_height = 293;
                    $img_width  = 960;

                    slider_image(thumb_url(),$img_width,$img_height);

                }
              ?>
            <?php endwhile; ?>
            <?php wp_reset_query(); ?>
          </div>
        </div>
    <!-- Slideshow End -->

這使用我的functions.php中的方法slider_image（）以及方法thumb_url（） - 原因是它使用timthumb來確保如果客戶端上傳的圖像大小不正確，整個事物就不會向南移動到特色帖子類別。

在functions.php中

 # This function returns the attached Featured image in the page / post
 function thumb_url(){  
   $thumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array( 960,960 ));
   return $thumb_src[0];
 }


# This function resizes the featured image to the requested proportions via timthumb. 
function slider_image($image_source,$width,$height) {
  global $post;

  echo '<img src="'.get_bloginfo('template_directory').'/timthumb.php?src='.$image_source.'&amp;h='.$height.'&amp;w='.$width.'&amp;zc=1" alt="" title="'.get_the_title().'" />';
}

我有點離開了Nivo Slider，因為Firefox中的標題有些問題從未得到解決。 你看過Flexslider 2嗎？ 我認為它在技術上仍處於測試階段，但它非常棒，並且具有高度可配置性。 我剛剛在一個網站上使用它，這太棒了（尤其是你可以使用手指滑動在平板電腦和智能手機上滾動）。

希望這個對你有幫助。

編輯

我意識到我應該為讀取此內容且未使用Nivo Slider獨立版的任何人添加最后一位。 你需要初始化Nivo Slider。 包括Nivo Slider Javascript文件（在您的functions.php中將其排入隊列）和CSS，並將以下代碼放在頭部或關閉正文標記之前。 您可以根據需要更改參數;

  <script type="text/javascript">
    jQuery(window).load(function($) {

      jQuery('#nivoslider').nivoSlider({
        effect:'fade',
        slices:15,
        animSpeed:700, 
        pauseTime:7000,
        controlNav: false,
        directionNav: true,
        directionNavHide: false,
        captionOpacity: 1
      });

    });
    </script> 

Answer 2

我使用riva slider pro（http://rivaslider.com/），它是一個付費插件，但工作得很好，很容易使用。 您可以選擇是否要將縮略圖，圖標或小指示點作為頁面指示器輸出。 它包含在包中的主題，但您可以為每個滑塊覆蓋管理中的CSS。

唯一的缺點; 它沒有響應。 我編輯了我的反應靈敏，但開箱即用的固定高度和寬度 - 這有點煩人。

要使用它，您只需設置幻燈片，然后使用短代碼將其嵌入到帖子/頁面中 - 聽起來就像您正在尋找的那樣。