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

时间:2010-08-20 作者:Travis Northcutt

我正在寻找一个插件,它可以让我轻松地将基于jQuery的滑块(因为我想避免多个javascript库的麻烦)放在我的站点的不同位置。我希望它能够处理图像以及html。我知道Featured Content Gallery 插件,但我想找到一个替代方案(部分是因为这个tweet 我相信布拉德·威廉姆斯的观点)。

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

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

3 个回复
最合适的回答,由SO网友:Travis Northcutt 整理而成

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

SO网友:Chris_O

我知道你说你正在寻找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
在页脚中。php只是调用循环。您下载的jshttp://jquery.malsup.com/cycle/download.html并将其添加到脚本标记之间或主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\');
For Sliders that contain posts, HTML, or pretty much anything I use JQuery Tools Scrollablehttp://flowplayer.org/tools/scrollable/index.html

jQuery工具站点上的说明编写得非常好,基本上您将滑块包装在一个div中,然后将各个帖子或项目包装在主div中的另一个div中。

您必须在页脚中调用插件js,并将该函数添加到主js或脚本标记中:jQuery(function(){jQuery(“.scrollable”)。可滚动({vertical:true,mousewheel:false});});

EDIT: Add query post by category to any template file to allow end user to add posts to the slider.

以下代码会将类别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>
要使整个设置更像插件,请在函数中注册jquery工具并将其排队。php

<?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\');

SO网友:john0514

完全公开,我将推荐一个我开发的jQuery插件。-它也不是WordPress插件(不过我正在开发),但仍然可以有效地用于您的建议(事实上,您建议的使用是我开发它的主要动机)

我使用基本jQuery滑块(http://www.basic-slider.com) 为我的客户提供WordPress站点和OptionTree插件(http://wordpress.org/extend/plugins/option-tree/) 创建特色帖子/内容幻灯片。

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

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

我目前正致力于将此转换为一个功能齐全(免费)的WordPress插件。

希望有帮助,不要太自我推销-y:)

什么是一个好的jQuery内容滑块插件? - 小码农CODE - 行之有效找到问题解决它

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

时间:2010-08-20 作者:Travis Northcutt

我正在寻找一个插件,它可以让我轻松地将基于jQuery的滑块(因为我想避免多个javascript库的麻烦)放在我的站点的不同位置。我希望它能够处理图像以及html。我知道Featured Content Gallery 插件,但我想找到一个替代方案(部分是因为这个tweet 我相信布拉德·威廉姆斯的观点)。

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

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

3 个回复
最合适的回答,由SO网友:Travis Northcutt 整理而成

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

SO网友:Chris_O

我知道你说你正在寻找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
在页脚中。php只是调用循环。您下载的jshttp://jquery.malsup.com/cycle/download.html并将其添加到脚本标记之间或主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\');
For Sliders that contain posts, HTML, or pretty much anything I use JQuery Tools Scrollablehttp://flowplayer.org/tools/scrollable/index.html

jQuery工具站点上的说明编写得非常好,基本上您将滑块包装在一个div中,然后将各个帖子或项目包装在主div中的另一个div中。

您必须在页脚中调用插件js,并将该函数添加到主js或脚本标记中:jQuery(function(){jQuery(“.scrollable”)。可滚动({vertical:true,mousewheel:false});});

EDIT: Add query post by category to any template file to allow end user to add posts to the slider.

以下代码会将类别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>
要使整个设置更像插件,请在函数中注册jquery工具并将其排队。php

<?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\');

SO网友:john0514

完全公开,我将推荐一个我开发的jQuery插件。-它也不是WordPress插件(不过我正在开发),但仍然可以有效地用于您的建议(事实上,您建议的使用是我开发它的主要动机)

我使用基本jQuery滑块(http://www.basic-slider.com) 为我的客户提供WordPress站点和OptionTree插件(http://wordpress.org/extend/plugins/option-tree/) 创建特色帖子/内容幻灯片。

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

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

我目前正致力于将此转换为一个功能齐全(免费)的WordPress插件。

希望有帮助,不要太自我推销-y:)

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上,我不知道我是如何产生它的,或者它是否是正常的。我正在开发自己的插件,当一个足球队/足球队被输入到一个框中时,它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">