function jcarousel_help in jCarousel 6

Same name and namespace in other branches

1. 8.5 jcarousel.module \jcarousel_help()
2. 8.3 jcarousel.module \jcarousel_help()
3. 8.4 jcarousel.module \jcarousel_help()
4. 6.2 jcarousel.module \jcarousel_help()
5. 7.3 jcarousel.module \jcarousel_help()
6. 7.2 jcarousel.module \jcarousel_help()

Implementation of hook_help().

The code provided in this function is a demonstration of how to use jcarousel_add().

File

./jcarousel.module, line 13

Provides the jCarousel jQuery plugin.

Code

function jcarousel_help($path, $arg) {
  switch ($path) {
    case 'admin/help#jcarousel':
      $output = '<p>' . t('The following is a demonstration of jCarousel.') . '</p>';

      // Construct the carousel list.
      $list = '<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>';

      // Provide the horizontal carousel demonstration.
      $output .= "<h3>Horizontal carousel</h3><ul id='horizontalcarousel'>{$list}</ul>";
      jcarousel_add('#horizontalcarousel');
      $output .= '<p>As you can see, simply calling <code>jcarousel_add()</code> with the element ID will create the default horizontal carousel.</p>';

      // Provide the vertical carousel demonstration.
      $output .= "<h3>Vertical carousel</h3><ul id='verticalcarousel'>{$list}</ul>";
      jcarousel_add('#verticalcarousel', array(
        'vertical' => TRUE,
      ));
      $output .= '<p>The <a href="http://sorgalla.com/projects/jcarousel/#Configuration">configuration options</a> are passed via the second argument in the call to <code>jcarousel_add()</code>. In this example, we created a vertical carousel.</p>';

      // Provide the different skins carousel demonstration.
      $output .= "<h3>Different skins</h3><ul id='differentskin'>{$list}</ul>";
      jcarousel_add('#differentskin', array(), 'ie7');
      $output .= '<p>We can easily change the associated skin by changing the <code>$skin</code> or <code>$skin_path</code> parameters.</p>';

      // Another thing you can do is use the theme('jcarousel') function.
      $output .= '<h3>' . t('Theme function') . '</h3>';
      $items = array(
        '<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" />',
        '<img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" />',
      );
      $options = array(
        'buttonNextEvent' => 'mouseover',
        'buttonPrevEvent' => 'mouseover',
      );
      $output .= theme('jcarousel', $items, $options);
      $output .= '<p>' . t('The theme function allows you to easily create the markup, and add all the JavaScript to the page in one function call. In this example we create the carousel with the button next event being called when the mouse rolls over the buttons.') . '</p>';

      // Provide a circular wrap element.
      $output .= '<h3>' . t('Circular wrap') . '</h3>';
      $options = array(
        'wrap' => 'circular',
      );
      $output .= theme('jcarousel', $items, $options);
      return $output;
      break;
  }
}