it-swarm-tr.com

İyi bir jQuery içerik kaymak eklentisi nedir?

Kolayca jQuery tabanlı (birden fazla javascript kütüphanesinin sıkıntısını önlemek istiyorum) sürgüsünü çeşitli yerlerde siteme kolayca yerleştirmeme izin verecek bir eklenti arıyorum. Html gibi görüntüleri de kaldırabilmeyi isterdim. Seçili İçerik Galerisi eklentisinin farkındayım, ancak alternatifini bulmak isterim (kısmen bu nedenle - Tweet Brad Williams'a güveniyorum).

İdeal olarak, kategorilere, etiketlere, en son yayınlara vb. Göre otomatik olarak bir slayt gösterisi oluşturabilecek bir şey istiyorum, ancak bu da istediğim yayın, resim veya diğer içeriklerle manuel olarak bir 'slayt gösterisi' oluşturmamı sağlayabilir. kullanmak.

Düzenleme: Sadece bir jQuery eklentisi değil, bir WordPress eklentisi arıyorum.

4
Travis Northcutt

Bu proje için WordPress için SlideDeck plugin'i seçtim. Kısacası, çok iyi bir şekilde bir araya getirilmiş, harika görünüyor, çok esnek, vs. vs. Şimdiye kadar çok etkilendim. Tek dezavantajı, ücretsiz sürümün çok küçük bir atıf görüntü bağlantısı içermesidir, ancak dürüst olmak gerekirse, WP eklentisi için muhtemelen 49 $ 'a değer.

1
Travis Northcutt

Bir WordPress Eklentisi aradığınızı söylediğinizi biliyorum, ancak içerik kaydırıcılarının çoğu elle eklemek çok kolay ve daha az şişirilmiş olacak çünkü yalnızca kullanmak istediğiniz özellikleri eklemek zorundasınız. Birkaç seçenek vereceğim:

JQuery Cycle (resimler için bugüne kadarki en basit)

Bunu resimler için kullanıyorum ve yazılara, sayfalara veya widget'lara kolayca eklenebilmesi için kısa bir kod yazdım. Görüntülere div sınıfını ve kısa kodları eklemek için:

<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 içinde http://jquery.malsup.com/cycle/download.html adresinden indirdiğiniz cycle.js kodunu çağırmanız yeterlidir ve bunu script etiketleri arasına veya ana js'nize ekleyin.

jQuery (function () {jQuery ('. slayt gösterisi'). 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');

Mesajları, HTML'yi veya hemen hemen her şeyi içeren kaydırıcılar için JQuery Tools Kaydırılabilir http://flowplayer.org/tools/scrollable/index.html

JQuery Tools sitesindeki talimatlar çok iyi yazılmıştır ve temel olarak sürgüyü bir div içine sarınız, sonra bireysel yazılar veya eşyalar ana içindeki başka bir div içine sarılır.

Eklenti j'lerini altbilginizde çağırmanız ve işlevi ana js'inize veya script etiketlerine eklemeniz gerekir: jQuery (function () {jQuery (". Kaydırılabilir"). });

EDIT: Son kullanıcının kaydırıcıya mesaj ekleyebilmesi için herhangi bir şablon dosyasına sorgu yazısını ekleyin.

Aşağıdaki kod, kategori 8'deki yazıyı kaydırıcıya ekler:

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

Tüm kurulumu daha da eklenti yapmak için, jQuery tools işlevlerini

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

Şimdi kaydırıcı yapılandırmasını eklemek için başka bir işlev ekleyin:

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

jcarousel ile çok mutlu oldum. İyi çalışıyor, kullanımı kolay ve bazı güzel özelliklere sahip.

0
googletorp