function jcarousel_help in jCarousel 8.3

Same name and namespace in other branches

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

Implements hook_help().

File

./jcarousel.module, line 11

Provides integration with 3rd party modules and the jCarousel library.

Code

function jcarousel_help($path, $arg) {
  switch ($path) {
    case 'admin/help#jcarousel':
      $fieldset = array(
        '#type' => 'fieldset',
        '#title' => t('View sample code'),
        '#description' => t('The following HTML may be printed out to the page through a node, block, or in a custom template. Then the following PHP code must be run to add the jCarousel library and CSS to the page.'),
        '#collapsible' => TRUE,
        '#collapsed' => TRUE,
        '#attached' => array(
          'js' => array(
            'misc/collapse.js',
            'misc/form.js',
          ),
        ),
        '#attributes' => array(
          'class' => array(
            'collapsible',
            'collapsed',
          ),
        ),
      );
      $output = '';
      $output .= '<p>' . t('The jCarousel module provides the ability to create carousel-style lists such as those included on this page. The jCarousel module includes integrations with other Drupal modules, but may also be used manually within your own theme or custom modules. It does not include any site-wide settings page or options, each carousel is separately configured.') . '</p>';
      $output .= '<h2>' . t('Views integration') . '</h2>';
      $output .= '<p>';
      $output .= t('Most configuration options for the jCarousel module are provided through <a href="http://drupal.org/project/views">Views module</a>.');
      if (module_exists('views_ui')) {
        $output .= ' ' . t('You may configure a new view through the <a href="!views-url">Views module interface</a>. After adding a new view, change its "Display style" to "jCarousel" and configure the remaining options there. When using the jCarousel display style with Views, you can construct any of the examples on this page as well as dynamically loaded carousels through AJAX requests.', array(
          '!views-url' => url('admin/structure/views'),
        ));
      }
      else {
        $output .= ' ' . t('This site not have Views (or the Views UI module) installed currently. You may be able to turn on this module under your site\'s <a href="!modules-url">module page</a>, or you may have to <a href="http://drupal.org/project/views">download Views module</a> and install it.', array(
          '!modules-url' => url('admin/build/modules'),
        ));
      }
      $output .= '</p>';
      $output .= '<h2>' . t('Custom implementations') . '</h2>';
      $output .= '<p>' . t('The following are demonstrations of jCarousel module when used directly by another module or your theme. <strong>Most users do not need to manually code carousels</strong> (building carousels using Views is the most common approach), but these demonstrations provide good examples of jCarousel\'s abilities.') . '</p>';

      // Construct the jCarousel 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>' . t('Horizontal carousel') . '</h3>';
      $output .= '<p>' . t('This example uses <code>jcarousel_add()</code> directly with no options to create the default horizontal carousel.') . '</p>';
      $list_html = '<ul class="horizontalcarousel jcarousel-skin-default">' . $list . '</ul>';
      $sample = $fieldset;
      $sample['#children'] = '<code><pre>' . check_plain($list_html) . '</pre></code>' . highlight_string("<?php jcarousel_add('horizontalcarousel'); ?>", TRUE);
      $output .= drupal_render($sample);
      $output .= $list_html;
      jcarousel_add('horizontalcarousel');

      // Provide the vertical carousel demonstration.
      $output .= '<h3>' . t('Vertical carousel') . '</h3>';
      $output .= '<p>' . t('jCarousel can accept a variety of <a href="http://sorgalla.com/projects/jcarousel/#Configuration">configuration options</a> via the second argument to <code>jcarousel_add()</code>. In this example, we created a vertical carousel.') . '</p>';
      $list_html = '<ul class="verticalcarousel jcarousel-skin-default">' . $list . '</ul>';
      $sample = $fieldset;
      $sample['#children'] = '<code><pre>' . check_plain($list_html) . '</pre></code>' . highlight_string("<?php jcarousel_add('verticalcarousel', array('vertical' => TRUE)); ?>", TRUE);
      $output .= drupal_render($sample);
      $output .= $list_html;
      jcarousel_add('verticalcarousel', array(
        'vertical' => TRUE,
      ));

      // Provide the different skins carousel demonstration.
      $output .= '<h3>' . t('Different skins') . '</h3>';
      $list_html = '<ul class="differentskin jcarousel-skin-tango">' . $list . '</ul>';
      $output .= '<p>' . t('The "skin" of a carousel can be changed by setting the <code>$options[\'skin\']</code> property. This skin must match one of the skins either provided by a module or matching a skin included in your theme\'s style.css file. Skins are simply a class given to the HTML list with the name "jcarousel-skin-[skin-name]". A custom skin path may be specified in <code>$options[\'skin path\']</code>, or you can use one of these module-based skins:') . theme('item_list', array(
        'items' => array_keys(jcarousel_skins()),
      )) . t('Note that with skins you will often need to override certain CSS styles in your theme\'s style.css file. Certain properties (like the height and width of individual items and the carousel itself) must be manually specified directly in CSS. Not using a skin at all by specifying <code>$options[\'skin\'] = NULL</code> and then styling the entire carousel in style.css is also a good approach.') . '</p>';
      $sample = $fieldset;
      $sample['#children'] = '<code><pre>' . check_plain($list_html) . '</pre></code>' . highlight_string("<?php jcarousel_add('differentskin', array('skin' => 'tango')); ?>", TRUE);
      $output .= drupal_render($sample);
      $output .= $list_html;
      jcarousel_add('differentskin', array(
        'skin' => 'tango',
      ));

      // Another thing you can do is use the theme('jcarousel') function.
      $output .= '<h3>' . t('Theme function') . '</h3>';
      $output .= '<p>' . t('The <code>theme(\'jcarousel\')</code> function allows you to easily create the markup and add all the JavaScript to the page in one function call. Like <code>jcarousel_add()</code> the theme function approach can also take options. In this example we create the carousel with the button next event being called when the mouse rolls over the buttons.') . '</p>';
      $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',
      );
      $fieldset['#description'] = t('The following PHP code may be placed in a template file or a module to create a carousel.');
      $sample = $fieldset;
      $sample['#children'] = highlight_string("<?php\n\$items = " . var_export($items, TRUE) . ";\n\$options = " . var_export($options, TRUE) . ";\nprint theme('jcarousel', array('items' => \$items, 'options' => \$options));\n?>", TRUE);
      $output .= drupal_render($sample);
      $output .= theme('jcarousel', array(
        'items' => $items,
        'options' => $options,
      ));

      // Provide a circular wrap element.
      $output .= '<h3>' . t('Circular wrap') . '</h3>';
      $output .= '<p>' . t('This example puts the carousel into a circular wrap.') . '</p>';
      $options = array(
        'wrap' => 'circular',
      );
      $sample = $fieldset;
      $sample['#children'] = highlight_string("<?php\n\$items = " . var_export($items, TRUE) . ";\n\$options = " . var_export($options, TRUE) . ";\nprint theme('jcarousel', array('items' => \$items, 'options' => \$options));\n?>", TRUE);
      $output .= drupal_render($sample);
      $output .= theme('jcarousel', array(
        'items' => $items,
        'options' => $options,
      ));
      return $output;
  }
}