#677754: Pause auto-scroll when mouse over item.

diff --git a/includes/jcarousel_style_plugin.inc b/includes/jcarousel_style_plugin.inc
index ea51608..0dad7ce 100644 (file)
--- a/includes/jcarousel_style_plugin.inc
+++ b/includes/jcarousel_style_plugin.inc
@@ -19,6 +19,7 @@ class jcarousel_style_plugin extends views_plugin_style {
     $options['visible'] = array('default' => NULL);
     $options['scroll'] = array('default' => '');
     $options['auto'] = array('default' => 0);
+    $options['autoPause'] = array('default' => '1');
     $options['animation'] = array('default' => '');
     $options['start'] = array('default' => '1');
     $options['easing'] = array('default' => NULL);
@@ -119,6 +120,12 @@ class jcarousel_style_plugin extends views_plugin_style {
       '#options' => $range,
       '#default_value' => $this->options['start'],
     );
+    $form['advanced']['autoPause'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Pause auto-scroll on hover'),
+      '#description' => t('If auto-scrolling, pause the carousel when the user hovers the mouse over an item.'),
+      '#default_value' => $this->options['autoPause'],
+    );
     $form['advanced']['vertical'] = array(
       '#type' => 'checkbox',
       '#title' => t('Vertical'),

diff --git a/js/jcarousel.js b/js/jcarousel.js
index 000454a..8e64bce 100644 (file)
--- a/js/jcarousel.js
+++ b/js/jcarousel.js
@@ -11,10 +11,17 @@ Drupal.behaviors.jcarousel = function(context, settings) {
     var options = settings.jcarousel.carousels[key];
 
     // Add standard options required for AJAX functionality.
-    if (options.ajax) {
+    if (options.ajax && !options.itemLoadCallback) {
       options.itemLoadCallback = Drupal.jcarousel.ajaxLoadCallback;
     }
 
+    // If auto-scrolling, pause animation when hoving over the carousel.
+    if (options.auto && options.autoPause && !options.initCallback) {
+      options.initCallback = function(carousel, state) {
+        Drupal.jcarousel.autoPauseCallback(carousel, state);
+      }
+    }
+
     // Change next and previous buttons to links for accessibility.
     if (!options.buttonNextHTML && !options.buttonPrevHTML) {
       options.buttonNextHTML = '<a href="javascript:void(0)"></a>';
@@ -69,7 +76,20 @@ Drupal.jcarousel.ajaxLoadCallback = function(jcarousel, state) {
 };
 
 /**
- * AJAX Callback for all jCarousel-style views.
+ * Init callback for jCarousel. Pauses the carousel when hovering over.
+ */
+Drupal.jcarousel.autoPauseCallback = function(carousel, state) {
+  function pauseAuto() {
+    carousel.stopAuto();
+  }
+  function resumeAuto() {
+    carousel.startAuto();
+  }
+  carousel.clip.hover(pauseAuto, resumeAuto);
+};
+
+/**
+ * AJAX callback for all jCarousel-style views.
  */
 Drupal.jcarousel.ajaxResponseCallback = function(jcarousel, target, response) {
   if (response.debug) {
@@ -120,6 +140,6 @@ Drupal.jcarousel.ajaxErrorCallback = function (xhr, path) {
   }
 
   alert(Drupal.t("An error occurred at @path.\n\nError Description: @error", {'@path': path, '@error': error_text}));
-}
+};
 
 })(jQuery);