web-dev-qa-db-ja.com

良いjQueryコンテンツスライダープラグインとは何ですか？

私は私のサイトのさまざまな場所にjQueryベースのスライダーを簡単に配置できるプラグインを探しています。 HTMLだけでなく画像も扱えるようにしたいです。 特集コンテンツギャラリー pluginを知っていますが、私はこれに代わるものを見つけたいと思います（部分的にはこれが原因で Tweet の意見を信頼しています）。

理想的には、カテゴリ、タグ、最近の投稿などに基づいて自動的に「スライドショー」を作成できるものが欲しいのですが、必要な投稿、画像、またはその他のコンテンツを含む「スライドショー」を手動で作成できます。使用する。

編集：私はWordPressのプラグインを探しています、単なるjQueryのプラグインではありません。

plugin-recommendationjquery
4
Travis Northcutt

このプロジェクトではWordPress用の SlideDeck プラグインを使用しました。一言で言えば、それは非常にうまくまとめられて、素晴らしく見え、非常に柔軟で、等々です。私はこれまでかなり感銘を受けています。唯一の欠点は、無料版には非常に小さなアトリビューション画像へのリンクが含まれていることですが、正直なところ、おそらくWPプラグインに49ドルの価値があるでしょう。

1
Travis Northcutt

私はあなたがあなたがWordPressプラグインを探していると言ったことを知っていますが、ほとんどのコンテンツスライダーは手動で追加するのが非常に簡単で、あなたが使いたい機能を追加する必要があるだけで大​​いに少なくなります。いくつかオプションを挙げます。

JQueryサイクル（これまでのところ最も単純な画像）

私はこれを画像に使っていて、それを簡単に投稿、ページ、ウィジェットに追加できるように短いコードを書いています。使用するには、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、または私が使っているほとんどすべてのものを含むスライダーの場合スクロール可能なhttp://flowplayer.org/tools/scrollable/index.html

JQuery Toolsサイトの指示はとてもよく書かれていて、基本的にあなたはdivでスライダーを包みます、それから個々の投稿またはアイテムは主要なものの中の別のdivで包まれます。

フッターでプラグインjsを呼び出し、マスターjsまたはスクリプトタグに関数を追加する必要があります。jQuery（function（）{jQuery（ "。scrollable"）。scrollable（{vertical：true、mousewheel：false}）; ;））;

EDIT：エンドユーザーがスライダーに投稿を追加できるように、カテゴリー別のクエリ投稿を任意のテンプレートファイルに追加します。

次のコードは、カテゴリ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>

セットアップ全体をよりプラグイン風にするには、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プラグインではありません（私は取り組んでいます）が、あなたが提案しているもののために効果的に使用することができます（実際、あなたが提案している使用はそれを開発する私の主な動機でした）。

私はクライアントのWordPressサイトにOptionTreeプラグインと組み合わせてBasic jQuery Slider（ http://www.basic-slider.com ）を使用しています（ http://wordpress.org/extend/plugins/option-ツリー/ ）で注目の投稿/コンテンツスライドを作成します。

基本的なjQuery Sliderはスライドで好きなマークアップを使うことができるので、画像、見出し、抜粋などで注目の投稿/コンテンツスライダーを作成するのに最適です。ユーザーがスライドのコンテンツを管理できるようにするには、現在サイトにあるすべてのページ/投稿を含む各スライドのための単純な選択フィールドを持つOptionTree。ユーザーが選択した投稿から関連するコンテンツを引き出して、テンプレートのスライダーを設定するのはあなた次第です。あるいは、ユーザーにカテゴリ、タグなどを選択させ、それに基づいてスライダーのコンテンツを取り込むこともできます。

この組み合わせを使用して、サイトに複数のスライダを作成して管理することもできます。

私は現在これをフル機能の（そして無料の）WordPressプラグインに変えることに取り組んでいます。

それが助けになり、あまりにも自己宣伝しないことを願っています：y :)

0
john0514

jcarousel にはとても満足しています。それはうまく機能し、使いやすく、そしていくつかの素晴らしい機能を持っています。

0
googletorp