Show node field as a carousel using jCarousel module programmatically?

Question

I have a content type with a fiel called: fotos-carousel (image type) which I want to show as a carousel. I can't use views to do this.

I installed the jcarousel module and read the documentation to add a carousel programmatically.

Then I create a tpl file to change the output of this field: field--field-fotos-carousel.tpl.php

and add this code:

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
<?php foreach ($items as $delta => $item) : ?>
  <?php 
    $items_carousel[]='<img src="sites/default/files/'.$item['#item']['filename'].'" width="75" height="75" alt="" />';
  ?>
<?php endforeach; ?>
<?php
            $options = array ('visible' => 1,'scroll' => 1,);
            print theme('jcarousel', array('items' => $items_carousel, 'options' => $options));
            jcarousel_add('.jcarousel-id-1', array('vertical' => TRUE));
        ?>

The output (ul, li, images) is fine but the carousel is not loaded (jquery)

Anyone has done this before? What am I missing?

Answer 1

Have you try with this module: http://drupal.org/project/field_slideshow It will help you to build a carousel with the content of a field.

As field slideshow is not the best options, because you need field collection.

Another option is this other.

Use a normal image field. Build a block view with the images from the node. With Display suit, you can choose what fields you can show or hidden, you can hidden the imagefield. And also use Display Suit (admin/structure/ds/fields) to become the views block as a field for the content type.

The last step is to enable the new field.

Answer 2

You can combine EVA (Entity Views Attachment) and Flexslider to achieve this.

1. Create a new view
2. Add an EVA display
3. Select your bundle and content type
4. Add Content:nid as as contextual filter, provide the default Content ID from URL
5. Add your content type as filter, and add the image field you want.
6. Under the multiple results field, uncheck the option that shows them all in one line.
7. Set the format to Flexslider, and choose the Flexslider settings you want to use.

Under the settings, just look at the Flexslider example and use the carousel settings. Not only does Flexslider perform better in general the Field Slideshow, but it also gives you a lot of flexibility when it comes to theming.

Answer 3

Try jQuery Carousel module. It provides Views Style Plugin and Field Formatter Plugin both. It also provides an option to use the horizontal and vertical carousel.