¿Qué es un buen plugin de slider de contenido para jQuery?

20 ago 2010, 20:02:15
Vistas: 3.18K
Votos: 3

Estoy buscando un plugin que me permita colocar fácilmente un slider basado en jQuery (porque quiero evitar el problema de múltiples bibliotecas JavaScript) en mi sitio en varios lugares. Me gustaría que pueda manejar imágenes así como HTML. Conozco el plugin Featured Content Gallery, pero me gustaría encontrar una alternativa (en parte debido a este tweet de Brad Williams, cuya opinión respeto).

Idealmente, me gustaría algo que pueda crear automáticamente un 'slideshow' basado en categorías, etiquetas, publicaciones recientes, etc., pero que también me permita crear manualmente un 'slideshow' con cualquier publicación, imagen u otro contenido que desee usar.

Edición: Estoy buscando un plugin para WordPress, no solo un plugin de jQuery.

4
Comentarios

Lo siento, ojalá pudiera ayudarte. Siempre escribo los míos propios. Sin embargo, me interesaría saber qué piensan los demás.

John P Bloch John P Bloch
20 ago 2010 20:27:04

Podría ayudar si describes exactamente cómo quieres que funcione tu "slider". ¿Quieres una presentación de diapositivas automática con texto superpuesto como Featured Content Gallery? ¿O algo más?

EAMann EAMann
20 ago 2010 20:40:27

EAMann - sí, algo así sería perfecto. Cuanta más flexibilidad, mejor. Editaré mi publicación para agregar más.

Travis Northcutt Travis Northcutt
20 ago 2010 20:57:55

No conozco uno que reproduzca tanta funcionalidad... pero definitivamente es una idea. Estaré atento, pero coincido con John en que me tienta simplemente escribir el mío propio.

EAMann EAMann
20 ago 2010 21:24:13
Todas las respuestas a la pregunta 4
5

Sé que dijiste que estás buscando un plugin para WordPress, pero la mayoría de los sliders de contenido son muy fáciles de añadir manualmente y serán mucho menos pesados porque solo tienes que agregar las funciones que quieras usar. Te daré algunas opciones:

JQuery Cycle (sin duda el más simple para imágenes)

Yo uso esto para imágenes y escribí un shortcode para que se pueda añadir fácilmente a entradas, páginas o widgets. Para usarlo, añade el div con la clase y los shortcodes para las imágenes:

<div class="slideshow"> [slideimage name=nombre-de-la-imagen-subida-al-media] [slideimage name=siguiente-nombre-de-imagen] </div> (Esto solo funcionará para .jpg's, si quieres usar .png cambia la extensión a 'png' en la función del shortcode

En footer.php simplemente llama al cycle.js que descargues de http://jquery.malsup.com/cycle/download.html y añade esto entre etiquetas script o a tu archivo js principal:

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' title='$name' />";
        if ($url) $output = "<a href='$url' title='$name'>".$output.'</a>';
        return $output;
    }
    else {
        trigger_error("'$path$name.$ext' imagen no encontrada", E_USER_WARNING);
        return '';
    }
}
add_shortcode('slideimage','slideimage_shortcode');

Para sliders que contengan entradas, HTML o prácticamente cualquier cosa, uso JQuery Tools Scrollable http://flowplayer.org/tools/scrollable/index.html

Las instrucciones en el sitio de jQuery Tools están muy bien escritas y básicamente envuelves el slider en un div, luego las entradas o elementos individuales se envuelven en otro div dentro del principal.

Debes llamar al plugin js en tu footer y añadir la función a tu archivo js principal o entre etiquetas script:

jQuery(function() {
jQuery(".scrollable").scrollable({vertical:true,mousewheel:false});
});

EDIT: Añadir query de posts por categoría a cualquier archivo de plantilla para permitir al usuario final añadir entradas al slider.

El siguiente código añadiría cualquier entrada en la categoría 8 al slider:

<div id="slider">
  <?php query_posts('post_type=post&order=asc&cat=8'); ?>

        <div id="actions">
    <a class="prev">&laquo; Atrás</a>
    <a class="next">Más &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>

Para hacer toda la configuración más similar a un Plugin, registra y encola jquery tools en functions.php

