it-swarm-vi.tech

Một plugin trượt nội dung jQuery tốt là gì?

Tôi đang tìm kiếm một plugin cho phép tôi dễ dàng đặt một jQuery dựa trên (vì tôi muốn tránh sự rắc rối của nhiều thư viện javascript) trên trang web của mình ở nhiều nơi khác nhau. Tôi muốn nó có thể xử lý hình ảnh cũng như html. Tôi biết về plugin Thư viện nội dung nổi bật , nhưng tôi muốn tìm một giải pháp thay thế (một phần vì điều này Tweet của Brad Williams, người mà tôi tin tưởng).

Lý tưởng nhất là tôi muốn một cái gì đó có thể tự động tạo ra một 'slideshow' dựa trên các danh mục, thẻ, bài đăng gần đây, v.v. để sử dụng.

Chỉnh sửa: Tôi đang tìm kiếm một plugin WordPress, không chỉ là một plugin jQuery.

4
Travis Northcutt

Tôi đã giải quyết plugin SlideDeck cho WordPress cho dự án này. Nói tóm lại, nó rất hợp với nhau, trông rất tuyệt, rất linh hoạt, v.v ... cho đến nay tôi khá ấn tượng. Hạn chế duy nhất là phiên bản miễn phí bao gồm một liên kết hình ảnh phân bổ rất nhỏ, nhưng thành thực mà nói, nó có thể đáng giá $ 49 mà họ muốn cho plugin WP.

1
Travis Northcutt

Tôi biết bạn nói rằng bạn đang tìm kiếm một Plugin WordPress nhưng hầu hết các thanh trượt nội dung rất dễ dàng để thêm thủ công và sẽ bớt phình to hơn vì bạn chỉ phải thêm các tính năng bạn muốn sử dụng. Tôi sẽ đưa ra một vài lựa chọn:

Chu kỳ JQuery(cho đến nay là đơn giản nhất cho hình ảnh)

Tôi sử dụng điều này cho hình ảnh và đã viết một mã ngắn cho nó để có thể dễ dàng thêm vào bài viết, trang hoặc widget. Để sử dụng thêm lớp div và mã ngắn cho hình ảnh:

<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

Trong footer.php, chỉ cần gọi cycl.js mà bạn tải xuống từ http://jquery.malsup.com/ Motorcycle/doad.html và thêm phần này vào giữa các thẻ script hoặc vào js chính của bạn

jQuery (function () {jQuery ('. slideshow'). chu kỳ ();});

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

Đối với Thanh trượt có chứa bài đăng, HTML hoặc khá nhiều thứ tôi sử dụng JQuery Tools Scrollablehttp://flowplayer.org/tools/scrollable/index. html

Các hướng dẫn trên trang web Công cụ jQuery được viết rất tốt và về cơ bản, bạn bọc thanh trượt trong một div sau đó các bài viết hoặc mục riêng lẻ được bọc trong một div khác bên trong chính.

Bạn phải gọi plugin js trong phần chân trang của mình và thêm hàm vào js chính hoặc trong các thẻ script: jQuery (function () {jQuery (". Scrollable"). Scrollable ({vertical: true, mousewheel: false}); });

EDIT: Thêm bài đăng truy vấn theo danh mục vào bất kỳ tệp mẫu nào để cho phép người dùng cuối thêm bài đăng vào thanh trượt.

Đoạn mã sau sẽ thêm bất kỳ bài đăng nào trong danh mục 8 vào thanh trượt:

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

Để làm cho toàn bộ thiết lập thêm Plugin như, hãy đăng ký và liệt kê các công cụ jquery trong hàm.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');
}
?>

Bây giờ thêm một chức năng khác để thêm cấu hình thanh trượt:

// 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

Tiết lộ đầy đủ, tôi sắp giới thiệu một plugin jQuery mà tôi đã phát triển. - Đây cũng không phải là plugin WordPress (mặc dù tôi đang làm việc với nó), nhưng vẫn có thể được sử dụng hiệu quả cho những gì bạn đang đề xuất (thực tế việc sử dụng mà bạn đề xuất là động lực chính của tôi để phát triển nó) .

Tôi sử dụng Basic jQuery Slider ( http://www.basic-slider.com ) cho các khách hàng của tôi các trang web WordPress kết hợp với plugin OptionTree ( http://wordpress.org/extend/plugins/option-tree/ ) để tạo các bài đăng/slide nội dung nổi bật.

Basic jQuery Slider cho phép bạn sử dụng bất kỳ đánh dấu nào bạn thích trong các trang trình bày, vì vậy, hoàn hảo để tạo một thanh trượt nội dung/bài đăng nổi bật với hình ảnh, tiêu đề, đoạn trích, v.v. OptionTree, với một trường chọn đơn giản cho mỗi slide chứa tất cả các trang/bài đăng hiện có trong trang web. Bạn chỉ cần định cấu hình thanh trượt trong các mẫu của mình bằng cách lấy ra các phần nội dung có liên quan từ các bài đăng mà người dùng đã chọn. Ngoài ra, bạn có thể cho phép người dùng chọn một danh mục, thẻ, v.v. và kéo nội dung cho thanh trượt dựa trên đó.

Cũng có thể sử dụng kết hợp đó để tạo và quản lý nhiều thanh trượt trên trang web của bạn.

Tôi hiện đang làm việc để biến điều này thành một plugin WordPress đầy đủ tính năng (và miễn phí).

Hy vọng rằng sẽ giúp và không quá tự quảng cáo-y :)

0
john0514

Tôi đã rất hài lòng với jcarousel . Nó hoạt động tốt, dễ sử dụng và có một số tính năng Nice.

0
googletorp