JS-255: Stabilization fixes for magnifier and gallery

Author: uharbachou

lib/web/mage/gallery/gallery.html

@@ -7,7 +7,7 @@
 <div class="fotorama-item" data-gallery-role="gallery" tabindex="0">
  <div data-gallery-role="fotorama__focusable-start" tabindex="0"></div>
  <div class="fotorama__wrap fotorama__wrap--css3 fotorama__wrap--slide fotorama__wrap--toggle-arrows">
- <div class="fotorama__stage">
+ <div class="fotorama__stage" data-fotorama-stage="fotorama__stage">
  <div class="fotorama__arr fotorama__arr--prev" tabindex="0" role="button" aria-label="Previos">
  <div class="fotorama__arr__arr" data-gallery-role="arrow"></div>
  </div>
@@ -18,24 +18,24 @@
  <div class="fotorama__arr__arr" data-gallery-role="arrow"></div>
  </div>
  <div class="fotorama__video-close"></div>
- <div class="fotorama__zoom-in"></div>
- <div class="fotorama__zoom-out"></div>
+ <div class="fotorama__zoom-in" data-gallery-role="fotorama__zoom-in" aria-label="Zoom in" role="button" tabindex="0"></div>
+ <div class="fotorama__zoom-out" data-gallery-role="fotorama__zoom-out" aria-label="Zoom out" role="button" tabindex="0"></div>
  </div>
  <div class="fotorama__nav-wrap" data-gallery-role="nav-wrap">
  <div class="fotorama__nav fotorama__nav--thumbs">
- <div class="fotorama__fullscreen-icon" data-gallery-role="fotorama__fullscreen-icon" tabindex="0" role="button"></div>
- <div class="fotorama__thumb__arr--left" tabindex="0" role="button" aria-label="<%= previous %>">
+ <div class="fotorama__fullscreen-icon" data-gallery-role="fotorama__fullscreen-icon" tabindex="0" aria-label="Exit fullscreen" role="button"></div>
+ <div class="fotorama__thumb__arr--left" tabindex="0" role="button" aria-label="Previos">
  <div class="fotorama__thumb__arr" data-gallery-role="arrow"></div>
  </div>
  <div class="fotorama__nav__shaft">
  <div class="fotorama__thumb-border"></div>
  </div>
- <div class="fotorama__thumb__arr--right" tabindex="0" role="button" aria-label="<%= next %>">
+ <div class="fotorama__thumb__arr--right" tabindex="0" role="button" aria-label="Next">
  <div class="fotorama__thumb__arr" data-gallery-role="arrow"></div>
  </div>
  </div>
  </div>
  </div>
  <div data-gallery-role="fotorama__focusable-end" tabindex="0"></div>
 </div>
-<div class="magnifier-preview" data-gallery-role="magnifier" id="preview"></div>
+<div class="magnifier-preview" data-gallery-role="magnifier" id="preview"></div>

lib/web/mage/gallery/gallery.less

@@ -8,6 +8,7 @@
 @fotorama_close_size: 30px;
 @size-fotorama-block: 50px;
 @fotorama-thumb-arrow: 30px;
+@fotorama-fullscreen-zoom-time: 0.3s;
 
 @import '../../css/source/lib/_lib.less'; // Global lib
 @import '../../css/source/_theme.less'; // Theme overrides
@@ -78,21 +79,30 @@
  &:extend(.fotorama-sprite);
  background-position: 0 (-@size-fotorama-block) !important;
  }
-
  .fotorama__zoom-in {
  top: 0;
  &:extend(.fotorama-sprite);
  background-position: 0 0 !important;
  }
 }
 
+.circle {
+ position: absolute;
+ background-color: silver;
+ opacity: 0.7;
+ border-radius: 100%;
+ height: 1px;
+ width: 1px;
+}
+
 .fotorama__zoom-in,
 .fotorama__zoom-out {
  display: none;
 }
 .fotorama__fullscreen {
  .fotorama__zoom-in,
  .fotorama__zoom-out {
+ overflow: hidden;
  position: absolute;
  width: 50px;
  height: 50px;
@@ -725,8 +735,13 @@
  display: none;
 }
 
+.fotorama--fullscreen-icons {
+ .fotorama__fullscreen-icon {
+ display: none;
+ }
+}
+
 .fotorama__fullscreen-icon {
- //display: none;
  &:focus {
  &:extend(.fotorama-focus);
  border-radius: 50%;
@@ -736,7 +751,7 @@
 
 .fotorama--fullscreen {
  .fotorama__fullscreen-icon {
- //display: inline-block;
+ display: inline-block;
  background-position: (-@size-fotorama-block) 0;
  }
 }
@@ -1083,6 +1098,8 @@
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
+ transition-duration: @fotorama-fullscreen-zoom-time;
+ transition-property: width, height, top, left;
  }
 }
 
@@ -1235,9 +1252,7 @@ body.fotorama__fullscreen {
  .magnify-fullimage {
  display: inline-block;
  }
- .fotorama__stage__shaft {
- //.fotorama__img {
- // display: none;
- //}
+ .magnify-lens {
+ display: none !important;
  }
 }