Make JCarousel and Contemplate work together

Drupal modules needed:

* = tested on latest official release
Howto subject: How to use JCarousel within a Contemplate modified node body

JCarousel is a nice JQuery plugin to render a vertical or horizontal bar containing some custom HTML code elements. Every element is within a list item of an unordered list. On page load a JQuery event trigger the simple unordered list to show as a bar.

Let’s start

To use Contemplate more smoothly (and without cut/paste from your preferred code editor, i.e. Quanta), you can create a file-based contemplate instead a database based.

  1. Create a sites/all/contemplates folder (or sites/mysitename/contemplates)
  2. According to Contemplate help (admin/help/contemplate), put there your node-mynodetype-body.tpl.php file, where “mynodetype” is the machine name of the type you want to modify (that one that appears like node/add/mynodetype when you create a new node of that type).
  3. Visit admin/content/templates to update the contemplate list. Now, if you go to admin/content/templates/mynodetype you can read:

    This template is being read fromsites/all/contemplates/node-mynodetype-body.tpl.php
    Please make changes to this file or remove it to continue editing here.

This is your contemplate file for this how-to. You’ve only to modify it, upload it and watch your mynodetype body growing up with JCarousel.

Call JCarousel

On the top of your content template, write:

if(module_exists(“jcarousel”)){
jcarousel_add(“tango”);
$js = “// <![CDATA[
#function to add a Bouncing Effect on your JCarousel: you can add another custom effect function
// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing[‘BounceEaseOut’] = function(p, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};

# Call JCarousel when page is ready for the element mycarousel
# Read http://sorgalla.com/projects/jcarousel/#Configuration
jQuery(document).ready(function() {
jQuery(‘#mycarousel’).jcarousel({
vertical: false,
animation: 3000,
easing: ‘BounceEaseOut’,
visible: 5,
scroll: 4
});
});
// ]]>”;

#add to HTML page HEAD this JavaScript code
drupal_add_js($js, ‘inline’, ‘header’);
}
?>

Styling

Using latest official release of JCarousel, tango theme skin.css file returns a buggy appearance. You can switch to the original tango skin.css file on sorgalla.com. Simply copy that file to your module skin folder.
In order to make your JCarousel works better, you have to write some additional CSS lines on your theme CSS file:

/* JCarousel custom CSS for horizontal bars */
/* DO NOT USE margin or padding for item elements
(auto-adjusted with visible/scroll JCarousel options) */
.jcarousel-item-horizontal{
width: 100px;
}
/* Bar total width for 5 elements
(100×5)px + 10px horizontal padding */
.jcarousel-container-horizontal,
.jcarousel-clip-horizontal{
width: 550px;
}

/* center jcarousel within a block element */
..jcarousel-container-horizontal{
margin: auto;
}

/* item height = bar height */
.char .jcarousel-item-horizontal,
.char .jcarousel-clip-horizontal{
height: 150px;
}

Contemplate JCarousel

A simple but useful way to test JCarousel is to display attached image files on your mynodetype. Assuming that all attached files are image files, that you want tango theme and you want to render an imagecache picture with preset named “my_thumbnail_preset”, add to your contemplate file these lines:

<?php
/* UPLOADED FILE CAROUSEL */
$attached_files_carousel = TRUE;

if($attached_files_carousel): ?>
<ul id=”mycarousel” class=”jcarousel-skin-tango”>
<?php
$preview_imagecache_preset = ‘character_picture’;
if(!empty($node->files)){
foreach($node->files as $uploaded_file){
/* if imagecache is present, build the thumbnail */
if(module_exists(‘imagecache’))
$uploaded_file_preview = theme(‘imagecache’,$preview_imagecache_preset,$uploaded_file->filepath);
else
$uploaded_file_preview = l($uploaded_file->filename,$uploaded_file->filepath);
/* Print the List Item */
print “<li>” . ‘<a title=”‘.$uploaded_file->filename.'” rel=”lightbox” href=”‘. base_path() . $uploaded_file->filepath . ‘”>’. $uploaded_file_preview . ‘</a>’ . “</li>”;
}
}
?>
</ul>
<?php # END CAROUSEL
endif; ?>

Fantastic Attachments

This method simply write the UL#mycarousel via PHP (static JCarousel method). Using rel=”lightbox” enable image file zoom via JavaScript, if lightbox v2 module is enabled. If you want to implement complex AJAX loading or to experiment more JCarousel effects, options and customizations, see also:

Another example, using some CSS and photoframe module:

Advertisements

6 thoughts on “Make JCarousel and Contemplate work together

  1. chirale Post author

    Hi drop, screenshot sample is taken from an early version of Fantastic Children on Animemex.com.

    Here other samples:

    Infinite Ryvius
    Uchuu no Stellvia
    Toward the Terra

    But you can found other examples by adding “&distyle=Carousel” to any anime listed on the site. I make this workaround just now to show you a live Drupal jCarousel, officially to change characters visualization you must register and change one setting on your profile page. 😉

    Bye.

    Update: Due to a site redesign, I’ve moved the demo to prototype.animemex.com (links changed).

    Reply
  2. chirale Post author

    Just adding some CSS. 😉 I’ve added another “slide” example above, you can watch the code from this page with tools like Firebug and the photoframe module to do the same.

    Note that table element are added via javascript by photoframe only to display round borders, in that example i use a simple break tag but you can wrap images and links with some divs with classes in order to customize internal “slide” appearance.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s