From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Tue, 30 Aug 2016 13:55:50 +0000 (+0000)
Subject: Fix #605 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=96a27803356d3e8b6a6689f8a09be65206f77392;p=fluidbook-v3.git

Fix #605 @2
---

diff --git a/js/214-home-services.js b/js/214-home-services.js
index 2bc1f2c..f640aea 100644
--- a/js/214-home-services.js
+++ b/js/214-home-services.js
@@ -4,8 +4,11 @@ function load_home_services() {
     initCarousel();
 }
 
-var autoplay = true;
-var autoplayTimer;
+var firstLoad = true,
+    autoplay = true,
+    autoplayTimer,
+    userHasClicked = false,
+    carouselIndex = 0;
 
 function initCarousel() {
 
@@ -28,26 +31,18 @@ function initCarousel() {
     // Handle nav clicks
     $(document).on('click', '.services-examples-nav a', function() {
 
-        clearInterval(autoplayTimer); // cancel autoplay
+        userHasClicked = true;
+        autoplayStop();
         loadSlide($(this).attr('href'));
 
         return false;
     });
 
-    // Autoplay
-    if (autoplay) {
-        var $items = $(".services-examples > div");
-        var index = 0;
+    // Handle play / pause on hover
+    $('.services-examples').hover(autoplayStop, autoplayStart);
 
-        var showNext = function () {
-            loadSlide('#example' + index);
-            // increment the index - if it is beyond the number of li's - reset it to 0
-            if (++index >= $items.length) index = 0;
-        };
-        showNext(); // call once upon loading
-
-        // set it up to be called every x ms
-        autoplayTimer = setInterval(showNext, 3000);
+    if (autoplay) {
+        autoplayStart();
     }
 }
 
@@ -68,4 +63,34 @@ function loadSlide(slideID) {
         $('.services-examples .current').css('z-index', "").hide().removeClass('current');
         $(this).css('z-index', "").addClass('current');
     });
+}
+
+function autoplayStart() {
+
+    // Only start autoplay if user hasn't clicked any of the labels
+    // This should trigger on first load and also after mouseout when hovering
+    if (!userHasClicked) {
+
+        var $items = $(".services-examples > div");
+
+        var showNext = function () {
+            loadSlide('#example' + carouselIndex);
+            // increment the carouselIndex - if it is beyond the number of li's - reset it to 0
+            if (++carouselIndex >= $items.length) carouselIndex = 0;
+        };
+
+        if (firstLoad) {
+            showNext(); // call once upon loading
+            firstLoad = false;
+        }
+
+        // set it up to be called every x ms
+        autoplayTimer = setInterval(showNext, 3000);
+    }
+
+}
+
+function autoplayStop() {
+    clearInterval(autoplayTimer); // cancel autoplay
+    autoplay = false;
 }
\ No newline at end of file
diff --git a/less/214-home-services.less b/less/214-home-services.less
index d8a0422..210ee50 100644
--- a/less/214-home-services.less
+++ b/less/214-home-services.less
@@ -76,7 +76,7 @@ section.services {
 .services-examples {
   position: relative;
   width: 100%;
-  padding-bottom: percentage(473/755); // Intrinsic ratio for screenshots (+1px to cover rounding errors for .more element)
+  padding-bottom: percentage(474/755); // Intrinsic ratio for screenshots (+2px to cover rounding errors for .more element)
 
   .current {
     z-index: 2;