In this tutorial I'll show you how you can add jQuery image carousel functionality to your CCK node. This tutorial requires you to install the following modules:
cck
filefield
imageapi
imagecache
imagefieldNOTE: The next few steps assume you have not already setup a content type and ImageCache preset. You can ignore them if you already have.
Once you installed the above modules and set permission accordingly, you'll need to define an ImageCache preset (/admin/build/imagecache/add). I called mine "thumbnail" for this example. I added a "Add Scale" action to set the width to 100 (pixels). This will ensure when you create an image, a thumbnail will be created automatically.
Create a new content type (/admin/content/types/add). I called mine "Carousel" for this example. I then clicked on "Manage Fields" (/admin/content/node-type/carousel/fields) to setup a new Image field. I called my new field "field_images", selected "File" for field type, and selected "Image" for the form element.
On the next screen, scroll down to the Global fieldset region and enable the "Required" checkbox, and set the "Number of Values" to "Unlimited". This will allow the user to upload numerous image files to the same CCK field.
Next, you'll want to set which image preset it shown when viewing the node, by clicking on "Display fields" (/admin/content/node-type/carousel/display). I chose the "thumbnail image" preset for both the teaser and full node displays.
I then created a new carousel node (/node/add/carousel). I used the "Add another item" button to upload three images to this node.
If you view the node, the images will be stacked vertically.
This is where the fun starts. You'll need to download the jQuery Carousel library (http://sorgalla.com/projects/jcarousel/). I downloaded the jcarousel.zip file and unpacked it. Copy the entire unpacked jcarousel folder into your theme directory.
Now, you'll need to add a preprocess_node function to your template.php file:
<?php
function YOURTHEME_preprocess_node(&$variables) {
// test for carousel node type
if ($variables['type'] == 'carousel') {
// include jCarousel javascript
drupal_add_js(path_to_theme() . '/jcarousel/lib/jquery.jcarousel.js');
// add jquery in enable jQuery carousel on <ul>
$js = "
$(document).ready(function(){
$('#mycarousel').jcarousel();
});
";
drupal_add_js($js, 'inline');
// include jCarousel css
drupal_add_css(path_to_theme() . '/jcarousel/lib/jquery.jcarousel.css');
drupal_add_css(path_to_theme() . '/jcarousel/skins/tango/skin.css');
// loop through images and create an item list
$items = array();
foreach ($variables['field_images'] as $key => $value) {
$items[] = $value['view'];
}
// ensure images exist
if (count($items)) {
// add jQuery carousel html to $content variable
$variables['content'] .= theme('item_list', $items, NULL, 'ul', array('id' => 'mycarousel', 'class' => 'jcarousel-skin-tango'));
}
}
}
?>The previous code snippet should result in the following:
If you'd like you can hide the old image html by adding a single line of CSS (or by adding more elaborate code in your template preprocess function).
Example:
div.field-field-images {
display: none;
}Adding the previous CSS will result in this example:
Comments
problem
hi,
thanks for the tips!
I've a problem with this script, in template.php
<?php
function <theme_name>_preprocess_node(&$variables) {
// test for carousel node type
if ($variables['type'] == 'news') {
// include jCarousel javascript
drupal_add_js(path_to_theme() . '/jcarousel/lib/jquery.jcarousel.min.js');
// add jquery in enable jQuery carousel on <ul>
$js = "
$(document).ready(function(){
$('#rel_gallery').jcarousel();
});
";
drupal_add_js($js, 'inline');
// include jCarousel css
//drupal_add_css(path_to_theme() . '/jcarousel/lib/jquery.jcarousel.css');
drupal_add_css(path_to_theme() . '/jcarousel/skins/tango/skin.css');
// loop through images and create an item list
$items = array();
foreach ($variables['field_gallery'] as $key => $value) {
$items[] = $value['view'];
}
// ensure images exist
if (count($items)) {
// add jQuery carousel html to $content variable
$variables['content'] .= theme('item_list', $items, NULL, 'ul', array('id' => 'rel_gallery', 'class' => 'jcarousel-skin-tango'));
}
}
}
?>
if I try to add
print $variables['content'];
at the end of function I see carousel but without I see only the gallery image in standard format...
What's wrong?
Thank you
JQuery tabs
On a similar note, I am looking for the basic way to utilize JQuery within Drupal.
(I'm a programmer and not a themer.)
I'm trying to use the Tabs module to display fieldgroups of CCK content fields.
I have the JQuery tabs in place and see some reference to tabs within the DIV tags on the node pages, but the fields are not visible and of course the Tabs don't seem to function.
I see includes for some but not all of the tabs-related js and css files.
Do I need to do something similar to what you do above in YOURTHEME_preprocess_node()?
Any guidance in this area or a pointer to a starting place would be great.
Thanks,
-dave
Where does the preprocess_node function go in template php file
nice tutorial but I am a little confused as to where the preprocess node function goes. The template php file has its own php code.
code
I have the same problem. I'm using my own template, with a "style.css" and a "page.tpl.php"in it. When I add your code to my "page.tpl.php", i see no difference, the image remain in stack... Please help me! Thanks anyway.
preprocess
The code should go in your template.php files, not the page.tpl.php. A preprocess_node function will allow you to modify the theme variables at the node template scope.
template.php
I don't usually use/edit stock themes, but you could do a few things:
1. create a sub theme (http://drupal.org/node/225125) (more work, complicated)
2. add code to the template.php file (simple, but now the theme has been forked)
don't work
Hi Eric,
I try to built nodes with carroussel images like u explain but it doesn't work!
One stupid question to begin: In the template.php file must I to replace "YOURTHEME" by the name of my theme?
second stupid question: have i to put the jcarroussel module in the folder modules or in my theme folder ?
Thanks thanks
(my english is bad but u don't hear my accent!!!)
Vans
don't work
Hi Vans,
I extracted the entire library and copied the folder into my theme directory. You could put it anywhere, but you'd have to adjust your paths. Yes, and you'll need to replace things like "YOURTHEME" to match your configuration. Hope this helps.
dont work
Cant get it work :(
code
dont work? paste your code and/or error messages.
-Eric
Thank you, nice article, I
Thank you, nice article, I tried your code and its working but the problem is if I use shadowbox and hide the images using css, shadowbox is still showing all the images. How do you do it in template?
hmm
Which shadow module are you using, this one? http://drupal.org/project/shadowbox
There might be a way to modify the classes of the images to have shadowbox ignore them...
thannks
Thank you very much very nice article
Great information! Very useful for me. Thanks a lot.
The idea is awesome. Congrats.
estetik
re: hmmm
Yes that's the module I'm using. Have you tried it?