Submitted by wilson on Mon, 05/21/2012 - 16:23
jQuery is an extremely useful tool in order to make web sites dynamic and professional. Typically used for common functionality such as drop down menus and slideshows it provides brand service marketting and useful user interfaces. The following tutorial will explain how to create a content or image slideshow within the Drupal theme being used without the need to use a specific slideshow module.
The elements that are required for this process are:
For this tutorial we are using the jQuery Cycle plugin as it provides a vast range of effects and options in order to create as bespoke of slideshow that is required without the need to write your own jQuery files. As this jQuery plugin requires jQuery version 1.3.2, in Drupal 6 the JQuery Update module is required to update the current site version to be compatible with the plugin.
This particular method of creating slideshows utilises the preprocess functions of Drupal in order to add functionality and change page output before rendering to the screen. For this demonstration i will be using the THEMENAME_preprocess_node() function as i want to create the slideshow from images that are assigned to a node. This function is to be created within the template.php file within the current theme you are using for your site and the word 'mytheme' must be replaced with the name of your theme.
function mytheme_preprocess_node(&$variables) {
// Use this function along with the Devel module to determine what $variables contains
// dpm($variables);
if ($variables['node']->type == 'mynodetype') {
// Add js to pages of the node type above
drupal_add_js(drupal_get_path('theme','mytheme') . '/js/jquery.cycle.all.min.js');
// Add the cycle ability to the container of the slides.
$js = "jQuery(document).ready(function() {
jQuery('#slideshow-container-id').cycle();
});";
// 'inline' is required to add inline code on node pages.
drupal_add_js($js,'inline');
}
}
dpm($variables); - This function is used when the devel module is installed on your site. It is useful as it allows you to see all variables that are passed into your preprocess function so that you can determine what values to use and to validate with.
if ($variables['node']->type == 'mynodetype') - This if statement checks what type of node that the function is being called from. This is used so that any settings within this if statement will only influence the nodes of type 'mynodetype'.
drupal_add_js(drupal_get_path('theme','mytheme') . '/js/jquery.cycle.all.min.js'); - This line of code adds the Cycle plugin file into the web page for use with the slideshow. This utilises a useful Drupal function 'drupal_get_path' which returns the path to the location specified, so in this case it would be the 'theme' by the name 'mytheme'. The string added onto this is the further directory and the filename of the plugin. So in this case the plugin file is saved within the 'js' directory within the theme 'mytheme'.
jQuery('#slideshow-container-id').cycle(); - This code is added within a typical jQuery(document) function to determine what element on the page will be used for the slideshow. Any additional options for the cycle can be set as parameters for the .cycle() function.
drupal_add_js($js,'inline'); - Once the jQuery code for the container is written as above, the code needs to be added to the page and is passed in using the 'drupal_add_js' with a second parameter as 'inline', in order for it to be added inline in the node page code.
The above code makes sure that the Cycle plugin file is only loaded in node pages of a singular type which can be set to whatever content type you wish. The code also adds inline jQuery code which defines which element will be used as the container for the slideshow. This element class or ID must match that of the image container within the node. Typically in Drupal the fields when display on a node will be in the following format:
<div class="image-fields-class">
<div class="field-items">
<div class="field-item">Image 1 Content</div>
<div class="field-item">Image 2 Content</div>
etc...
</div>
</div>
If this is the case, a simple way to add the slideshow would be to set the inline jQuery in the template.php to the following:
$js = "jQuery(document).ready(function() {
jQuery('.image-fields-class .field-items').cycle();
});";
This code determines that the element with class .field-items will be the container for the slideshow and that the children i.e. 'field-item' elements are the slides. This will then generate a slideshow which will fade between each contents of each 'field-item'. In conjunction with the preprocess_node function this code and the plugin code will only be loaded for a single node type and therefore you won't need to worry about the slideshow being generated elsewhere. Also with the use of the field container class i.e. '.image-fields-class' the slideshow will only be created for this field display.
