Fix #605 @2

diff --git a/js/214-home-services.js b/js/214-home-services.js
index 2bc1f2c4e8ced8ed106421a3970f23a36dd10efd..f640aea9bbb8bf2b7b334dd13e2a8417d20d161f 100644 (file)
--- 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 d8a0422f6b3d7ca3e50e6ce8f6cab4a7fae77bef..210ee5027dc6a79cf7abf49e62f15b45b6efdc65 100644 (file)
--- 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;