background images now work in overview mode #1088

1 files changed, 22 insertions, 5 deletions

diff --git a/js/reveal.js b/js/reveal.js
index 3ee2cd0..8d547dd 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1642,31 +1642,41 @@
 			dom.wrapper.classList.add( 'overview' );
 			dom.wrapper.classList.remove( 'overview-deactivating' );
 
-			var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
+			// Move the backgrounds element into the slide container to
+			// that the same scaling is applied
+			dom.slides.appendChild( dom.background );
+
+			var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
+				horizontalBackgrounds = dom.background.childNodes;
 
 			for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
 				var hslide = horizontalSlides[i],
+					hbackground = horizontalBackgrounds[i],
 					hoffset = config.rtl ? -105 : 105;
 
 				hslide.setAttribute( 'data-index-h', i );
 
 				// Apply CSS transform
 				transformElement( hslide, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' );
+				transformElement( hbackground, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' );
 
 				if( hslide.classList.contains( 'stack' ) ) {
 
-					var verticalSlides = hslide.querySelectorAll( 'section' );
+					var verticalSlides = hslide.querySelectorAll( 'section' ),
+						verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' );
 
 					for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) {
 						var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide );
 
-						var vslide = verticalSlides[j];
+						var vslide = verticalSlides[j],
+							vbackground = verticalBackgrounds[j];
 
 						vslide.setAttribute( 'data-index-h', i );
 						vslide.setAttribute( 'data-index-v', j );
 
 						// Apply CSS transform
 						transformElement( vslide, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' );
+						transformElement( vbackground, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' );
 
 						// Navigate to this slide on click
 						vslide.addEventListener( 'click', onOverviewSlideClicked, true );
@@ -1709,6 +1719,9 @@
 
 			dom.wrapper.classList.remove( 'overview' );
 
+			// Move the background element back out
+			dom.wrapper.appendChild( dom.background );
+
 			// Temporarily add a class so that transitions can do different things
 			// depending on whether they are exiting/entering overview, or just
 			// moving from slide to slide
@@ -1718,14 +1731,18 @@
 				dom.wrapper.classList.remove( 'overview-deactivating' );
 			}, 1 );
 
-			// Select all slides
+			// Clean up changes made to slides
 			toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
-				// Resets all transforms to use the external styles
 				transformElement( slide, '' );
 
 				slide.removeEventListener( 'click', onOverviewSlideClicked, true );
 			} );
 
+			// Clean up changes made to backgrounds
+			toArray( dom.background.querySelectorAll( '.slide-background' ) ).forEach( function( background ) {
+				transformElement( background, '' );
+			} );
+
 			slide( indexh, indexv );
 
 			cueAutoSlide();