it-swarm.cn

什么是一个好的jQuery内容滑块插件?

我正在寻找一个插件,可以让我轻松地放置一个基于jQuery(因为我想避免多个JavaScript库的麻烦)滑块在我的网站上的各个地方。我希望它能够处理图像以及HTML。我知道 精选内容库 插件,但我想找到一个替代方案(部分原因是这个 推文 Brad Williams,我相信他的意见)。

理想情况下,我想要一些可以根据类别,标签,最近的帖子等自动创建“幻灯片”的东西,但这也可以让我手动创建一个“幻灯片”,包含我想要的任何帖子,图像或其他内容使用。

编辑:我正在寻找一个WordPress插件,而不仅仅是一个jQuery插件。

4
Travis Northcutt

我已经为这个项目确定了WordPress的 SlideDeck 插件。简而言之,它很好地组合在一起,看起来很棒,非常灵活等等。到目前为止,我印象非常深刻。唯一的缺点是免费版本包含一个非常小的归因图像链接,但老实说,它可能值得他们想要的WP插件49美元。

1
Travis Northcutt

我知道你说你正在寻找一个WordPress插件,但是大多数内容滑块很容易手动添加,并且因为你只需要添加你想要使用的功能就不那么臃肿了。我会给出一些选择:

JQuery Cycle(到目前为止最简单的图像)

我将它用于图像并为其编写了一个简短的代码,以便可以轻松地将其添加到帖子,页面或小部件中。要使用,请为图像添加div类和短代码:

<div class="slideshow"> [slideimage name=name-of-image-uploaded-to-media] [slideimage name=next-image-name] </div> (This will only work for .jpg's if you want to use .png change the ext to 'png' in the shortcode function

在footer.php中,只需调用您从 http://jquery.malsup.com/cycle/download.html 下载的cycle.js,并在脚本标记之间添加,或者添加到主js中

jQuery(function(){jQuery('。slideshow')。cycle();});

function slideimage_shortcode($atts, $content = null) {
    extract( shortcode_atts( array(
    'name' => '',
    'ext' => 'jpg',
    'path' => '/wp-content/uploads/',
    'url' => ''
    ), $atts ) );
    $file=ABSPATH."$path$name.$ext";
    if (file_exists($file)) {
        $size=getimagesize($file);
        if ($size!==false) $size=$size[3];
        $output = "<img src='".get_option('siteurl')."$path$name.$ext'   $size alt='$name' />";
        if ($url) $output = "<a href='$url' title='$name'>".$output.'</a>';
        return $output;
    }
    else {
        trigger_error("'$path$name.$ext' image not found", E_USER_WARNING);
        return '';
    }
}
add_shortcode('slideimage','slideimage_shortcode');

对于包含帖子,HTML或几乎任何东西的滑块,我使用JQuery Tools Scrollablehttp://flowplayer.org/tools/scrollable/index.html

JQuery Tools站点上的说明写得非常好,基本上你将滑块包装在div中,然后各个帖子或项目被包装在主要的一个div中。

你必须在你的页脚中调用插件js并将函数添加到你的主js或脚本标签中:jQuery(function(){jQuery(“。scrollable”)。scrollable({vertical:true,mousewheel:false}); });

编辑:按类别向任何模板文件添加查询帖子,以允许最终用户将帖子添加到滑块.

以下代码会将类别8中的任何帖子添加到滑块:

<div id="slider">
  <?php query_posts('post_type=post&order=asc&cat=8'); ?>

        <div id="actions">
    <a class="prev">&laquo; Back</a>
    <a class="next">More &raquo;</a>
</div>

  <div class="scrollable">
   <div class="items">
 <?php while (have_posts()) : the_post(); ?>
 <div>
 <?php the_content(); ?>
 </div>
<?php endwhile;?>
</div>
                </div>

            </div>

要使整个设置更像Plugin,请在functions.php中注册和排队jquery工具

<?php
if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   wp_register_script('jquerytools',
       http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js',
       array('jquery'),
       '1.4.2' );
   // enqueue the script
   wp_enqueue_script('jquerytools');
}
?>

现在添加另一个函数来添加滑块配置:

// add jquery tools configuration to footer
function add_jquerytools_config() {
    echo '<script type="text/javascript">';
    echo 'jQuery(document).ready(function($) {';
        echo '$(".slider").scrollable({circular:true}).autoscroll(8000);';
        echo '$(".scrollable").scrollable({vertical:false,mousewheel:false});});';
    echo '</script>';
}
add_action('wp_footer', 'add_jquerytools_config');
4
Chris_O

完全披露,我即将推荐我开发的jQuery插件。 - 它也不是一个WordPress插件(我正在研究它),但仍然可以有效地用于你的建议(实际上你建议的用途是我开发它的主要动机).

我使用Basic jQuery Slider( http://www.basic-slider.com )为我的客户WordPress网站结合OptionTree插件( http://wordpress.org/extend/plugins/option-树/ )创建精选帖子/内容幻灯片。

基本的jQuery Slider允许您在幻灯片中使用您喜欢的任何标记,因此非常适合创建带有图像,标题,摘录等的精选帖子/内容滑块。为了允许用户管理幻灯片的内容,我使用OptionTree,每张幻灯片都有一个简单的选择字段,其中包含当前网站中的所有页面/帖子。您可以通过从用户选择的帖子中提取相关的内容来配置模板中的滑块。或者,您可以让用户选择类别,标签等,并根据该内容拉入滑块的内容。

也可以使用该组合在您的网站上创建和管理多个滑块。

我正在努力将其转换为全功能(和免费)的WordPress插件。

希望有所帮助,而不是太自我推动-y :)

0
john0514

我一直很满意 jcarousel 。它运行良好,易于使用,并具有一些尼斯功能。

0
googletorp