Multiple Elements Cycle Plugin for Drupal
Interesante plugin para generar un slideshow de varias imágenes a la vez.
La extensión para jQuery puede descargarse de
http://www.willrossi.com/assets/releases/jQuery-Multiple-Elements-Cycle/...
Para usarlo con un campo CCK de imágenes múltiples, seguir los sgtes pasos:
1. Modificar la salida del campo
1.1 En el template.php tenemos que indicar que archivo tpl almacenará la forma como imprimirá el campo
function phptemplate_preprocess_content_field(&$vars, $hook) {
//add a template for image field
if($vars['field']['type_name'] = 'page'){
array_unshift($vars['template_files'], 'content-field-field_imagen');
}
}
//add a template for image field
if($vars['field']['type_name'] = 'page'){
array_unshift($vars['template_files'], 'content-field-field_imagen');
}
}
1.2 Copiamos el archivo content-field.tpl.php que viene dentro del módulo CCK y lo copiamos en la carpeta de nuestro theme. Luego lo renombramos siguiendo el nombre de nuestro campo (content-field-field_XXXXXXXXXX.tpl.php). En mi caso el nombre de mi campo era imagen, así que me quedó así content-field-field_imagen.tpl.php
2. Modificamos la salida del campo en el archivo content-field-field_imagen.tpl.php
Puede quedar así
<?php if (!$field_empty) : ?>
<div class="field field-type-<?php print $field_type_css ?> field-<?php print $field_name_css ?>">
<?php if ($label_display == 'above') : ?>
<div class="field-label"><?php print t($label) ?>: </div>
<?php endif;?>
<div class="cycleElementsArrow">
<a id="verticalPrev" href="#">Scroll Up</a>
</div>
<?php
foreach($items as $item){
$list[] = $item['view'];
}
print theme('item_list', $list, $title = NULL, $type = 'ul', array('id' => 'images-list'));
?>
<div class="cycleElementsArrow">
<a id="verticalNext" href="#">Scroll Down</a>
</div>
</div>
<?php endif; ?>
<div class="field field-type-<?php print $field_type_css ?> field-<?php print $field_name_css ?>">
<?php if ($label_display == 'above') : ?>
<div class="field-label"><?php print t($label) ?>: </div>
<?php endif;?>
<div class="cycleElementsArrow">
<a id="verticalPrev" href="#">Scroll Up</a>
</div>
<?php
foreach($items as $item){
$list[] = $item['view'];
}
print theme('item_list', $list, $title = NULL, $type = 'ul', array('id' => 'images-list'));
?>
<div class="cycleElementsArrow">
<a id="verticalNext" href="#">Scroll Down</a>
</div>
</div>
<?php endif; ?>
3. Instalamos el módulo jquery_update para actualizar el jQuery de nuestro site.
4. Agregamos el sgte código jQuery a un script js donde ya estemos trabajando
//multiple vertical scroll
$('#images-list').parent('.item-list').addClass('cycle-vert');
$('.field-field-imagen').multipleElementsCycle({
vertical: true,
prev: '#verticalPrev',
next: '#verticalNext',
container: '.cycle-vert',
show: 2,
scrollCount: 1,
});
$('#images-list').parent('.item-list').addClass('cycle-vert');
$('.field-field-imagen').multipleElementsCycle({
vertical: true,
prev: '#verticalPrev',
next: '#verticalNext',
container: '.cycle-vert',
show: 2,
scrollCount: 1,
});
