Merge pull request #471 from Automattic/fixes/169-dara-better-slideshow-fix

Dara: Use imagesLoaded to refresh slideshow after it loads

dara/assets/js/slider.js

@@ -13,9 +13,21 @@
 			itemHeight: 600,
 			smoothHeight: true,
 			selector: '.slides > .hero-content-wrapper',
+			start: function(){
+				window.dispatchEvent(new Event('resize'));
+			},
 		} );
 	}
 
-	$(document).on( 'ready', loadFlexslider );
+	function refreshFlexslider() {
+		$( '.flex-viewport-wrapper' ).imagesLoaded( function() {
+			window.dispatchEvent(new Event('resize'));
+		});
+	}
+
+	$(document).on( 'ready', function() {
+		loadFlexslider();
+		refreshFlexslider();
+	} );
 
 } )(jQuery);

dara/functions.php

@@ -275,7 +275,7 @@ function dara_scripts() {
 
 	if ( dara_has_featured_posts( 1 ) && ( is_home() || is_front_page() ) ) {
 		wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/assets/js/jquery.flexslider.js', array( 'jquery' ), '20161220', true );
-		wp_enqueue_script( 'dara-slider', get_template_directory_uri() . '/assets/js/slider.js', array( 'flexslider' ), '20161220', true );
+		wp_enqueue_script( 'dara-slider', get_template_directory_uri() . '/assets/js/slider.js', array( 'flexslider', 'imagesloaded' ), '20161220', true );
 	}
 
 	// If there's an active Video widget, and it's (hopefully) in the footer widget area

dara/style.css

@@ -1468,7 +1468,6 @@ blockquote p:last-child {
 	position: relative;
 }
 .hero-content {
-	padding-bottom: 50.8474576271186%; /* Makes sure slideshow maintains aspect ratio while loading to avoid overlap */
 	position: relative;
 	overflow: hidden;
 }