在 wordpress 上寻找 Nivo Slider 的照片答案

【问题标题】：Looking for Nivo Slider for photos on wordpress在 wordpress 上寻找 Nivo Slider 的照片
【发布时间】：2012-07-07 05:44:06
【问题描述】：

我正在寻找一种在 Wordpress 上使用页面指示器制作照片库的简单方法。我找到了 WP Nivo Slider http://wordpress.org/extend/plugins/wp-nivo-slider/screenshots/，但它的功能和使用时间非常有限。

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

【问题讨论】：

标签： javascript wordpress html

【解决方案1】：

我没有看过 Nivo Slider Wordpress 插件和它的限制，但独立的 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，并将以下代码放在头部或结束 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>

【讨论】：

这很有帮助！我对 WP_Query 不太熟悉，所以我通过在帖子中直接添加必要的 HTML 并有直接指向我的图像的 URL 来解决一些问题。然而，有一些奇怪的事情发生了。我的滑块正好有 3 个图像，但出现了 5 个“子弹”，第二个和第四个是空容器。您可以在页面顶部看到它joelin.org/?page_id=53
我发现了问题。在 wordpress HTML 帖子编辑器中，
会自动插入每行的末尾。我的标记之间有
并且在它们之间添加了空白图像，因为代码搜索了所有孩子。

【解决方案2】：

我使用 riva slider pro (http://rivaslider.com/)，它是一个付费插件，但效果非常好，而且非常容易使用。您可以选择是否要输出缩略图、图标或小指示点作为页面指示符。它在包中带有主题，但您可以在管理员中为每个滑块覆盖 CSS。

只有缺点；它没有响应。我已经对其进行了编辑以使其具有响应性，但它的高度和宽度是固定的，开箱即用 - 这有点烦人。

要使用它，您只需设置幻灯片，然后使用简码将其嵌入到您的帖子/页面中 - 听起来就像您正在寻找的那样。

【讨论】：