<?php
if ( !is_admin() ) { // instrucción para cargar solo si no es el área de administración
   // registra la ubicación de tu script, dependencias y versión
   wp_register_script('jquerytools',
       'http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js',
       array('jquery'),
       '1.4.2' );
   // encola el script
   wp_enqueue_script('jquerytools');
}
?>

Ahora añade otra función para agregar la configuración del slider:

// añade configuración de jquery tools al 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');
20 ago 2010 22:48:00
Comentarios

El problema es que necesito que esto sea utilizable por alguien que no tenga experiencia en html/css/php/etc., de ahí la necesidad de un plugin. Yo puedo configurar todo, pero esta otra persona tiene que poder usar lo que yo configure.

Travis Northcutt Travis Northcutt
20 ago 2010 23:02:31

Podrías construir en una plantilla una consulta de publicaciones por categoría, entonces el usuario solo tendría que marcar la categoría correcta para que la publicación aparezca. Agregaré el código de la plantilla arriba.

Chris_O Chris_O
20 ago 2010 23:41:50

Si lo configuras para que acepte una categoría específica, tu usuario solo tendrá que escribir una publicación y asignarle la categoría, y debería funcionar.

kevtrout kevtrout
20 ago 2010 23:49:59

@tnorthcutt - ¿no puedes construir un plugin con el código de arriba? jQuery Cycle es definitivamente el camino a seguir; he investigado mucho sobre ellos y sigo volviendo a ti.

MikeSchinkel MikeSchinkel
21 ago 2010 01:08:38

Mike, debido a limitaciones de tiempo, lamentablemente no. Nunca he construido un plugin antes, y aunque planeo aprender a hacerlo muy pronto, eso no encaja en el cronograma de este proyecto.

Travis Northcutt Travis Northcutt
21 ago 2010 03:44:06
0

He decidido utilizar el plugin SlideDeck para WordPress en este proyecto. En resumen, está muy bien elaborado, tiene un aspecto excelente, es muy flexible, etc., etc. Hasta ahora estoy bastante impresionado. El único inconveniente es que la versión gratuita incluye una pequeña imagen de atribución con enlace, pero honestamente, probablemente valga los $49 que piden por el plugin de WordPress.

21 ago 2010 03:46:45
1

He estado muy contento con jcarousel. Funciona bien, es fácil de usar y tiene algunas características interesantes.

20 ago 2010 23:57:39
Comentarios

Veo que hay un plugin de WordPress para jcarousel, pero parece que es solo para imágenes, más como un plugin de galería de imágenes.

Travis Northcutt Travis Northcutt
21 ago 2010 00:09:02
0

Revelación completa, estoy a punto de recomendar un plugin de jQuery que desarrollé. - Tampoco es un plugin de WordPress (aunque estoy trabajando en ello), pero aún se puede usar eficazmente para lo que estás sugiriendo (de hecho, el uso que sugieres fue mi principal motivación para desarrollarlo).

Utilizo Basic jQuery Slider (http://www.basic-slider.com) para los sitios WordPress de mis clientes en combinación con el plugin OptionTree (http://wordpress.org/extend/plugins/option-tree/) para crear diapositivas de publicaciones/contenidos destacados.

Basic jQuery Slider te permite usar cualquier marcado que desees en las diapositivas, por lo que es perfecto para crear un slider de publicaciones/contenidos destacados con una imagen, encabezado, extracto, etc. Para permitir que el usuario gestione el contenido de las diapositivas, uso OptionTree, con un simple campo de selección para cada diapositiva que contiene todas las páginas/publicaciones actuales en el sitio. Solo depende de ti configurar el slider en tus plantillas extrayendo las piezas relevantes de contenido de las publicaciones que el usuario ha seleccionado. Alternativamente, podrías permitir que el usuario seleccione una categoría, etiqueta, etc. y extraer contenido para el slider basado en eso.

También es posible usar esa combinación para crear y gestionar múltiples sliders en tu sitio.

Actualmente estoy trabajando en convertir esto en un plugin de WordPress completo (y gratuito).

Espero que eso ayude y no haya sido demasiado autopromocional :)

28 feb 2012 21:43:56