0

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

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

4

2 回答 2

1

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

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

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

于 2012-07-06T21:44:06.010 回答
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>
于 2012-07-06T20:47:15.317 回答