💾 Archived View for chirale.org › 2008-01-13_5b4d523e3138475cebf61892565b662d.gmi captured on 2024-06-16 at 12:39:37. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Make JCarousel and Contemplate work together

Drupal modules needed:

JQuery Update\*
JCarousel\* (read JCarousel documentation)
Image Cache (optional, for thumb rendering)
Lightbox v2 (optional, for thumb zoom to original image)

\* = 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.

Quanta

Create a sites/all/contemplates folder (or sites/mysitename/contemplates)

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).

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/75)) {

return c\*(5625\*t\*t) + b;

} else if (t \< (2/75)) {

return c\*(5625\*(t-=(5/75))\*t + .75) + b;

} else if (t \< (5/75)) {

return c\*(5625\*(t-=(25/75))\*t + .9375) + b;

} else {

return c\*(5625\*(t-=(625/75))\*t + .984375) + b;

}

};

=> http://www.robertpenner.com/easing/

\# 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

});

// \]\]\>”;

=> http://sorgalla.com/projects/jcarousel/#Configuration

\#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:

original tango skin.css file on sorgalla.com

/\* JCarousel custom CSS for horizontal bars \*/

/bin /boot /dev /etc /home /init /lib /lib32 /lib64 /libx32 /lost+found /media /mnt /opt /proc /root /run /sbin /srv /sys /tmp /usr /var DO NOT USE margin or padding for item elements

(auto-adjusted with visible/scroll JCarousel options) \*/

.jcarousel-item-horizontal{

width: 100px;

}

/bin /boot /dev /etc /home /init /lib /lib32 /lib64 /libx32 /lost+found /media /mnt /opt /proc /root /run /sbin /srv /sys /tmp /usr /var 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

/bin /boot /dev /etc /home /init /lib /lib32 /lib64 /libx32 /lost+found /media /mnt /opt /proc /root /run /sbin /srv /sys /tmp /usr /var 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){

/bin /boot /dev /etc /home /init /lib /lib32 /lib64 /libx32 /lost+found /media /mnt /opt /proc /root /run /sbin /srv /sys /tmp /usr /var 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);

/bin /boot /dev /etc /home /init /lib /lib32 /lib64 /libx32 /lost+found /media /mnt /opt /proc /root /run /sbin /srv /sys /tmp /usr /var 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; ?\>

=> https://chirale.wordpress.com/wp-content/uploads/2008/01/fantastic-attachments.jpg 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:

lightbox v2 module

Another example, using some CSS and photoframe module:

photoframe

=> https://chirale.wordpress.com/wp-content/uploads/2008/10/animemex_prototype_jcarousel_jpg?w=300

https://web.archive.org/web/20080113000000*/http://drupal.org/project/jquery_update

https://web.archive.org/web/20080113000000*/http://drupal.org/project/jcarousel

https://web.archive.org/web/20080113000000*/http://sorgalla.com/projects/jcarousel/

https://web.archive.org/web/20080113000000*/http://drupal.org/project/contemplate

https://web.archive.org/web/20080113000000*/http://drupal.org/project/imagecache

https://web.archive.org/web/20080113000000*/http://drupal.org/project/lightbox2

https://web.archive.org/web/20080113000000*/http://quanta.kdewebdev.org/

https://web.archive.org/web/20080113000000*/http://www.robertpenner.com/easing/