javascript - 在 WordPress 上寻找用于照片的 Nivo Slider

Question

我正在寻找一种简单的方法来在 Wordpress 上使用页面指示器制作照片库。我找到了 WP Nivo slider http://wordpress.org/extend/plugins/wp-nivo-slider/screenshots/但它在可以做什么以及何时可以使用方面受到很大限制。

理想情况下，我只想在 HTML 中包含一堆图像，并让一些 slider 自动拾取标签并将它们组合成一个......任何简单但灵活的 API 都会很棒!

Answer 1

我还没有研究过 Nivo Slider Wordpress 插件及其限制，但独立 Nivo Slider 可以在 WordPress 安装中轻松使用，并为您提供很大的灵 active 。我不确定页面指示器是什么意思，但如果需要，您可以从页面/帖子中提取信息。举个例子，下面是我用来创建图像 slider 的一些代码，使用自定义查询从特定类别的帖子中提取特色图像。

     <!-- 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 文件(将其排入 function.php 中)和 CSS，并将以下代码放在 head 或结束 body 标记之前。您可以根据需要更改参数；

  <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>