web-dev-qa-db-fra.com

Qu'est-ce qu'un bon plugin de curseur de contenu jQuery?

Je cherche un plugin qui me permette de placer facilement un curseur basé sur jQuery (parce que je veux éviter les tracas de plusieurs bibliothèques javascript) sur mon site à différents endroits. J'aimerais qu'il soit capable de gérer les images aussi bien que le HTML. Je connais le plugin Featured Content Gallery , mais j'aimerais trouver une alternative (en partie à cause de cela Tweet de Brad Williams, en qui j’ai confiance.

Idéalement, j'aimerais quelque chose qui puisse créer automatiquement un "diaporama" basé sur des catégories, des tags, des publications récentes, etc., mais qui me permette également de créer manuellement un "diaporama" avec le message, l'image ou tout autre contenu de mon choix. utiliser.

Edit: Je cherche un plugin WordPress, pas seulement un plugin jQuery.

plugin-recommendationjquery
4
Travis Northcutt

J'ai opté pour le plugin SlideDeck de WordPress pour ce projet. En bref, il est très bien mis en place, a fière allure, est très flexible, etc. Je suis assez impressionné jusqu’à présent. Le seul inconvénient est que la version gratuite inclut un très petit lien d’image d’attribution, mais honnêtement, cela vaut probablement les 49 dollars qu’ils veulent pour le plugin WP.

1
Travis Northcutt

Je sais que vous avez dit que vous recherchiez un plugin WordPress, mais la plupart des curseurs de contenu sont très faciles à ajouter manuellement et seront beaucoup moins énormes, car il vous suffit d’ajouter les fonctionnalités que vous souhaitez utiliser. Je vais donner quelques options:

JQuery Cycle (de loin le plus simple pour les images)

J'utilise ceci pour les images et écrit un code court pour qu'il puisse être facilement ajouté à des publications, des pages ou des widgets. Pour utiliser ajouter la classe div et les codes courts pour les images:

<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

Dans footer.php, appelez simplement le cycle.js que vous téléchargez depuis http://jquery.malsup.com/cycle/download.html et ajoutez-le entre balises de script ou à votre maître js

jQuery (function () {jQuery ('. Diaporama'). 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');

Pour les curseurs contenant des publications, HTML ou pratiquement tout ce que j'utilise, Outils JQuery Scrollable http://flowplayer.org/tools/scrollable/ index.html

Les instructions sur le site jQuery Tools sont très bien écrites et, fondamentalement, vous placez le curseur dans une div, puis les articles ou articles individuels sont enveloppés dans une autre div à l'intérieur du div.

Vous devez appeler le plugin js dans votre pied de page et ajouter la fonction à votre maître js ou aux balises de script: jQuery (function () {jQuery (". Scrollable"). Scrollable ({vertical: true, mousewheel: false}); });

EDIT: ajoute un message de requête par catégorie à n’importe quel fichier de modèle pour permettre à l’utilisateur final d’ajouter des messages au curseur.

Le code suivant ajouterait tous les messages de la catégorie 8 au curseur:

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

Pour que toute la configuration ressemble davantage à un plugin, enregistrez et mettez en file d'attente les outils jquery dans functions.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');
}
?>

Ajoutez maintenant une autre fonction pour ajouter la configuration du curseur:

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

Divulgation complète, je suis sur le point de recommander un plugin jQuery que j'ai développé. - Ce n’est pas non plus un plugin WordPress (je travaille dessus), mais peut toujours être utilisé efficacement pour ce que vous suggérez (en fait, l’utilisation que vous suggérez était ma principale motivation pour le développer)

J'utilise Basic jQuery Slider ( http://www.basic-slider.com ) pour les sites WordPress de mes clients en combinaison avec le plugin OptionTree ( http://wordpress.org/extend/plugins/option-tree/ ) pour créer des articles/diapositives de contenu en vedette.

Le curseur jQuery de base vous permet d’utiliser le balisage de votre choix dans les diapositives. Il est donc parfait pour créer un curseur de publication/contenu en vedette avec une image, un titre, un extrait, etc. Pour permettre à l’utilisateur de gérer le contenu des diapositives, j’utilise OptionTree, avec un simple champ de sélection pour chaque diapositive contenant toutes les pages/publications actuellement sur le site. C'est à vous de configurer le curseur dans vos modèles en extrayant les éléments de contenu pertinents des publications que l'utilisateur a sélectionnées. Vous pouvez également laisser l'utilisateur sélectionner une catégorie, une balise, etc. et extraire le contenu du curseur en fonction de cela.

Il est également possible d’utiliser cette combinaison pour créer et gérer plusieurs curseurs sur votre site.

Je travaille actuellement à transformer ceci en un plugin WordPress complet (et gratuit).

Espérons que cela aide et n'était pas trop auto-promouvoir-y :)

0
john0514

J'ai été très heureux avec jcarousel . Cela fonctionne bien, est facile à utiliser et a quelques fonctionnalités de Nice.

0
googletorp