Javascript 在wordpress上查找照片的Nivo滑块

我正在寻找一种简单的方法，在Wordpress上创建一个带有页面指示器的照片库。我发现了WP-Nivo滑块，但它在功能和使用时间方面非常有限

---

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

我没有看过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 -->

这使用my functions.php中的slider_image（）方法以及thumb_url（）方法-原因是它使用timthumb来确保如果客户端将大小不正确的图像上传到特色文章类别中，整个事情不会发生

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

 # 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().'" />';
}

#此函数返回页面/帖子中附加的特色图像
函数thumb_url（）{
$thumb_src=wp_get_attachment_image_src（get_post_thumb_id（$post->id），数组（960960））；
返回$thumb_src[0]；
}
#此功能通过timthumb将特征图像的大小调整为请求的比例。
函数滑块\u图像（$image\u source，$width，$height）{
全球$员额；
回声'；
}

我有点偏离了Nivo Slider，因为Firefox中出现了字幕消失的问题，而这些问题从未得到解决。你看过吗？我认为它在技术上仍处于测试阶段，但它非常棒，而且高度可配置。我刚刚在一个网站上使用过它，它非常棒（尤其是你可以用手指滑动在平板电脑和智能手机上滚动）

希望这有点帮助

编辑

我意识到我应该为没有使用Nivo滑块的读者添加最后一点。您需要初始化Nivo滑块。包括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> 

jQuery（窗口）.load（函数（$）{
jQuery（'#nivoslider'）.nivoslider({
效果：'褪色'，
片数：15，
速度:700,，
暂停时间：7000，
控制导航：错误，
方向导航：对，
方向NavHide:false，
字幕容量：1
});
});

我使用riva slider pro(http://rivaslider.com/)，这是一个付费插件，但工作非常好，非常容易使用。您可以选择是要输出缩略图、图标还是小指示点作为页面指示。它随包中的主题一起提供，但是您可以在管理中覆盖每个滑块的CSS

唯一的缺点；它没有反应。我已经编辑了我的，使其响应，但它的固定高度和宽度的开箱即用-这是有点恼人

---

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

这非常有用！我对WP_查询不太熟悉，所以我在帖子中直接添加了必要的HTML，并在我的图片中添加了直接的url。然而，有一些奇怪的事情正在发生。我的滑块正好有3个图像，但显示了5个“子弹”，第2个和第4个是空容器。你可以在我发现问题的页面顶部看到。在wordpress HTML post editor中，会自动在每行末尾插入一个
。我在标签之间添加了
，在标签之间添加了空白图像，因为代码搜索了所有的子项。