Slideshow with Drupal Views Cycle module
Views Cycle is a nice module that uses the jQuery Cycle plug-in to provide image slideshow with many different types of transition effects. In Drupal, you are going to create a content type to upload images, generate a view for the uploaded images and style it with the Views Cycle module. The module also provides with many variable settings that you can set. [For Drupal 6]
Requirements:
- CCK: http://drupal.org/project/cck
- Views 2: http://drupal.org/project/views
- Views cycle: http://drupal.org/project/views_cycle
- jQuery cycle plugin: http://www.malsup.com/jquery/cycle/
Installation:
- Download and enable CCK & Views modules. To allow image upload, also add imagefield module. Imagecache is optional.
- Download views_cycle and the jQuery cycle plugin. The jQuery cycle plugin also includes a javascript file – jquery.cycle.all.min.js. Copy this file into the views_cycle module directory and rename it as jquery.cycle.js. Now, enable views_cycle module.
Create content type:
- Login as admin and go to admin/content/types and click on the Add content types tab to add a new content type
- Give a Name to your content type and enter the machine-readable Type. For example, Name – Animation and Type – cycle_anim
- In Submission form settings, remove the body field
- In Workflow settings, uncheck Promoted to front page
- In Comment settings, set it to Disabled
- Click on the Save button
- In the Content types list page, click on Manage fields for the new content type that you have created just now
- Add a new field with Label as Image and Field name as field_anim_image
- Under Select a field type, select File and in Form element select Image. Click on Save button
- In Permitted upload file extensions, enter values as png gif jpg jpeg
- Under Global settings, check the Required checkbox and set Number of values to 1. Click on the Save field settings button
- Click on the Display fields. And under Teaser, select Image and under Full node, select Image linked to node
Create content:
- Browse to node/add and click on the Animation content type to add images for the animation
- Create at least 2 nodes with different images
Create view:
- Browse to admin/build/views/add
- For View name, enter Animation and set the View type to Node. Click Next button
- Click + (Add) button under Fields and select Content: Image (field_anim_image). Click the Add button
- Set the Label to None and under Format, select Image linked to node. Click on Update button
- Click + (Add) button under Filters. Select Node: Published and Node: Type. Click on Add button
- Under Node: Published configuration settings, set it to Yes and click Update button
- Under Node: Type configuration settings, for Is one of, check Animation under Node type. Click Update button
- In the Basic settings group, for Style, click on Unformatted link. Set the default to Cycle and click Update button
- Under Default style options, set the various values for your animation. You can come back to the view and change the values later.
- Now you can add a block view or a page view for your animation.
With my animation, the Views Cycle out put the animation with images put in unordered list and default padding on the top and left sides of the container. One way to fix this is through your CSS. Though this module is simple and very nice, there are other variations for slideshow / carousel / rotator with many more features like the DD Block (http://drupal.org/project/ddblock) for Drupal. Have a look at the comparison here http://drupal.org/node/418616.
[This article is for Drupal 6]
| Print article | This entry was posted by Sridhar on March 29, 2010 at 5:59 pm, and is filed under Drupal. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |

about 1 year ago
Thanks,
This got right to the point and was easy to follow. Good job!
Jim
about 1 year ago
Excuse me for the quality of my enflish (i am in a french speaking country,Senegal).
I have followed step by step your instructions but after creating the view (step 8. In the Basic settings group, for Style, click on Unformatted link. Set the default to Cycle and click Update button),i have this message:
* warning: Invalid argument supplied for foreach() in
C:\xampp\htdocs\drupal\sites\all\modules\views_cycle\views_cycle.theme.inc on line 34.
* warning: Invalid argument supplied for foreach() in
C:\xampp\htdocs\drupal\sites\all\modules\views_cycle\views_cycle.theme.inc on line 88.
Help me please,i cannot solve this problem.
Thank you.
about 1 year ago
I tried it and did not get any errors. Can you save the view and post the view export code here?
SM
about 1 year ago
same thing happened to me. am using drupal 6.17. what a shame. spent over an hour so far on this.
about 1 year ago
Ok, got it to a point where the two images just display on top of each other (no animation: both images are displayed simultaneously one on top of the other).
$view = new view;
$view->name = ‘Animation’;
$view->description = ‘An image animation’;
$view->tag = ”;
$view->view_php = ”;
$view->base_table = ‘node’;
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display(‘default’, ‘Defaults’, ‘default’);
$handler->override_option(‘fields’, array(
‘field_animated_image_fid’ => array(
‘label’ => ”,
‘alter’ => array(
‘alter_text’ => 0,
‘text’ => ”,
‘make_link’ => 0,
‘path’ => ”,
‘link_class’ => ”,
‘alt’ => ”,
‘prefix’ => ”,
‘suffix’ => ”,
‘target’ => ”,
‘help’ => ”,
‘trim’ => 0,
‘max_length’ => ”,
‘word_boundary’ => 1,
‘ellipsis’ => 1,
‘html’ => 0,
‘strip_tags’ => 0,
),
‘empty’ => ”,
‘hide_empty’ => 0,
‘empty_zero’ => 0,
‘link_to_node’ => 0,
‘label_type’ => ‘none’,
‘format’ => ‘image_nodelink’,
‘multiple’ => array(
‘group’ => TRUE,
‘multiple_number’ => ”,
‘multiple_from’ => ”,
‘multiple_reversed’ => FALSE,
),
‘exclude’ => 0,
‘id’ => ‘field_animated_image_fid’,
‘table’ => ‘node_data_field_animated_image’,
‘field’ => ‘field_animated_image_fid’,
‘relationship’ => ‘none’,
),
));
$handler->override_option(‘filters’, array(
‘status’ => array(
‘operator’ => ‘=’,
‘value’ => ’1′,
‘group’ => ’0′,
‘exposed’ => FALSE,
‘expose’ => array(
‘operator’ => FALSE,
‘label’ => ”,
),
‘id’ => ‘status’,
‘table’ => ‘node’,
‘field’ => ‘status’,
‘relationship’ => ‘none’,
),
‘type’ => array(
‘operator’ => ‘in’,
‘value’ => array(
‘animation_image’ => ‘animation_image’,
),
‘group’ => ’0′,
‘exposed’ => FALSE,
‘expose’ => array(
‘operator’ => FALSE,
‘label’ => ”,
),
‘id’ => ‘type’,
‘table’ => ‘node’,
‘field’ => ‘type’,
‘relationship’ => ‘none’,
),
));
$handler->override_option(‘access’, array(
‘type’ => ‘none’,
));
$handler->override_option(‘cache’, array(
‘type’ => ‘none’,
));
$handler->override_option(‘style_plugin’, ‘cycle’);
$handler->override_option(‘style_options’, array(
‘type’ => ‘ul’,
‘skin’ => ‘default’,
‘thumbnail_field’ => ”,
‘height’ => ’240′,
‘verticalPadding’ => ”,
‘prevnext’ => array(
‘prev_label’ => ”,
‘next_label’ => ”,
),
‘pager’ => array(
‘event’ => ‘click’,
),
‘params’ => array(
‘fx’ => ‘fade’,
‘timeout’ => ’4000′,
‘speed’ => ’500′,
),
‘skin_info’ => array(
‘title’ => ‘Default’,
‘pager_location’ => ‘none’,
‘stylesheets’ => array(
’0′ => ‘views_cycle_default.css’,
),
‘prevnext_location’ => ‘before’,
‘module’ => ‘views_cycle’,
‘path’ => ”,
),
));
$handler = $view->new_display(‘block’, ‘Block’, ‘block_1′);
$handler->override_option(‘block_description’, ”);
$handler->override_option(‘block_caching’, -1);
about 1 year ago
Ok, got it to work: I had put the jquery file in the root folder of the modules directory instead of the view_cycle module root.
Also: I believe why the original problem reporter and I got the warnings is because when changing the settings to reflect “Cycle” – see above – there are certain settings that must be set at that time as well, or at least immediately after that – the cycle timeout in milliseconds for example.
about 1 year ago
Hi,
Thanks for the tutorial. Worked like charm. However I want to add custom urls to my images in slideshow. Currently I can see urls of images itself when I mouse over them but I want to show the urls of my primary links. Is this possible to do with views cycle?
Thanks
Ahsan
about 1 year ago
As I understand, adding custom urls to the images has nothing to do with Views Cycle module.
Try this: Go to Views, under Fields, click on your Images and this should give you configuration options. One of them is for “Output this field as a link”. You should be able to use that to set your urls.
If you are seeing the urls of the images itself, then “Link this field to its node” should be checked. Uncheck it & it will not link to the images itself.
Let me know if that helped.
about 1 year ago
Hi,
This tutorial was very helpful. Thank you!
Would it be possible, to cycle through several image fields on one node?
Adding a lot of images on “one image per node” bases is very time consuming. It would be much easier to just add a certain nr. of images to one node instead of creating a new node for every image. I played around with different settings in the view but did not succeed.
about 1 year ago
Managed to do it myself.
You need to modify the content type. The Image field “field_anim_image” should have more values than 1. Now you can attach several images to one node.
Edit the view. Set “Row Style” to be “Fields”. Add a new field to be displayed “Content: Image”. Click on “Content:Image” and change the format from “Generic file” to “Image linked to a node”. Un check the “Group multiple values” check-box. Save your changes and you’re done.
about 1 year ago
Hi,
I have already created a cycle view, but i have this problem that in the beginning or the end of the sideshow i see no image or you can say whitespace. can you tell why is it happing and how to resolve it…
Regards,
Junaid Qadir Baloch
about 1 year ago
Are you meaning that the first & last images are not visible? Or none of the images are not visible?
Have you tried checking using Firebug (on Firefox) as to if the image paths are getting printed? And if the printed image paths are correct?
about 1 year ago
*
Hi, Thanks for this nice tutorial.
Please, I am having the same problem as the guy above (Mamadou). In the Basic settings group, for Style, click on Unformatted link. Set the default to Cycle and click Update button),i have this message:
* warning: Invalid argument supplied for foreach() in D:\wamp\www\drupal\sites\all\modules\views_cycle\views_cycle.theme.inc on line 34.
* warning: Invalid argument supplied for foreach() in D:\wamp\www\drupal\sites\all\modules\views_cycle\views_cycle.theme.inc on line 89.
Please Help!
I tried to continue but at the end I got the same message:
* warning: Invalid argument supplied for foreach() in D:\wamp\www\drupal\sites\all\modules\views_cycle\views_cycle.theme.inc on line 34.
* warning: Invalid argument supplied for foreach() in D:\wamp\www\drupal\sites\all\modules\views_cycle\views_cycle.theme.inc on line 89.
I already have the jquery file inside the view_cycle module and i have renamed it as stated.
Please help!