diff --git a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
index e06ec6acf4cf..ca644279e037 100644
--- a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
+++ b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
@@ -89,7 +89,7 @@
/* Controls */
.amp-lbv-button-close,
.amp-lbv-button-gallery,
-.amp-lbv-button-back{
+.amp-lbv-button-slide {
position: absolute !important;
cursor: pointer;
width: 50px;
@@ -111,18 +111,17 @@
background-image: url('data:image/svg+xml;charset=utf-8,');
}
-.amp-lbv-button-back {
+.amp-lbv-button-slide {
top: 0;
+ right: 0;
display: none;
- left: 0;
- background-image: url('data:image/svg+xml;charset=utf-8,');
+ background-image: url('data:image/svg+xml;charset=utf-8,');
}
-.i-amphtml-lbv[gallery-view] .amp-lbv-button-close,
.i-amphtml-lbv[gallery-view] .amp-lbv-button-gallery {
display: none;
}
-.i-amphtml-lbv[gallery-view] .amp-lbv-button-back {
+.i-amphtml-lbv[gallery-view] .amp-lbv-button-slide {
display: block;
}
diff --git a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js
index fe9a0fcc64a7..3cfeb725c7bc 100644
--- a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js
+++ b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js
@@ -213,11 +213,12 @@ export class AmpLightboxViewer extends AMP.BaseElement {
buildControls_() {
const close = this.close_.bind(this);
const openGallery = this.openGallery_.bind(this);
+ const closeGallery = this.closeGallery_.bind(this);
// TODO(aghassemi): i18n and customization. See https://git.io/v6JWu
this.buildButton_('Close', 'amp-lbv-button-close', close);
- this.buildButton_('Gallery', 'amp-lbv-button-gallery',
- openGallery);
+ this.buildButton_('Gallery', 'amp-lbv-button-gallery', openGallery);
+ this.buildButton_('Content', 'amp-lbv-button-slide', closeGallery);
}
/**
@@ -368,11 +369,6 @@ export class AmpLightboxViewer extends AMP.BaseElement {
this.vsync_.mutate(() => {
this.container_.appendChild(this.gallery_);
});
-
- // Add go back button
- const back = this.closeGallery_.bind(this);
- this.buildButton_('Back', 'amp-lbv-button-back', back);
-
}
/**
diff --git a/extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js b/extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js
index 77f7a3e8cd2b..224444ba6d61 100644
--- a/extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js
+++ b/extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js
@@ -48,10 +48,10 @@ describe('amp-lightbox-viewer', () => {
expect(carousel).to.exist;
const btns = viewer.querySelectorAll('.i-amphtml-lbv > [role=button]');
- expect(btns.length).to.equal(2);
+ expect(btns.length).to.equal(3);
expect(btns[0].className).to.equal('amp-lbv-button-close');
- expect(btns[1].className).to.equal(
- 'amp-lbv-button-gallery');
+ expect(btns[1].className).to.equal('amp-lbv-button-gallery');
+ expect(btns[2].className).to.equal('amp-lbv-button-slide');
});
});