Slideshow Vertical con imágenes agrupadas para un campo CCK usando Jcycle
Ya lo había hecho antes usando otro plugin jquery pero esta vez me animé a usar jcycle porque me parece una librería mucho más completa. Tome como referencia este enlace
http://jquery.malsup.com/cycle/div.html
Primero, hay que descargar el archivo jcycle de http://jquery.malsup.com/cycle/
Tenemos que usar el archivo jquery.cycle.all.min.js porque es el que incluye los efectos que necesitamos para el movimiento vertical (scrollUp ó scrollDown)
Lo añadimos a nuestro archivo .info dentro de nuestro tema
scripts[] = jquery.cycle.all.min.js
scripts[] = test6.js
scripts[] = test6.js
Y dentro de nuestro archivo test6.js ponemos algo como
$(document).ready(function() {
$('.field-field-image .field-items').css({'width':'200px'});
$('.field-field-image .field-items').cycle({
fx: 'scrollUp',
speed: 300,
timeout: 2000,
});
});
$('.field-field-image .field-items').css({'width':'200px'});
$('.field-field-image .field-items').cycle({
fx: 'scrollUp',
speed: 300,
timeout: 2000,
});
});
Luego copiamos el archivo content-field.tpl.php a nuestro theme, le cambiamos el nombre de acuerdo al campo imagefield que estemos usando y trabajamos sobre él.
<?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="field-items">
<?php
$n = ceil(count($items)/3);
for($i=0; $i<$n;$i++) {
print "<div class=slide>";
for($j=0;$j<3;$j++){
print $items[$j]['view'] ;
}
print "</div>";
$items = array_slice($items,2);
}
?>
</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="field-items">
<?php
$n = ceil(count($items)/3);
for($i=0; $i<$n;$i++) {
print "<div class=slide>";
for($j=0;$j<3;$j++){
print $items[$j]['view'] ;
}
print "</div>";
$items = array_slice($items,2);
}
?>
</div>
</div>
<?php endif; ?>
En este caso, yo necesitaba usar 3 imagenes por cada pasada del slideshow, de allí que el código muestra que divido entre 3 :)
Observar que uso un selector='slide' cada 3 imagenes como agrupador y al selector = '.field-field-image .field-items' en la sentencia jQuery como contenedor de los 3 slides que me han resultado.
Adjunto video acerca de como queda.
Etiquetas:
Archivo:
