SummArg | Cursos y recursos para webmasters

30/08/2011

Premium jQuery plugin: Grid Accordion

Grid Accordion es un plugin para jQuery que nos permite generar un slider muy original que se adapta fácilmente a cualquier website. El autor ofrece la posibilidad de insertar las imágenes desde una lista HTML o directamente desde un archivo XML. Soporta captions con texto simple o código HTML y se puede añadir un link a cada panel. Soporta funciones de callback y posee una gran cantidad de parámetros para expandir aún mas su personalización.

 

Es un producto a la venta en CodeCanyon y cuesta u$s 8 si utilizamos el sistema de prepago. Posee un excelente soporte por parte del autor.

Utilizar Grid Accordion en WordPress

Para insertar este slider en nuestro theme WordPress debemos seguir los siguientes pasos:

1. Debemos llamar a la versión de jQuery indicada, lo haremos descargando el script y colocandolo en nuestra carpeta /scripts/. Insertamos el siguiente código en el archivo functions.php

function my_init_method() {
    if (!is_admin()) {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', '/wp-content/themes/mitheme/scripts/jquery-1.6.2.min.js');
        wp_enqueue_script( 'jquery' );
    }
}
add_action('init', 'my_init_method');

2. Añadimos soporte para the_post_thumbnail() en nuestro theme. De este modo cuando subamos nuestras imágenes solo debemos marcarlas como destacadas. Es importante que modifiquen desde las opciones de WordPress el alto y ancho de las imágenes “grandes” para que genere automáticamente los tamaños tal como los necesitamos. Si los tamaños ya fueron asignados con anterioridad, existen plugins para regenerarlas (Regenerate Thumbnails).

Insertamos la siguiente línea en nuestro archivo functions.php:

add_theme_support( 'post-thumbnails' );

3. Linkeamos a los dos archivos del recurso que habremos colocado en la carpeta /scripts/ de nuestro theme:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/scripts/grid-accordion.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.gridAccordion.min.js"></script>

4. Pasamos los parámetros de configuración del script. Existen muchas mas opciones de configuración que las aquí mostradas y están bien explayadas en la documentación ofrecida al comprar el plugin. El parámetro panelProperties setea la configuración de cada una de las “cajas” en las que aparecerá el valor que coloquemos para cada imagen como caption. Se enumeran los paneles desde el 0.

<script type="text/javascript">
	$(document).ready(function(){
		$('.accordion').gridAccordion({
			width:940,
			height:440,
			columns:4,
			distance:4,
			closedPanelWidth:25,
			closedPanelHeight:25,
			alignType:'centerCenter',
			openedPanelWidth:'max',
			panelProperties:{
					0:{captionWidth:350, captionHeight:120, captionTop:30, captionLeft:30},
					11:{captionWidth:350, captionHeight:150, captionTop:30, captionLeft:30}
			}});
});
</script>

 

4. En el archivo index.php, o en donde queramos insertar nuestro Grid Accordion, insertamos el bucle de la siguiente manera:

<ul class="accordion">
<?php query_posts('cat=3');
while ( have_posts() ) : the_post(); ?>
      <li><!-- panel 0 -->
	<?php the_post_thumbnail('large'); ?>
	<div class="caption"><?php the_content(); ?></div>
        </li>
              <?php endwhile; wp_reset_query(); ?>
</ul>

Destacamos que esta implementación no está totalmente desarrollada y les dejamos libre la oportunidad de personalizar el tamaño de los captions manualmente así como los parámetros de query_posts() para que se adapte a sus necesidades.

Comprar | Demo

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Grid Accordion es un plugin para jQuery que nos permite generar un slider muy original que se adapta fácilmente a cualquier website. El autor ofrece la posibilidad de insertar las imágenes desde una lista HTML o directamente …..

Dejar un comentario