diff --git a/app/code/Magento/Catalog/Block/Product/View/Gallery.php b/app/code/Magento/Catalog/Block/Product/View/Gallery.php
index e7817243ac2a7..484dbb2cd646e 100644
--- a/app/code/Magento/Catalog/Block/Product/View/Gallery.php
+++ b/app/code/Magento/Catalog/Block/Product/View/Gallery.php
@@ -12,6 +12,7 @@
 namespace Magento\Catalog\Block\Product\View;
 
 use Magento\Framework\Data\Collection;
+use Magento\Framework\Json\EncoderInterface;
 use Magento\Catalog\Helper\Image;
 
 class Gallery extends \Magento\Catalog\Block\Product\View\AbstractView
@@ -21,6 +22,27 @@ class Gallery extends \Magento\Catalog\Block\Product\View\AbstractView
      */
     protected $configView;
 
+    /**
+     * @var \Magento\Framework\Json\EncoderInterface
+     */
+    protected $jsonEncoder;
+
+    /**
+     * @param \Magento\Catalog\Block\Product\Context $context
+     * @param \Magento\Framework\Stdlib\ArrayUtils $arrayUtils
+     * @param EncoderInterface $jsonEncoder
+     * @param array $data
+     */
+    public function __construct(
+        \Magento\Catalog\Block\Product\Context $context,
+        \Magento\Framework\Stdlib\ArrayUtils $arrayUtils,
+        EncoderInterface $jsonEncoder,
+        array $data = []
+    ) {
+        $this->jsonEncoder = $jsonEncoder;
+        parent::__construct($context, $arrayUtils, $data);
+    }
+
     /**
      * Retrieve collection of gallery images
      *
@@ -42,12 +64,14 @@ public function getGalleryImages()
                 $image->setData(
                     'medium_image_url',
                     $this->_imageHelper->init($product, 'product_page_image_medium')
+                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
                         ->setImageFile($image->getFile())
                         ->getUrl()
                 );
                 $image->setData(
                     'large_image_url',
                     $this->_imageHelper->init($product, 'product_page_image_large')
+                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
                         ->setImageFile($image->getFile())
                         ->getUrl()
                 );
@@ -57,6 +81,26 @@ public function getGalleryImages()
         return $images;
     }
 
+    /**
+     * Return magnifier options
+     *
+     * @return string
+     */
+    public function getMagnifier()
+    {
+        return $this->jsonEncoder->encode($this->getVar('magnifier'));
+    }
+
+    /**
+     * Return breakpoints options
+     *
+     * @return string
+     */
+    public function getBreakpoints()
+    {
+        return $this->jsonEncoder->encode($this->getVar('breakpoints'));
+    }
+
     /**
      * Retrieve product images in JSON format
      *
@@ -69,12 +113,22 @@ public function getGalleryImagesJson()
             $imagesItems[] = [
                 'thumb' => $image->getData('small_image_url'),
                 'img' => $image->getData('medium_image_url'),
-                'original' => $image->getData('large_image_url'),
+                'full' => $image->getData('large_image_url'),
                 'caption' => $image->getLabel(),
                 'position' => $image->getPosition(),
                 'isMain' => $this->isMainImage($image),
             ];
         }
+        if (empty($imagesItems)) {
+            $imagesItems[] = [
+                'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
+                'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
+                'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
+                'caption' => '',
+                'position' => '0',
+                'isMain' => true,
+            ];
+        }
         return json_encode($imagesItems);
     }
 
diff --git a/app/code/Magento/Catalog/Helper/Image.php b/app/code/Magento/Catalog/Helper/Image.php
index c4ceb6bea1f0d..a847e8c42454a 100644
--- a/app/code/Magento/Catalog/Helper/Image.php
+++ b/app/code/Magento/Catalog/Helper/Image.php
@@ -436,11 +436,13 @@ public function placeholder($fileName)
      */
     public function getPlaceholder($placeholder = null)
     {
-        if (!$this->_placeholder) {
-            $placeholder = $placeholder ? : $this->_getModel()->getDestinationSubdir();
-            $this->_placeholder = 'Magento_Catalog::images/product/placeholder/' . $placeholder . '.jpg';
+        if ($placeholder) {
+            $placeholderFullPath = 'Magento_Catalog::images/product/placeholder/' . $placeholder . '.jpg';
+        } else {
+            $placeholderFullPath = $this->_placeholder
+                ?: 'Magento_Catalog::images/product/placeholder/' . $this->_getModel()->getDestinationSubdir() . '.jpg';
         }
-        return $this->_placeholder;
+        return $placeholderFullPath;
     }
 
     /**
@@ -816,7 +818,7 @@ public function getWidth()
      */
     public function getHeight()
     {
-        return $this->getAttribute('height') ? : $this->getAttribute('width');
+        return $this->getAttribute('height') ?: $this->getAttribute('width');
     }
 
     /**
diff --git a/app/code/Magento/Catalog/Model/Product.php b/app/code/Magento/Catalog/Model/Product.php
index a67d5c4dabacc..99709b513ca2c 100644
--- a/app/code/Magento/Catalog/Model/Product.php
+++ b/app/code/Magento/Catalog/Model/Product.php
@@ -19,6 +19,7 @@
  * Catalog product model
  *
  * @method Product setHasError(bool $value)
+ * @method \Magento\Catalog\Model\ResourceModel\Product getResource()
  * @method null|bool getHasError()
  * @method Product setAssociatedProductIds(array $productIds)
  * @method array getAssociatedProductIds()
diff --git a/app/code/Magento/Catalog/Model/Product/Image.php b/app/code/Magento/Catalog/Model/Product/Image.php
index 5ad174c1ae3fd..3d750be576b98 100644
--- a/app/code/Magento/Catalog/Model/Product/Image.php
+++ b/app/code/Magento/Catalog/Model/Product/Image.php
@@ -19,6 +19,9 @@
  * @SuppressWarnings(PHPMD.TooManyFields)
  * @SuppressWarnings(PHPMD.ExcessiveClassComplexity)
  * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
+ * @method string getFile()
+ * @method string getLabel()
+ * @method string getPosition()
  */
 class Image extends \Magento\Framework\Model\AbstractModel
 {
diff --git a/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php b/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php
index 564e08a1cbc61..eec42410e2e81 100644
--- a/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php
+++ b/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php
@@ -32,6 +32,11 @@ class GalleryTest extends \PHPUnit_Framework_TestCase
      */
     protected $registry;
 
+    /**
+     * @var \Magento\Framework\Json\EncoderInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $jsonEncoderMock;
+
     protected function setUp()
     {
         $this->mockContext();
@@ -40,9 +45,14 @@ protected function setUp()
             ->disableOriginalConstructor()
             ->getMock();
 
+        $this->jsonEncoderMock = $this->getMockBuilder('Magento\Framework\Json\EncoderInterface')
+            ->disableOriginalConstructor()
+            ->getMock();
+
         $this->model = new \Magento\Catalog\Block\Product\View\Gallery(
             $this->context,
-            $this->arrayUtils
+            $this->arrayUtils,
+            $this->jsonEncoderMock
         );
     }
 
@@ -103,7 +113,8 @@ public function testGetGalleryImages()
                 [$productMock, 'product_page_image_small', [], $this->imageHelper],
                 [$productMock, 'product_page_image_medium', [], $this->imageHelper],
                 [$productMock, 'product_page_image_large', [], $this->imageHelper],
-            ]);
+            ])
+            ->willReturnSelf();
         $this->imageHelper->expects($this->exactly(3))
             ->method('setImageFile')
             ->with('test_file')
@@ -118,6 +129,19 @@ public function testGetGalleryImages()
             ->method('getUrl')
             ->willReturn('product_page_image_large_url');
 
+        $this->imageHelper->expects($this->exactly(2))
+            ->method('constrainOnly')
+            ->with(true)
+            ->willReturnSelf();
+        $this->imageHelper->expects($this->exactly(2))
+            ->method('keepAspectRatio')
+            ->with(true)
+            ->willReturnSelf();
+         $this->imageHelper->expects($this->exactly(2))
+            ->method('keepFrame')
+            ->with(false)
+            ->willReturnSelf();
+
         $images = $this->model->getGalleryImages();
         $this->assertInstanceOf('Magento\Framework\Data\Collection', $images);
     }
diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
index e2ec81f81a8a1..d344cef700db1 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
@@ -12,49 +12,50 @@
  * @var $block \Magento\Catalog\Block\Product\View\Gallery
  */
 ?>
-<div class="gallery-placeholder"></div>
+<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
+    <div data-role="loader" class="loading-mask">
+        <div class="loader">
+            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
+                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
+        </div>
+    </div>
+</div>
 <script type="text/x-magento-init">
     {
-        ".gallery-placeholder": {
+        "[data-gallery-role=gallery-placeholder]": {
             "mage/gallery/gallery": {
                 "mixins":["magnifier/magnify"],
-                "magnifierOpts": {
-                    "enabled": <?php /* @escapeNotVerified */ echo $block->getVar("magnifier:enabled"); ?>,
-                    "eventType": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:eventType"); ?>",
-                    "width": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:width"); ?>",
-                    "height": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:height"); ?>",
-                    "top": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:top"); ?>",
-                    "left": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:left"); ?>"
-                },
+                "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
                 "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
                 "options": {
-                    "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery:nav"); ?>",
-                    "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:loop"); ?>,
-                    "keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:keyboard"); ?>,
-                    "arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:arrows"); ?>,
-                    "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:showCaption"); ?>,
+                    "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
+                    "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
+                    "keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
+                    "arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
+                    "allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
+                    "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
                     "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                     "thumbwidth": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                     "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                         ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                     "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
-                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>
+                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
+                    "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/duration"); ?>,
+                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/effect"); ?>",
+                    "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/navarrows"); ?>,
+                    "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
+                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navdir"); ?>"
+                },
+                "fullscreen": {
+                    "nav": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/nav"); ?>",
+                    "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
+                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
+                    "arrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/arrows"); ?>,
+                    "showCaption": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/caption"); ?>,
+                    "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
+                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
                 },
-                "breakpoints": {
-                    "mobile": {
-                        "conditions": {
-                            "max-width": "767px"
-                        },
-                        "options": {
-                            "options": {
-                                "nav": "dots"
-                            },
-                            "magnifierOpts": {
-                                "enabled": false
-                            }
-                        }
-                    }
-                }
+                "breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>
             }
         }
     }
diff --git a/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php b/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
index e2ba278cbc84b..fce1979115e66 100644
--- a/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
+++ b/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
@@ -198,6 +198,7 @@ public function getJsonConfig()
             'productId' => $currentProduct->getId(),
             'chooseText' => __('Choose an Option...'),
             'images' => isset($options['images']) ? $options['images'] : [],
+            'index' => isset($options['index']) ? $options['index'] : [],
         ];
 
         if ($currentProduct->hasPreconfiguredValues() && !empty($attributesData['defaultValues'])) {
diff --git a/app/code/Magento/ConfigurableProduct/Helper/Data.php b/app/code/Magento/ConfigurableProduct/Helper/Data.php
index bfd993d75414c..91dd722424219 100644
--- a/app/code/Magento/ConfigurableProduct/Helper/Data.php
+++ b/app/code/Magento/ConfigurableProduct/Helper/Data.php
@@ -30,6 +30,44 @@ public function __construct(\Magento\Catalog\Helper\Image $imageHelper)
         $this->imageHelper = $imageHelper;
     }
 
+    /**
+     * Retrieve collection of gallery images
+     *
+     * @param \Magento\Catalog\Api\Data\ProductInterface $product
+     * @return \Magento\Catalog\Model\Product\Image[]|null
+     */
+    public function getGalleryImages(\Magento\Catalog\Api\Data\ProductInterface $product)
+    {
+        $images = $product->getMediaGalleryImages();
+        if ($images instanceof \Magento\Framework\Data\Collection) {
+            foreach ($images as &$image) {
+                /** @var $image \Magento\Catalog\Model\Product\Image */
+                $image->setData(
+                    'small_image_url',
+                    $this->imageHelper->init($product, 'product_page_image_small')
+                        ->setImageFile($image->getFile())
+                        ->getUrl()
+                );
+                $image->setData(
+                    'medium_image_url',
+                    $this->imageHelper->init($product, 'product_page_image_medium')
+                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
+                        ->setImageFile($image->getFile())
+                        ->getUrl()
+                );
+                $image->setData(
+                    'large_image_url',
+                    $this->imageHelper->init($product, 'product_page_image_large')
+                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
+                        ->setImageFile($image->getFile())
+                        ->getUrl()
+                );
+            }
+        }
+
+        return $images;
+    }
+
     /**
      * Get Options for Configurable Product Options
      *
@@ -42,16 +80,27 @@ public function getOptions($currentProduct, $allowedProducts)
         $options = [];
         foreach ($allowedProducts as $product) {
             $productId = $product->getId();
+            $images = $this->getGalleryImages($product);
+            if ($images) {
+                foreach ($images as $image) {
+                    $options['images'][$productId][] =
+                        [
+                            'thumb' => $image->getData('small_image_url'),
+                            'img' => $image->getData('medium_image_url'),
+                            'full' => $image->getData('large_image_url'),
+                            'caption' => $image->getLabel(),
+                            'position' => $image->getPosition(),
+                            'isMain' => $image->getFile() == $product->getImage(),
+                        ];
+                }
+            }
             foreach ($this->getAllowAttributes($currentProduct) as $attribute) {
                 $productAttribute = $attribute->getProductAttribute();
                 $productAttributeId = $productAttribute->getId();
                 $attributeValue = $product->getData($productAttribute->getAttributeCode());
 
                 $options[$productAttributeId][$attributeValue][] = $productId;
-                $imageUrl = (!$product->getImage() || $product->getImage() === 'no_selection')
-                    ? $this->imageHelper->init($currentProduct, 'product_page_image_large')->getUrl()
-                    : $this->imageHelper->init($product, 'product_page_image_large')->getUrl();
-                $options['images'][$productAttributeId][$attributeValue][$productId] = $imageUrl;
+                $options['index'][$productId][$productAttributeId] = $attributeValue;
             }
         }
         return $options;
diff --git a/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php b/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php
index 05ac7031edfbb..85eae4dae7cda 100644
--- a/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php
+++ b/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php
@@ -440,7 +440,9 @@ public function getUsedProducts($product, $requiredAttributeIds = null)
             }
 
             $usedProducts = [];
-            $collection = $this->getUsedProductCollection($product)->addAttributeToSelect('*')
+            $collection = $this->getUsedProductCollection($product)
+                ->addAttributeToSelect('*')
+                ->addAttributeToSelect('media_gallery')
                 ->addFilterByRequiredOptions()
                 ->setStoreId($product->getStoreId());
 
@@ -454,6 +456,8 @@ public function getUsedProducts($product, $requiredAttributeIds = null)
             }
 
             foreach ($collection as $item) {
+                /** @var \Magento\Catalog\Model\Product $item */
+                $item->getResource()->getAttribute('media_gallery')->getBackend()->afterLoad($item);
                 $usedProducts[] = $item;
             }
 
diff --git a/app/code/Magento/ConfigurableProduct/Test/Unit/Helper/DataTest.php b/app/code/Magento/ConfigurableProduct/Test/Unit/Helper/DataTest.php
index 67c6a01be1f3c..ead7283f2d557 100644
--- a/app/code/Magento/ConfigurableProduct/Test/Unit/Helper/DataTest.php
+++ b/app/code/Magento/ConfigurableProduct/Test/Unit/Helper/DataTest.php
@@ -139,7 +139,7 @@ public function getOptionsDataProvider()
         $allowedProducts = [];
         for ($i = 1; $i <= 2; $i++) {
             $productMock = $this->getMock(
-                'Magento\Catalog\Model\Product', ['getData', 'getImage', 'getId', '__wakeup'], [], '', false
+                'Magento\Catalog\Model\Product', ['getData', 'getImage', 'getId', '__wakeup', 'getMediaGalleryImages'], [], '', false
             );
             $productMock->expects($this->any())
                 ->method('getData')
@@ -159,19 +159,17 @@ public function getOptionsDataProvider()
                 'attribute_id_1' => [
                     'attribute_code_value_1' => ['product_id_1', 'product_id_2'],
                 ],
-                'images' => [
-                    'attribute_id_1' => [
-                        'attribute_code_value_1' => [
-                            'product_id_1' => 'http://example.com/base_img_url',
-                            'product_id_2' => 'http://example.com/base_img_url_2',
-                        ],
-                    ],
-                    'attribute_id_2' => [
-                        'attribute_code_value_2' => [
-                            'product_id_1' => 'http://example.com/base_img_url',
-                            'product_id_2' => 'http://example.com/base_img_url_2',
-                        ],
+                'index' => [
+                    'product_id_1' => [
+                        'attribute_id_1' => 'attribute_code_value_1',
+                        'attribute_id_2' => 'attribute_code_value_2'
                     ],
+
+                    'product_id_2' => [
+                        'attribute_id_1' => 'attribute_code_value_1',
+                        'attribute_id_2' => 'attribute_code_value_2'
+                    ]
+
                 ],
                 'attribute_id_2' => [
                     'attribute_code_value_2' => ['product_id_1', 'product_id_2'],
diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
index 2fd83c511c802..c2f0e189946c1 100644
--- a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
+++ b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
@@ -4,30 +4,37 @@
  */
 /*jshint browser:true jquery:true*/
 define([
-    "jquery",
-    "underscore",
-    "mage/template",
-    "priceUtils",
-    "priceBox",
-    "jquery/ui",
-    "jquery/jquery.parsequery"
-], function($, _, mageTemplate, utils){
+    'jquery',
+    'underscore',
+    'mage/template',
+    'priceUtils',
+    'priceBox',
+    'jquery/ui',
+    'jquery/jquery.parsequery'
+], function ($, _, mageTemplate) {
+    'use strict';
 
     $.widget('mage.configurable', {
         options: {
             superSelector: '.super-attribute-select',
             selectSimpleProduct: '[name="selected_configurable_option"]',
             priceHolderSelector: '.price-box',
+            spConfig: {},
             state: {},
             priceFormat: {},
             optionTemplate: '<%- data.label %>' +
-                            '<% if (data.finalPrice.value) { %>' +
-                                ' <%- data.finalPrice.formatted %>' +
-                            '<% } %>',
-            mediaGallerySelector: '[data-role=media-gallery]'
+            '<% if (data.finalPrice.value) { %>' +
+            ' <%- data.finalPrice.formatted %>' +
+            '<% } %>',
+            mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
+            mediaGalleryInitial: null
         },
 
-        _create: function() {
+        /**
+         * Creates widget
+         * @private
+         */
+        _create: function () {
             // Initial setting of various option values
             this._initializeOptions();
 
@@ -51,29 +58,33 @@ define([
          * Initialize tax configuration, initial settings, and options values.
          * @private
          */
-        _initializeOptions: function() {
-            var priceBoxOptions = $(this.options.priceHolderSelector).priceBox('option');
+        _initializeOptions: function () {
+            var options = this.options,
+                gallery = $(options.mediaGallerySelector),
+                priceBoxOptions = $(this.options.priceHolderSelector).priceBox('option').priceConfig || null;
 
-            if(priceBoxOptions.priceConfig && priceBoxOptions.priceConfig.optionTemplate) {
-                this.options.optionTemplate = priceBoxOptions.priceConfig.optionTemplate;
+            if (priceBoxOptions && priceBoxOptions.optionTemplate) {
+                options.optionTemplate = priceBoxOptions.optionTemplate;
             }
 
-            if(priceBoxOptions.priceConfig && priceBoxOptions.priceConfig.priceFormat) {
-                this.options.priceFormat = priceBoxOptions.priceConfig.priceFormat;
+            if (priceBoxOptions && priceBoxOptions.priceFormat) {
+                options.priceFormat = priceBoxOptions.priceFormat;
             }
-            this.options.optionTemplate = mageTemplate(this.options.optionTemplate);
+            options.optionTemplate = mageTemplate(options.optionTemplate);
+
+            options.settings = options.spConfig.containerId ?
+                $(options.spConfig.containerId).find(options.superSelector) :
+                $(options.superSelector);
 
-            this.options.settings = (this.options.spConfig.containerId) ?
-                $(this.options.spConfig.containerId).find(this.options.superSelector) :
-                $(this.options.superSelector);
+            options.values = options.spConfig.defaultValues || {};
+            options.parentImage = $('[data-role=base-image-container] img').attr('src');
 
-            this.options.values = this.options.spConfig.defaultValues || {};
-            this.options.parentImage = $('[data-role=base-image-container] img').attr('src');
+            this.inputSimpleProduct = this.element.find(options.selectSimpleProduct);
 
-            this.initialGalleryImages = $(this.options.mediaGallerySelector).data('mageGallery')
-                ? $(this.options.mediaGallerySelector).gallery('option', 'images')
-                : [];
-            this.inputSimpleProduct = this.element.find(this.options.selectSimpleProduct);
+            gallery.on('gallery:loaded', function () {
+                var galleryObject = gallery.data('gallery');
+                options.mediaGalleryInitial = galleryObject.returnCurrentImages();
+            });
         },
 
         /**
@@ -81,11 +92,13 @@ define([
          * initialized inputs values.
          * @private
          */
-        _overrideDefaults: function() {
+        _overrideDefaults: function () {
             var hashIndex = window.location.href.indexOf('#');
+
             if (hashIndex !== -1) {
                 this._parseQueryParams(window.location.href.substr(hashIndex + 1));
             }
+
             if (this.options.spConfig.inputsInitialized) {
                 this._setValuesByAttribute();
             }
@@ -94,12 +107,15 @@ define([
         /**
          * Parse query parameters from a query string and set options values based on the
          * key value pairs of the parameters.
-         * @param queryString URL query string containing query parameters.
+         * @param {*} queryString - URL query string containing query parameters.
          * @private
          */
-        _parseQueryParams: function(queryString) {
-            var queryParams = $.parseQuery({query: queryString});
-            $.each(queryParams, $.proxy(function(key, value) {
+        _parseQueryParams: function (queryString) {
+            var queryParams = $.parseQuery({
+                query: queryString
+            });
+
+            $.each(queryParams, $.proxy(function (key, value) {
                 this.options.values[key] = value;
             }, this));
         },
@@ -109,11 +125,13 @@ define([
          * identifier.
          * @private
          */
-        _setValuesByAttribute: function() {
+        _setValuesByAttribute: function () {
             this.options.values = {};
-            $.each(this.options.settings, $.proxy(function(index, element) {
+            $.each(this.options.settings, $.proxy(function (index, element) {
+                var attributeId;
+
                 if (element.value) {
-                    var attributeId = element.id.replace(/[a-z]*/, '');
+                    attributeId = element.id.replace(/[a-z]*/, '');
                     this.options.values[attributeId] = element.value;
                 }
             }, this));
@@ -123,8 +141,8 @@ define([
          * Set up .on('change') events for each option element to configure the option.
          * @private
          */
-        _setupChangeEvents: function() {
-            $.each(this.options.settings, $.proxy(function(index, element) {
+        _setupChangeEvents: function () {
+            $.each(this.options.settings, $.proxy(function (index, element) {
                 $(element).on('change', this, this._configure);
             }, this));
         },
@@ -134,9 +152,10 @@ define([
          * attribute identifier. Set the state based on the attribute identifier.
          * @private
          */
-        _fillState: function() {
-            $.each(this.options.settings, $.proxy(function(index, element) {
+        _fillState: function () {
+            $.each(this.options.settings, $.proxy(function (index, element) {
                 var attributeId = element.id.replace(/[a-z]*/, '');
+
                 if (attributeId && this.options.spConfig.attributes[attributeId]) {
                     element.config = this.options.spConfig.attributes[attributeId];
                     element.attributeId = attributeId;
@@ -150,23 +169,25 @@ define([
          * an option's list of selections as needed or disable an option's setting.
          * @private
          */
-        _setChildSettings: function() {
-            var childSettings   = [],
-                settings        = this.options.settings,
-                index           = settings.length,
+        _setChildSettings: function () {
+            var childSettings = [],
+                settings = this.options.settings,
+                index = settings.length,
                 option;
 
             while (index--) {
                 option = settings[index];
 
-                !index ?
-                    this._fillSelect(option) :
-                    (option.disabled = true);
+                if (index) {
+                    option.disabled = true;
+                } else {
+                    this._fillSelect(option);
+                }
 
                 _.extend(option, {
-                    childSettings:  childSettings.slice(),
-                    prevSetting:    settings[index - 1],
-                    nextSetting:    settings[index + 1]
+                    childSettings: childSettings.slice(),
+                    prevSetting: settings[index - 1],
+                    nextSetting: settings[index + 1]
                 });
 
                 childSettings.push(option);
@@ -178,13 +199,11 @@ define([
          * the option, which sets its state, and initializes the option's choices, etc.
          * @private
          */
-        _configureForValues: function() {
+        _configureForValues: function () {
             if (this.options.values) {
-                this.options.settings.each($.proxy(function(index, element) {
+                this.options.settings.each($.proxy(function (index, element) {
                     var attributeId = element.attributeId;
-                    element.value = (typeof(this.options.values[attributeId]) === 'undefined') ?
-                        '' :
-                        this.options.values[attributeId];
+                    element.value = this.options.values[attributeId] || '';
                     this._configureElement(element);
                 }, this));
             }
@@ -193,9 +212,9 @@ define([
         /**
          * Event handler for configuring an option.
          * @private
-         * @param event Event triggered to configure an option.
+         * @param {Object} event - Event triggered to configure an option.
          */
-        _configure: function(event) {
+        _configure: function (event) {
             event.data._configureElement(this);
         },
 
@@ -203,20 +222,26 @@ define([
          * Configure an option, initializing it's state and enabling related options, which
          * populates the related option's selection and resets child option selections.
          * @private
-         * @param element The element associated with a configurable option.
+         * @param {*} element - The element associated with a configurable option.
          */
-        _configureElement: function(element) {
+        _configureElement: function (element) {
+            this.simpleProduct = this._getSimpleProductId(element);
+
             if (element.value) {
                 this.options.state[element.config.id] = element.value;
+
                 if (element.nextSetting) {
                     element.nextSetting.disabled = false;
                     this._fillSelect(element.nextSetting);
                     this._resetChildren(element.nextSetting);
                 } else {
-                    this.inputSimpleProduct.val(element.selectedOptions[0].config.allowedProducts[0]);
+                    if (!!document.documentMode) {
+                        this.inputSimpleProduct.val(element.options[element.selectedIndex].config.allowedProducts[0]);
+                    } else {
+                        this.inputSimpleProduct.val(element.selectedOptions[0].config.allowedProducts[0]);
+                    }
                 }
-            }
-            else {
+            } else {
                 this._resetChildren(element);
             }
             this._reloadPrice();
@@ -228,38 +253,15 @@ define([
          * @private
          */
         _changeProductImage: function () {
-            var images = this.options.spConfig.images,
-                imagesArray = null,
-                galleryElement = $(this.options.mediaGallerySelector);
-            $.each(this.options.settings, function (k, v) {
-                var selectValue = parseInt(v.value, 10),
-                    attributeId = v.id.replace(/[a-z]*/, '');
-                if (selectValue > 0 && attributeId) {
-                    if (!imagesArray) {
-                        imagesArray = images[attributeId][selectValue];
-                    } else {
-                        var intersectedArray = {};
-                        $.each(imagesArray, function (productId) {
-                            if (images[attributeId][selectValue][productId]) {
-                                intersectedArray[productId] = images[attributeId][selectValue][productId];
-                            }
-                        });
-                        imagesArray = intersectedArray;
-                    }
-                }
-            });
-
-            var result = [];
-            $.each(imagesArray || {}, function (k, v) {
-                result.push({
-                    small: v,
-                    medium: v,
-                    large: v
-                });
-            });
+            var images = this.options.spConfig.images[this.simpleProduct],
+                galleryObject = $(this.options.mediaGallerySelector).data('gallery');
 
-            if (galleryElement.length && galleryElement.data('mageGallery')) {
-                galleryElement.gallery('option', 'images', result.length > 0 ? result : this.initialGalleryImages);
+            if (galleryObject) {
+                if (images) {
+                    galleryObject.updateData(images);
+                } else {
+                    galleryObject.updateData(this.options.mediaGalleryInitial);
+                }
             }
         },
 
@@ -267,16 +269,17 @@ define([
          * For a given option element, reset all of its selectable options. Clear any selected
          * index, disable the option choice, and reset the option's state if necessary.
          * @private
-         * @param element The element associated with a configurable option.
+         * @param {*} element - The element associated with a configurable option.
          */
-        _resetChildren: function(element) {
+        _resetChildren: function (element) {
             if (element.childSettings) {
-                for (var i = 0; i < element.childSettings.length; i++) {
-                    element.childSettings[i].selectedIndex = 0;
-                    element.childSettings[i].disabled = true;
-                    if (element.config) {
-                        this.options.state[element.config.id] = false;
-                    }
+                _.each(element.childSettings, function (set) {
+                    set.selectedIndex = 0;
+                    set.disabled = true;
+                });
+
+                if (element.config) {
+                    this.options.state[element.config.id] = false;
                 }
             }
         },
@@ -284,25 +287,32 @@ define([
         /**
          * Populates an option's selectable choices.
          * @private
-         * @param element Element associated with a configurable option.
+         * @param {*} element - Element associated with a configurable option.
          */
-        _fillSelect: function(element) {
+        _fillSelect: function (element) {
             var attributeId = element.id.replace(/[a-z]*/, ''),
-                options = this._getAttributeOptions(attributeId);
+                options = this._getAttributeOptions(attributeId),
+                prevConfig,
+                index = 1,
+                allowedProducts,
+                i,
+                j;
+
             this._clearSelect(element);
             element.options[0] = new Option('', '');
             element.options[0].innerHTML = this.options.spConfig.chooseText;
+            prevConfig = false;
 
-            var prevConfig = false;
             if (element.prevSetting) {
                 prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
             }
+
             if (options) {
-                var index = 1;
-                for (var i = 0; i < options.length; i++) {
-                    var allowedProducts = [];
+                for (i = 0; i < options.length; i++) {
+                    allowedProducts = [];
+
                     if (prevConfig) {
-                        for (var j = 0; j < options[i].products.length; j++) {
+                        for (j = 0; j < options[i].products.length; j++) {
                             // prevConfig.config can be undefined
                             if (prevConfig.config &&
                                 prevConfig.config.allowedProducts &&
@@ -313,12 +323,15 @@ define([
                     } else {
                         allowedProducts = options[i].products.slice(0);
                     }
+
                     if (allowedProducts.length > 0) {
                         options[i].allowedProducts = allowedProducts;
                         element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);
+
                         if (typeof options[i].price !== 'undefined') {
                             element.options[index].setAttribute('price', options[i].prices);
                         }
+
                         element.options[index].config = options[i];
                         index++;
                     }
@@ -330,21 +343,22 @@ define([
          * Generate the label associated with a configurable option. This includes the option's
          * label or value and the option's price.
          * @private
-         * @param option A single choice among a group of choices for a configurable option.
-         * @param selOption Current selected option.
+         * @param {*} option - A single choice among a group of choices for a configurable option.
          * @return {String} The option label with option value and price (e.g. Black +1.99)
          */
-        _getOptionLabel: function(option, selOption) {
+        _getOptionLabel: function (option) {
             return option.label;
         },
 
         /**
          * Removes an option's selections.
          * @private
-         * @param element The element associated with a configurable option.
+         * @param {*} element - The element associated with a configurable option.
          */
-        _clearSelect: function(element) {
-            for (var i = element.options.length - 1; i >= 0; i--) {
+        _clearSelect: function (element) {
+            var i;
+
+            for (i = element.options.length - 1; i >= 0; i--) {
                 element.remove(i);
             }
         },
@@ -352,10 +366,10 @@ define([
         /**
          * Retrieve the attribute options associated with a specific attribute Id.
          * @private
-         * @param attributeId The id of the attribute whose configurable options are sought.
+         * @param {Number} attributeId - The id of the attribute whose configurable options are sought.
          * @return {Object} Object containing the attribute options.
          */
-        _getAttributeOptions: function(attributeId) {
+        _getAttributeOptions: function (attributeId) {
             if (this.options.spConfig.attributes[attributeId]) {
                 return this.options.spConfig.attributes[attributeId].options;
             }
@@ -364,19 +378,22 @@ define([
         /**
          * Reload the price of the configurable product incorporating the prices of all of the
          * configurable product's option selections.
-         * @private
-         * @return {Number} The price of the configurable product including selected options.
          */
-        _reloadPrice: function() {
+        _reloadPrice: function () {
             $(this.options.priceHolderSelector).trigger('updatePrice', this._getPrices());
         },
 
+        /**
+         * Get product various prices
+         * @returns {{}}
+         * @private
+         */
         _getPrices: function () {
             var prices = {},
-                elements = _.toArray(this.options.settings);
+                elements = _.toArray(this.options.settings),
+                hasProductPrice = false;
 
-            var hasProductPrice = false;
-            _.each(elements, function(element) {
+            _.each(elements, function (element) {
                 var selected = element.options[element.selectedIndex],
                     config = selected && selected.config,
                     priceValue = {};
@@ -392,16 +409,50 @@ define([
             return prices;
         },
 
+        /**
+         * Returns pracies for configured products
+         *
+         * @param {*} config - Products configuration
+         * @returns {*}
+         * @private
+         */
         _calculatePrice: function (config) {
-            var displayPrices = $(this.options.priceHolderSelector).priceBox('option').prices;
-            var newPrices = this.options.spConfig.optionPrices[_.first(config.allowedProducts)];
+            var displayPrices = $(this.options.priceHolderSelector).priceBox('option').prices,
+                newPrices = this.options.spConfig.optionPrices[_.first(config.allowedProducts)];
 
             _.each(displayPrices, function (price, code) {
                 if (newPrices[code]) {
-                    displayPrices[code].amount =  newPrices[code].amount - displayPrices[code].amount
+                    displayPrices[code].amount = newPrices[code].amount - displayPrices[code].amount;
                 }
             });
+
             return displayPrices;
+        },
+
+        /**
+         * Returns Simple product Id
+         *  depending on current selected option.
+         *
+         * @private
+         * @param {HTMLElement} element
+         * @returns {String|undefined}
+         */
+        _getSimpleProductId: function (element) {
+            // TODO: Rewrite algorithm. It should return ID of
+            //        simple product based on selected options.
+            var allOptions = element.config.options,
+                value = element.value,
+                config;
+
+            config = _.filter(allOptions, function (option) {
+                return option.id === value;
+            });
+            config = _.first(config);
+
+            return _.isEmpty(config) ?
+                undefined :
+                _.first(config.allowedProducts);
+
         }
 
     });
diff --git a/app/code/Magento/ProductVideo/Block/Product/View/Gallery.php b/app/code/Magento/ProductVideo/Block/Product/View/Gallery.php
index ce93d93700a5d..8643a8bec34b2 100644
--- a/app/code/Magento/ProductVideo/Block/Product/View/Gallery.php
+++ b/app/code/Magento/ProductVideo/Block/Product/View/Gallery.php
@@ -18,11 +18,6 @@ class Gallery extends \Magento\Catalog\Block\Product\View\Gallery
      */
     protected $mediaHelper;
 
-    /**
-     * @var \Magento\Framework\Json\EncoderInterface
-     */
-    private $jsonEncoder;
-
     /**
      * @param \Magento\Catalog\Block\Product\Context $context
      * @param \Magento\Framework\Stdlib\ArrayUtils $arrayUtils
@@ -33,17 +28,17 @@ class Gallery extends \Magento\Catalog\Block\Product\View\Gallery
     public function __construct(
         \Magento\Catalog\Block\Product\Context $context,
         \Magento\Framework\Stdlib\ArrayUtils $arrayUtils,
-        \Magento\ProductVideo\Helper\Media $mediaHelper,
         \Magento\Framework\Json\EncoderInterface $jsonEncoder,
+        \Magento\ProductVideo\Helper\Media $mediaHelper,
         array $data = []
     ) {
         parent::__construct(
             $context,
             $arrayUtils,
+            $jsonEncoder,
             $data
         );
         $this->mediaHelper = $mediaHelper;
-        $this->jsonEncoder = $jsonEncoder;
     }
 
     /**
diff --git a/app/code/Magento/ProductVideo/view/frontend/layout/catalog_product_view.xml b/app/code/Magento/ProductVideo/view/frontend/layout/catalog_product_view.xml
index 81d7989a521f2..a8fd6ae7725fb 100644
--- a/app/code/Magento/ProductVideo/view/frontend/layout/catalog_product_view.xml
+++ b/app/code/Magento/ProductVideo/view/frontend/layout/catalog_product_view.xml
@@ -8,12 +8,10 @@
 <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
         <css src="Magento_ProductVideo::css/product-video.css"/>
-        <link src="Magento_ProductVideo::js/fotorama-add-video-events.js"/>
-        <link src="Magento_ProductVideo::js/load-player.js"/>
     </head>
     <body>
         <referenceContainer name="product.info.media">
-            <block class="Magento\ProductVideo\Block\Product\View\Gallery" name="product.info.media.image" template="product/view/gallery.phtml"/>
+            <block class="Magento\ProductVideo\Block\Product\View\Gallery" name="product.info.media.video" after="product.info.media.image" template="product/view/gallery.phtml"/>
         </referenceContainer>
     </body>
 </page>
diff --git a/app/code/Magento/ProductVideo/view/frontend/requirejs-config.js b/app/code/Magento/ProductVideo/view/frontend/requirejs-config.js
index 956dd40b89e31..e19b89135b441 100644
--- a/app/code/Magento/ProductVideo/view/frontend/requirejs-config.js
+++ b/app/code/Magento/ProductVideo/view/frontend/requirejs-config.js
@@ -6,7 +6,6 @@
 var config = {
     map: {
         '*': {
-            fotoramaAddVideoEvents: 'Magento_ProductVideo/js/fotorama-add-video-events',
             loadPlayer: 'Magento_ProductVideo/js/load-player'
         }
     }
diff --git a/app/code/Magento/ProductVideo/view/frontend/templates/product/view/gallery.phtml b/app/code/Magento/ProductVideo/view/frontend/templates/product/view/gallery.phtml
index 192a3f18e2cc6..131b9f7e4ff33 100644
--- a/app/code/Magento/ProductVideo/view/frontend/templates/product/view/gallery.phtml
+++ b/app/code/Magento/ProductVideo/view/frontend/templates/product/view/gallery.phtml
@@ -10,69 +10,12 @@
  * @var $block \Magento\ProductVideo\Block\Product\View\Gallery
  */
 ?>
-<div class="gallery-placeholder"
-     data-mage-init='{"fotoramaAddVideoEvents":{}}'
-     data-fotorama-video-data='<?php /* @escapeNotVerified */ echo $block->getMediaGalleryDataJson(); ?>'
-     data-fotorama-video-settings='<?php /* @escapeNotVerified */ echo $block->getVideoSettingsJson(); ?>'>
-</div>
 <script type="text/x-magento-init">
     {
-        ".gallery-placeholder": {
-            "mage/gallery/gallery": {
-                "mixins":["magnifier/magnify"],
-                "magnifierOpts": {
-                    "enabled": <?php /* @escapeNotVerified */
-    echo $block->getVar("magnifier:enabled", "Magento_Catalog"); ?>,
-                    "eventType": "<?php /* @escapeNotVerified */
-    echo $block->getVar("magnifier:action", "Magento_Catalog"); ?>",
-                    "width": "<?php /* @escapeNotVerified */
-    echo $block->getVar("magnifier:width", "Magento_Catalog"); ?>",
-                    "height": "<?php /* @escapeNotVerified */
-    echo $block->getVar("magnifier:height", "Magento_Catalog"); ?>",
-                    "top": "<?php /* @escapeNotVerified */
-    echo $block->getVar("magnifier:top", "Magento_Catalog"); ?>",
-                    "left": "<?php /* @escapeNotVerified */
-    echo $block->getVar("magnifier:left", "Magento_Catalog"); ?>"
-                },
-                "data": <?php /* @escapeNotVerified */
-    echo $block->getGalleryImagesJson(); ?>,
-                "options": {
-                    "nav": "<?php /* @escapeNotVerified */
-    echo $block->getVar("gallery:nav", "Magento_Catalog"); ?>",
-                    "loop": <?php /* @escapeNotVerified */
-    echo $block->getVar("gallery:loop", "Magento_Catalog"); ?>,
-                    "keyboard": <?php /* @escapeNotVerified */
-    echo $block->getVar("gallery:keyboard", "Magento_Catalog"); ?>,
-                    "arrows": <?php /* @escapeNotVerified */
-    echo $block->getVar("gallery:arrows", "Magento_Catalog"); ?>,
-                    "showCaption": <?php /* @escapeNotVerified */
-    echo $block->getVar("gallery:showCaption", "Magento_Catalog"); ?>,
-                    "width": <?php /* @escapeNotVerified */
-    echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
-                    "thumbwidth": <?php /* @escapeNotVerified */
-    echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,
-                    "thumbheight": <?php /* @escapeNotVerified */
-    echo $block->getImageAttribute('product_page_image_small', 'height')
-        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
-                    "height": <?php /* @escapeNotVerified */
-    echo $block->getImageAttribute('product_page_image_medium', 'height')
-        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>
-                },
-                "breakpoints": {
-                    "mobile": {
-                        "conditions": {
-                            "max-width": "767px"
-                        },
-                        "options": {
-                            "options": {
-                                "nav": "dots"
-                            },
-                            "magnifierOpts": {
-                                "enabled": false
-                            }
-                        }
-                    }
-                }
+        "[data-gallery-role=gallery-placeholder]": {
+            "Magento_ProductVideo/js/fotorama-add-video-events": {
+                "fotoramaVideoData": <?php /* @escapeNotVerified */ echo $block->getMediaGalleryDataJson(); ?>,
+                "fotoramaVideoSettings": <?php /* @escapeNotVerified */ echo $block->getVideoSettingsJson(); ?>
             }
         }
     }
diff --git a/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js b/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
index e19d635a72b36..8b8f92f5b447b 100644
--- a/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
+++ b/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
@@ -3,7 +3,12 @@
  * See COPYING.txt for license details.
  */
 
-require(['jquery', 'jquery/ui', 'catalogGallery'], function ($) {
+define([
+    'jquery',
+    'jquery/ui',
+    'catalogGallery',
+    'Magento_ProductVideo/js/load-player'
+], function ($) {
     'use strict';
 
     /**
@@ -547,13 +552,12 @@ require(['jquery', 'jquery/ui', 'catalogGallery'], function ($) {
         }
     });
 
-    $('.gallery-placeholder').on('fotorama:ready', function () {
-        $(this).find('.fotorama').AddFotoramaVideoEvents({
-            VideoData: $(this).data('fotorama-video-data'),
-            VideoSettings: $(this).data('fotorama-video-settings')
+    return function (config, element) {
+        $('.gallery-placeholder').on('fotorama:ready', function () {
+            $(element).find('.fotorama').AddFotoramaVideoEvents({
+                VideoData: config.fotoramaVideoData || [],
+                VideoSettings: config.fotoramaVideoSettings || {}
+            });
         });
-        //no reason to store video data and settings after - erase it
-        $(this).removeAttr('data-fotorama-video-data');
-        $(this).removeAttr('data-fotorama-video-settings');
-    });
+    };
 });
diff --git a/app/code/Magento/ProductVideo/view/frontend/web/js/load-player.js b/app/code/Magento/ProductVideo/view/frontend/web/js/load-player.js
index 1f1c08bbe8db7..937c62ae26cec 100644
--- a/app/code/Magento/ProductVideo/view/frontend/web/js/load-player.js
+++ b/app/code/Magento/ProductVideo/view/frontend/web/js/load-player.js
@@ -7,7 +7,7 @@
  @version 0.0.1
  @requires jQuery & jQuery UI
  */
-require(['jquery', 'jquery/ui'], function ($) {
+define(['jquery', 'jquery/ui'], function ($) {
     'use strict';
 
     var videoRegister = {
diff --git a/app/code/Magento/Swatches/Helper/Data.php b/app/code/Magento/Swatches/Helper/Data.php
index c597284e6e40c..aecd9db6cfab9 100644
--- a/app/code/Magento/Swatches/Helper/Data.php
+++ b/app/code/Magento/Swatches/Helper/Data.php
@@ -387,9 +387,11 @@ protected function getAllSizeImages(Product $product, $imageFile)
     {
         return [
             'large' => $this->imageHelper->init($product, 'product_page_image_large')
+                ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
                 ->setImageFile($imageFile)
                 ->getUrl(),
             'medium' => $this->imageHelper->init($product, 'product_page_image_medium')
+                ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
                 ->setImageFile($imageFile)
                 ->getUrl(),
             'small' => $this->imageHelper->init($product, 'product_page_image_small')
diff --git a/app/code/Magento/Swatches/Test/Unit/Helper/DataTest.php b/app/code/Magento/Swatches/Test/Unit/Helper/DataTest.php
index 775e1b2196182..31e868cdf4ca9 100644
--- a/app/code/Magento/Swatches/Test/Unit/Helper/DataTest.php
+++ b/app/code/Magento/Swatches/Test/Unit/Helper/DataTest.php
@@ -334,6 +334,15 @@ public function testGetProductMediaGallery($mediaGallery, $image)
             ->method('setImageFile')
             ->with($image)
             ->willReturnSelf();
+        $this->imageHelperMock->expects($this->any())
+            ->method('constrainOnly')
+            ->willReturnSelf();
+        $this->imageHelperMock->expects($this->any())
+            ->method('keepAspectRatio')
+            ->willReturnSelf();
+        $this->imageHelperMock->expects($this->any())
+            ->method('keepFrame')
+            ->willReturnSelf();
         $this->imageHelperMock->expects($this->any())
             ->method('getUrl')
             ->willReturn('http://full_path_to_image/magento1.png');
diff --git a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
index 920b8f46f6530..0baa01cffda9c 100644
--- a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
+++ b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
@@ -181,7 +181,8 @@ define(["jquery", "jquery/ui"], function ($) {
             onlySwatches: false,                               // show only swatch controls
             enableControlLabel: true,                          // enable label for control
             moreButtonText: 'More',                            // text for more button
-            mediaCallback: ''                                  // Callback url for media
+            mediaCallback: '',                                 // Callback url for media
+            mediaGalleryInitial: [{}]                          // Cache for BaseProduct images. Needed when option unset
         },
 
         /**
@@ -204,6 +205,30 @@ define(["jquery", "jquery/ui"], function ($) {
             }
         },
 
+        /**
+         * @private
+         */
+        _create: function () {
+            var options = this.options,
+                gallery = $('[data-gallery-role=gallery-placeholder]', '.column.main'),
+                isProductViewExist = $('body.catalog-product-view').size() > 0,
+                $main = isProductViewExist ?
+                    this.element.parents('.column.main') :
+                    this.element.parents('.product-item-info');
+
+            if (isProductViewExist) {
+                gallery.on('gallery:loaded', function () {
+                    var galleryObject = gallery.data('gallery');
+
+                    options.mediaGalleryInitial = galleryObject.returnCurrentImages();
+                });
+            } else {
+                options.mediaGalleryInitial = [{
+                    'img': $main.find('.product-image-photo').attr('src')
+                }];
+            }
+        },
+
         /**
          * Render controls
          *
@@ -326,13 +351,13 @@ define(["jquery", "jquery/ui"], function ($) {
                 // Color
                 else if (type == 1) {
                     html += '<div class="' + optionClass + ' color" ' + attr +
-                    '" style="background: ' + value + ' no-repeat center; background-size: initial;">' + '' + '</div>';
+                        '" style="background: ' + value + ' no-repeat center; background-size: initial;">' + '' + '</div>';
                 }
 
                 // Image
                 else if (type == 2) {
                     html += '<div class="' + optionClass + ' image" ' + attr +
-                    '" style="background: url(' + value + ') no-repeat center; background-size: initial;">' + '' + '</div>';
+                        '" style="background: url(' + value + ') no-repeat center; background-size: initial;">' + '' + '</div>';
                 }
 
                 // Clear
@@ -696,7 +721,8 @@ define(["jquery", "jquery/ui"], function ($) {
          * @private
          */
         _ProductMediaCallback: function ($this, response) {
-            var $main = ($('body.catalog-product-view').size() > 0)
+            var isProductViewExist = $('body.catalog-product-view').size() > 0,
+                $main = isProductViewExist
                     ? $this.parents('.column.main')
                     : $this.parents('.product-item-info'),
                 $widget = this,
@@ -705,24 +731,52 @@ define(["jquery", "jquery/ui"], function ($) {
                     return e.hasOwnProperty('large') && e.hasOwnProperty('medium') && e.hasOwnProperty('small');
                 };
 
-            if ($widget._ObjectLength(response) > 0) {
-                if (support(response)) {
-                    images.push({large: response.large, medium: response.medium, small: response.small});
-                    if (response.hasOwnProperty('gallery')) {
-                        $.each(response.gallery, function () {
-                            if (!support(this) || response.large == this.large) {
-                                return;
-                            }
-                            images.push({large: this.large, medium: this.medium, small: this.small});
+            if ($widget._ObjectLength(response) < 1) {
+                this.updateBaseImage(this.options.mediaGalleryInitial, $main, isProductViewExist);
+
+                return;
+            }
+
+            if (support(response)) {
+                images.push({
+                    full: response.large,
+                    img: response.medium,
+                    thumb: response.small
+                });
+
+                if (response.hasOwnProperty('gallery')) {
+                    $.each(response.gallery, function () {
+                        if (!support(this) || response.large === this.large) {
+                            return;
+                        }
+                        images.push({
+                            full: this.large,
+                            img: this.medium,
+                            thumb: this.small
                         });
-                    }
+                    });
                 }
+            }
 
-                if ($('body.catalog-product-view').size() > 0) {
-                    $main.find('[data-role=media-gallery]').gallery('option', 'images', images);
-                } else {
-                    $main.find('.product-image-photo').attr('src', images.shift().medium);
-                }
+            this.updateBaseImage(images, $main, isProductViewExist);
+        },
+
+        /**
+         * Update [gallery-placeholder] or [product-image-photo]
+         * @param {Array} images
+         * @param {jQuery} context
+         * @param {Boolean} isProductViewExist
+         */
+        updateBaseImage: function (images, context, isProductViewExist) {
+            var justAnImage = images[0];
+
+            if (isProductViewExist) {
+                context
+                    .find('[data-gallery-role=gallery-placeholder]')
+                    .data('gallery')
+                    .updateData(images);
+            } else if (justAnImage && justAnImage.img) {
+                context.find('.product-image-photo').attr('src', justAnImage.img);
             }
         },
 
@@ -734,10 +788,7 @@ define(["jquery", "jquery/ui"], function ($) {
         _XhrKiller: function () {
             var $widget = this;
 
-            if (
-                $widget.xhr != undefined
-                || $widget.xhr != null
-            ) {
+            if ($widget.xhr !== undefined && $widget.xhr !== null) {
                 $widget.xhr.abort();
                 $widget.xhr = null;
             }
@@ -750,12 +801,12 @@ define(["jquery", "jquery/ui"], function ($) {
          */
         _EmulateSelected: function () {
             var $widget = this,
-                $this = $widget.element;
-            var request = $.parseParams(window.location.search.substring(1));
+                $this = $widget.element,
+                request = $.parseParams(window.location.search.substring(1));
 
             $.each(request, function (key, value) {
                 $this.find('.' + $widget.options.classes.attributeClass
-                + '[attribute-code="' + key + '"] [option-id="' + value + '"]').trigger('click');
+                    + '[attribute-code="' + key + '"] [option-id="' + value + '"]').trigger('click');
             });
         },
 
@@ -765,11 +816,14 @@ define(["jquery", "jquery/ui"], function ($) {
          * @returns {number}
          * @private
          */
-        _ObjectLength: function(obj) {
-            var size = 0, key;
+        _ObjectLength: function (obj) {
+            var size = 0,
+                key;
+
             for (key in obj) {
                 if (obj.hasOwnProperty(key)) size++;
             }
+
             return size;
         }
     });
diff --git a/app/code/Magento/Ui/view/base/web/js/lib/class.js b/app/code/Magento/Ui/view/base/web/js/lib/class.js
index 12b70b4a45cb1..d118959bd2603 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/class.js
+++ b/app/code/Magento/Ui/view/base/web/js/lib/class.js
@@ -40,7 +40,7 @@ define([
             constr = function () {
                 var obj = this;
 
-                if (!obj || !Object.getPrototypeOf(obj) === constr.prototype) {
+                if (!obj || !Object.getPrototypeOf(obj) === constr.prototype || obj === window) {
                     obj = Object.create(constr.prototype);
                 }
 
diff --git a/app/design/frontend/Magento/blank/etc/view.xml b/app/design/frontend/Magento/blank/etc/view.xml
index 6020a6ad025f5..bdb3014469903 100644
--- a/app/design/frontend/Magento/blank/etc/view.xml
+++ b/app/design/frontend/Magento/blank/etc/view.xml
@@ -181,20 +181,65 @@
     </media>
     <vars module="Magento_Catalog">
 
-        <!-- New gallery and magnifier theme settings -->
-        <var name="gallery:nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
-        <var name="gallery:loop">true</var> <!-- Gallery navigation loop (true/false) -->
-        <var name="gallery:keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
-        <var name="gallery:arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
-        <var name="gallery:showCaption">false</var> <!-- Display alt text as image title (true/false) -->
+        <!-- Gallery and magnifier theme settings. Start -->
+        <var name="gallery">
+            <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
+            <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
+            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
+            <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
+            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
+            <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
+            <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
+            <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->
+            <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
+            <var name="transition">
+                <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
+                <var name="duration">500</var> <!-- Sets transition duration in ms -->
+            </var>
+            <var name="fullscreen">
+                <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
+                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
+                <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
+                <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
+                <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
+                <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical)  -->
+                <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen -->
+                <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen -->
+                <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
+                <var name="transition">
+                    <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
+                    <var name="duration">500</var> <!-- Sets transition duration in ms -->
+                    <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
+                </var>
+            </var>
+        </var>
 
-        <var name="magnifier:top"></var> <!-- Top position of magnifier -->
-        <var name="magnifier:left"></var> <!-- Left position of magnifier -->
-        <var name="magnifier:width"></var> <!-- Width of magnifier block -->
-        <var name="magnifier:height"></var> <!-- Height of magnifier block -->
-        <var name="magnifier:eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
-        <var name="magnifier:enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
-        <!-- end -->
+        <var name="magnifier">
+            <var name="fullscreenzoom">5</var>  <!-- Zoom for fullscreen (integer)-->
+            <var name="top"></var> <!-- Top position of magnifier -->
+            <var name="left"></var> <!-- Left position of magnifier -->
+            <var name="width"></var> <!-- Width of magnifier block -->
+            <var name="height"></var> <!-- Height of magnifier block -->
+            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
+            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
+        </var>
+
+        <var name="breakpoints">
+            <var name="mobile">
+                <var name="conditions">
+                    <var name="max-width">767px</var>
+                </var>
+                <var name="options">
+                    <var name="options">
+                        <var name="navigation">dots</var>
+                    </var>
+                    <var name="magnifierOpts">
+                        <var name="enabled">false</var>
+                    </var>
+                </var>
+            </var>
+        </var>
+        <!-- end. Gallery and magnifier theme settings -->
 
         <var name="product_small_image_sidebar_size">100</var>  <!-- Override for small product image -->
         <var name="product_base_image_size">275</var>           <!-- Override for base product image -->
diff --git a/app/design/frontend/Magento/luma/Magento_Review/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_Review/web/css/source/_module.less
index 7149c5d38d888..2dea6077b721a 100644
--- a/app/design/frontend/Magento/luma/Magento_Review/web/css/source/_module.less
+++ b/app/design/frontend/Magento/luma/Magento_Review/web/css/source/_module.less
@@ -38,40 +38,6 @@
     }
 }
 
-//
-//    Reviews list and form
-//--------------------------------------
-
-.catalog-product-view.ajax-loading {
-    height: 100%;
-    overflow: hidden;
-    &:after {
-        content: "";
-        position:fixed;
-        height: 100%;
-        display: block;
-        width: 100%;
-        z-index: 998;
-        background: rgba(255,255,255,.4);
-    }
-    &:before {
-        content: "";
-        position:fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        margin:auto;
-        display: block;
-        @loading__size: 74px;
-        width: @loading__size;
-        height: @loading__size;
-        border-radius: @loading__size/2;
-        z-index: 999;
-        background: rgba(255, 255, 255, .7) url('../images/loader-1.gif') no-repeat 50% 50%;
-    }
-}
-
 //
 //    Review product page
 //--------------------------------------
diff --git a/app/design/frontend/Magento/luma/etc/view.xml b/app/design/frontend/Magento/luma/etc/view.xml
index 60da26b477424..974c4c9fe5a80 100644
--- a/app/design/frontend/Magento/luma/etc/view.xml
+++ b/app/design/frontend/Magento/luma/etc/view.xml
@@ -78,20 +78,20 @@
             </image>
             <image id="product_page_image_large" type="image"/>
             <image id="product_page_image_medium" type="image">
-                <width>560</width>
-                <height>700</height>
+                <width>700</width>
+                <height>560</height>
             </image>
             <image id="product_page_image_small" type="thumbnail">
                 <width>88</width>
                 <height>110</height>
             </image>
             <image id="product_page_main_image" type="image">
-                <width>560</width>
-                <height>700</height>
+                <width>700</width>
+                <height>560</height>
             </image>
             <image id="product_page_main_image_default" type="image">
-                <width>560</width>
-                <height>700</height>
+                <width>700</width>
+                <height>560</height>
             </image>
             <image id="product_page_more_views" type="thumbnail">
                 <width>88</width>
@@ -185,20 +185,65 @@
     </media>
     <vars module="Magento_Catalog">
 
-        <!-- New gallery and magnifier theme settings -->
-        <var name="gallery:nav">dots</var> <!-- Gallery navigation style (false/thumbs/dots) -->
-        <var name="gallery:loop">false</var> <!-- Gallery navigation loop (true/false) -->
-        <var name="gallery:keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
-        <var name="gallery:arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
-        <var name="gallery:showCaption">true</var> <!-- Display alt text as image title (true/false) -->
+        <!-- Gallery and magnifier theme settings. Start -->
+        <var name="gallery">
+            <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
+            <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
+            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
+            <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
+            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
+            <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
+            <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
+            <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->
+            <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
+            <var name="transition">
+                <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
+                <var name="duration">500</var> <!-- Sets transition duration in ms -->
+            </var>
+            <var name="fullscreen">
+                <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
+                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
+                <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
+                <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
+                <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
+                <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical)  -->
+                <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen -->
+                <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen -->
+                <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
+                <var name="transition">
+                    <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
+                    <var name="duration">500</var> <!-- Sets transition duration in ms -->
+                    <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
+                </var>
+            </var>
+        </var>
 
-        <var name="magnifier:top"></var> <!-- Top position of magnifier -->
-        <var name="magnifier:left"></var> <!-- Right position of magnifier -->
-        <var name="magnifier:width"></var> <!-- Width of magnifier block -->
-        <var name="magnifier:height"></var> <!-- Height of magnifier block -->
-        <var name="magnifier:eventType">click</var> <!-- Action that atcivates zoom (hover/click) -->
-        <var name="magnifier:enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
-        <!-- end -->
+        <var name="magnifier">
+            <var name="fullscreenzoom">5</var>  <!-- Zoom for fullscreen (integer)-->
+            <var name="top"></var> <!-- Top position of magnifier -->
+            <var name="left"></var> <!-- Left position of magnifier -->
+            <var name="width"></var> <!-- Width of magnifier block -->
+            <var name="height"></var> <!-- Height of magnifier block -->
+            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
+            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
+        </var>
+
+        <var name="breakpoints">
+            <var name="mobile">
+                <var name="conditions">
+                    <var name="max-width">767px</var>
+                </var>
+                <var name="options">
+                    <var name="options">
+                        <var name="nav">dots</var>
+                    </var>
+                    <var name="magnifierOpts">
+                        <var name="enabled">false</var>
+                    </var>
+                </var>
+            </var>
+        </var>
+        <!-- end. Gallery and magnifier theme settings -->
 
         <var name="product_small_image_sidebar_size">100</var>  <!-- Override for small product image -->
         <var name="product_base_image_size">275</var>           <!-- Override for base product image -->
diff --git a/dev/tests/js/jasmine/assets/gallery/config.json b/dev/tests/js/jasmine/assets/gallery/config.json
index b3c8b8bc0b38d..d1d8e94d7f220 100644
--- a/dev/tests/js/jasmine/assets/gallery/config.json
+++ b/dev/tests/js/jasmine/assets/gallery/config.json
@@ -59,12 +59,17 @@
         "arrows": "false",
         "thumbwidth": "90",
         "thumbheight": "90",
-        "ratio": "1"
+        "ratio": "1",
+        "allowfullscreen": true
+    },
+    "fullscreen": {
+        "nav": false
     },
     "breakpoints": {
         "alias": {
             "conditions": {
-                "min-width": "0px"
+                "min-width": "0px",
+                "max-width": "1px"
             },
             "options": {
                 "options": {
diff --git a/dev/tests/js/jasmine/tests/lib/mage/gallery.test.js b/dev/tests/js/jasmine/tests/lib/mage/gallery.test.js
index f198fee51b045..ffcd3abf327c8 100644
--- a/dev/tests/js/jasmine/tests/lib/mage/gallery.test.js
+++ b/dev/tests/js/jasmine/tests/lib/mage/gallery.test.js
@@ -19,6 +19,7 @@ define([
         stageSelector = '[data-gallery-role="stage-shaft"]',
         navSelector = '[data-gallery-role="nav-frame"]',
         dotSelector = '[data-nav-type="dot"]',
+        navWrap = '[data-gallery-role="nav-wrap"]',
         dataToUpdate = [
             {
                 img: 'data:image/png;base64,' +
@@ -33,7 +34,16 @@ define([
                 img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAw' +
                 'CAAAAC0lEQVR42mP4Xw8AAoABf5/NhYYAAAAASUVORK5CYII='
             }
-        ];
+        ],
+        waitsFor = function (test, fn) {
+            if (test()) {
+                fn();
+            } else {
+                setTimeout(function () {
+                    waitsFor(test, fn);
+                }, 10);
+            }
+        };
 
     gallery(magnifier(conf, body), body);
 
@@ -115,5 +125,30 @@ define([
         it('breakpoints override configs', function () {
             expect($('.fotorama__arr').css('display')).toBe('block');
         });
+
+        it('fullscreen enter', function (done) {
+            expect($(navWrap).css('display') === 'block').toBeTruthy();
+            galleryAPI.fotorama.requestFullScreen();
+
+            waitsFor(function () {
+                return $(navWrap).css('display') !== 'block';
+            }, function () {
+                expect($(navWrap).css('display') === 'none').toBeTruthy();
+                done();
+            });
+        });
+
+        it('fullscreen exit', function (done) {
+            expect($(navWrap).css('display') === 'none').toBeTruthy();
+            galleryAPI.fotorama.cancelFullScreen();
+
+            waitsFor(function () {
+                return $(navWrap).css('display') !== 'none';
+            }, function () {
+                expect($(navWrap).css('display') === 'block').toBeTruthy();
+                done();
+            });
+        });
+
     });
 });
diff --git a/lib/internal/Magento/Framework/Config/View.php b/lib/internal/Magento/Framework/Config/View.php
index 00aab9b33e2e3..98a9614018816 100644
--- a/lib/internal/Magento/Framework/Config/View.php
+++ b/lib/internal/Magento/Framework/Config/View.php
@@ -80,12 +80,7 @@ protected function _extractData(\DOMDocument $dom)
             switch ($childNode->tagName) {
                 case 'vars':
                     $moduleName = $childNode->getAttribute('module');
-                    /** @var $varNode \DOMElement */
-                    foreach ($childNode->getElementsByTagName('var') as $varNode) {
-                        $varName = $varNode->getAttribute('name');
-                        $varValue = $varNode->nodeValue;
-                        $result[$childNode->tagName][$moduleName][$varName] = $varValue;
-                    }
+                    $result[$childNode->tagName][$moduleName] = $this->parseVarElement($childNode);
                     break;
                 case 'exclude':
                     /** @var $itemNode \DOMElement */
@@ -111,6 +106,27 @@ protected function _extractData(\DOMDocument $dom)
         return $result;
     }
 
+    /**
+     * Recursive parser for <var> nodes
+     *
+     * @param \DOMElement $node
+     * @return string|boolean|number|null|[]
+     */
+    protected function parseVarElement(\DOMElement $node)
+    {
+        $result = [];
+        for ($varNode = $node->firstChild; $varNode !== null; $varNode = $varNode->nextSibling) {
+            if ($varNode instanceof \DOMElement && $varNode->tagName == "var") {
+                $varName = $varNode->getAttribute('name');
+                $result[$varName] = $this->parseVarElement($varNode);
+            }
+        }
+        if (!count($result)) {
+            $result = $node->nodeValue;
+        }
+        return $result;
+    }
+
     /**
      * Get a list of variables in scope of specified module
      *
@@ -129,11 +145,24 @@ public function getVars($module)
      *
      * @param string $module
      * @param string $var
-     * @return string|false
+     * @return string|false|array
      */
     public function getVarValue($module, $var)
     {
-        return isset($this->_data['vars'][$module][$var]) ? $this->_data['vars'][$module][$var] : false;
+        if (!isset($this->_data['vars'][$module])) {
+            return false;
+        }
+
+        $value = $this->_data['vars'][$module];
+        foreach (explode('/', $var) as $node) {
+            if (is_array($value) && isset($value[$node])) {
+                $value = $value[$node];
+            } else {
+                return false;
+            }
+        }
+
+        return $value;
     }
 
     /**
diff --git a/lib/internal/Magento/Framework/Config/etc/view.xsd b/lib/internal/Magento/Framework/Config/etc/view.xsd
index 21a371d863342..1ded09402a6b0 100644
--- a/lib/internal/Magento/Framework/Config/etc/view.xsd
+++ b/lib/internal/Magento/Framework/Config/etc/view.xsd
@@ -12,15 +12,7 @@
                 <xs:element name="vars" maxOccurs="unbounded">
                     <xs:complexType>
                         <xs:sequence>
-                            <xs:element name="var" maxOccurs="unbounded">
-                                <xs:complexType>
-                                    <xs:simpleContent>
-                                        <xs:extension base="xs:string">
-                                            <xs:attribute name="name" type="xs:string" use="required"/>
-                                        </xs:extension>
-                                    </xs:simpleContent>
-                                </xs:complexType>
-                            </xs:element>
+                            <xs:element name="var" type="varType" maxOccurs="unbounded"/>
                         </xs:sequence>
                         <xs:attribute name="module" type="xs:string" use="required"/>
                     </xs:complexType>
@@ -38,6 +30,13 @@
             <xs:field xpath="@module"/>
         </xs:unique>
     </xs:element>
+    <xs:complexType name="varType" mixed="true">
+        <xs:sequence minOccurs="0" maxOccurs="unbounded">
+            <xs:element name="var" type="varType"/>
+        </xs:sequence>
+        <xs:attribute name="name" type="xs:string" use="required"/>
+        <xs:attribute name="value" type="xs:string"/>
+    </xs:complexType>
     <xs:complexType name="mediaType" mixed="true">
         <xs:all />
     </xs:complexType>
diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js
index 9d74f25391769..445fe7d30c52c 100644
--- a/lib/web/fotorama/fotorama.js
+++ b/lib/web/fotorama/fotorama.js
@@ -5,7 +5,7 @@ fotoramaVersion = '4.6.4';
 (function (window, document, location, $, undefined) {
     "use strict";
     var _fotoramaClass = 'fotorama',
-        _fullscreenClass = 'fullscreen',
+        _fullscreenClass = 'fotorama__fullscreen',
 
         wrapClass = _fotoramaClass + '__wrap',
         wrapCss2Class = wrapClass + '--css2',
@@ -37,6 +37,9 @@ fotoramaVersion = '4.6.4';
         navClass = _fotoramaClass + '__nav',
         navWrapClass = navClass + '-wrap',
         navShaftClass = navClass + '__shaft',
+        navShaftVerticalClass = navWrapClass + '--vertical',
+        navShaftListClass = navWrapClass + '--list',
+        navShafthorizontalClass = navWrapClass + '--horizontal',
         navDotsClass = navClass + '--dots',
         navThumbsClass = navClass + '--thumbs',
         navFrameClass = navClass + '__frame',
@@ -49,6 +52,8 @@ fotoramaVersion = '4.6.4';
         shadowsClass = shadowClass + 's',
         shadowsLeftClass = shadowsClass + '--left',
         shadowsRightClass = shadowsClass + '--right',
+        shadowsTopClass = shadowsClass + '--top',
+        shadowsBottomClass = shadowsClass + '--bottom',
 
         activeClass = _fotoramaClass + '__active',
         selectClass = _fotoramaClass + '__select',
@@ -70,6 +75,8 @@ fotoramaVersion = '4.6.4';
         imgFullClass = imgClass + '--full',
 
         thumbClass = _fotoramaClass + '__thumb',
+        thumbArrLeft = thumbClass + '__arr--left',
+        thumbArrRight = thumbClass + '__arr--right',
         thumbBorderClass = thumbClass + '-border',
 
         htmlClass = _fotoramaClass + '__html',
@@ -81,7 +88,7 @@ fotoramaVersion = '4.6.4';
 
         spinnerClass = _fotoramaClass + '__spinner',
 
-        horizontalImageClass = _fotoramaClass + '_horisontal_ratio',
+        horizontalImageClass = _fotoramaClass + '_horizontal_ratio',
         verticalImageClass = _fotoramaClass + '_vertical_ratio';
     var JQUERY_VERSION = $ && $.fn.jquery.split('.');
 
@@ -90,7 +97,7 @@ fotoramaVersion = '4.6.4';
         || (JQUERY_VERSION[0] == 1 && JQUERY_VERSION[1] < 8)) {
         throw 'Fotorama requires jQuery 1.8 or later and will not run without it.';
     }
-// My Underscore :-)
+
     var _ = {};
     /* Modernizr 2.8.3 (Custom Build) | MIT & BSD
      * Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-touch-prefixed
@@ -483,7 +490,7 @@ fotoramaVersion = '4.6.4';
                 , n
 
             for (n in prop) el[n] = prop[n]
-            return el;
+            return el
         }
 
         /**
@@ -859,6 +866,7 @@ fotoramaVersion = '4.6.4';
         }
         return encodedFuncName;
     }
+
     var $WINDOW = $(window),
         $DOCUMENT = $(document),
         $HTML,
@@ -899,6 +907,12 @@ fotoramaVersion = '4.6.4';
 
         MAX_WIDTH = 1200,
 
+        /**
+         * Number of thumbnails in slide. Calculated only on setOptions and resize.
+         * @type {number}
+         */
+        thumbsPerSlide = 1,
+
         OPTIONS = {
 
             /**
@@ -978,7 +992,7 @@ fotoramaVersion = '4.6.4';
 
             arrows: true,
             click: true,
-            swipe: true,
+            swipe: false,
             trackpad: false,
 
             shuffle: false,
@@ -987,7 +1001,23 @@ fotoramaVersion = '4.6.4';
 
             shadows: true,
             spinner: null,
-            showcaption: true
+            showcaption: true,
+
+            /**
+             * Set type of thumbnail navigation
+             */
+            navdir: 'horizontal',
+
+            /**
+             * Set configuration to show or hide arrows in thumb navigation
+             */
+            navarrows: true,
+
+            /**
+             * Set type of navigation. Can be thumbs or slides
+             */
+            navtype: 'thumbs'
+
         },
 
         KEYBOARD_OPTIONS = {
@@ -999,6 +1029,7 @@ fotoramaVersion = '4.6.4';
             home: false,
             end: false
         };
+
     function noop() {
     }
 
@@ -1006,24 +1037,39 @@ fotoramaVersion = '4.6.4';
         return Math.max(isNaN(min) ? -Infinity : min, Math.min(isNaN(max) ? Infinity : max, value));
     }
 
-    function readTransform(css) {
-        return css.match(/ma/) && css.match(/-?\d+(?!d)/g)[css.match(/3d/) ? 12 : 4];
+    function readTransform(css, dir) {
+        return css.match(/ma/) && css.match(/-?\d+(?!d)/g)[css.match(/3d/) ?
+                (dir === 'vertical' ? 13 : 12) : (dir === 'vertical' ? 5 : 4)
+                ]
     }
 
-    function readPosition($el) {
+    function readPosition($el, dir) {
         if (CSS3) {
-            return +readTransform($el.css('transform'));
+            return +readTransform($el.css('transform'), dir);
         } else {
-            return +$el.css('left').replace('px', '');
+            return +$el.css(dir === 'vertical' ? 'top' : 'left').replace('px', '');
         }
     }
 
-    function getTranslate(pos/*, _001*/) {
+    function getTranslate(pos, direction) {
         var obj = {};
+
         if (CSS3) {
-            obj.transform = 'translate3d(' + (pos/* + (_001 ? 0.001 : 0)*/) + 'px,0,0)'; // 0.001 to remove Retina artifacts
+
+            switch (direction) {
+                case 'vertical':
+                    obj.transform = 'translate3d(0, ' + (pos) + 'px,0)';
+                    break;
+                case 'list':
+                    break;
+                default :
+                    obj.transform = 'translate3d(' + (pos) + 'px,0,0)';
+                    break;
+            }
         } else {
-            obj.left = pos;
+            direction === 'vertical' ?
+                obj.top = pos :
+                obj.left = pos;
         }
         return obj;
     }
@@ -1104,7 +1150,8 @@ fotoramaVersion = '4.6.4';
     }
 
 
-    function stop($el, left/*, _001*/) {
+    function stop($el, pos/*, _001*/) {
+        var dir = $el.navdir || 'horizontal';
         if ($el.length) {
             var elData = $el.data();
             if (CSS3) {
@@ -1114,12 +1161,12 @@ fotoramaVersion = '4.6.4';
             } else {
                 $el.stop();
             }
-            var lockedLeft = getNumber(left, function () {
-                return readPosition($el);
+            var lockedPos = getNumber(pos, function () {
+                return readPosition($el, dir);
             });
 
-            $el.css(getTranslate(lockedLeft/*, _001*/));//.width(); // `.width()` for reflow
-            return lockedLeft;
+            $el.css(getTranslate(lockedPos, dir/*, _001*/));//.width(); // `.width()` for reflow
+            return lockedPos;
         }
     }
 
@@ -1195,7 +1242,10 @@ fotoramaVersion = '4.6.4';
                 dataType: 'jsonp',
                 success: function (json) {
                     dataFrame.thumbsReady = true;
-                    updateData(data, {img: json[0].thumbnail_large, thumb: json[0].thumbnail_small}, dataFrame.i, fotorama);
+                    updateData(data, {
+                        img: json[0].thumbnail_large,
+                        thumb: json[0].thumbnail_small
+                    }, dataFrame.i, fotorama);
                 }
             });
         } else {
@@ -1354,8 +1404,11 @@ fotoramaVersion = '4.6.4';
         }
     }
 
-    function findShadowEdge(pos, min, max) {
-        return min === max ? false : pos <= min ? 'left' : pos >= max ? 'right' : 'left right';
+    function findShadowEdge(pos, min, max, dir) {
+        return min === max ? false :
+            dir === 'vertical' ?
+                (pos <= min ? 'top' : pos >= max ? 'bottom' : 'top bottom') :
+                (pos <= min ? 'left' : pos >= max ? 'right' : 'left right');
     }
 
     function smartClick($el, fn, _options) {
@@ -1378,7 +1431,6 @@ fotoramaVersion = '4.6.4';
                 onMove: _options.onMove || noop,
                 onTouchEnd: _options.onTouchEnd || noop,
                 onEnd: function (result) {
-                    ////console.log('smartClick → result.moved', result.moved);
                     if (result.moved) return;
                     fn.call(this, startEvent);
                 }
@@ -1468,6 +1520,56 @@ fotoramaVersion = '4.6.4';
         el.addEventListener ? el.addEventListener(e, fn, !!bool) : el.attachEvent('on' + e, fn);
     }
 
+    /**
+     *
+     * @param position guess position for navShaft
+     * @param restriction object contains min and max values for position
+     * @returns {*} filtered value of position
+     */
+    function validateRestrictions(position, restriction) {
+        if (position > restriction.max) {
+            position = restriction.max;
+        } else {
+            if (position < restriction.min) {
+                position = restriction.min;
+            }
+        }
+        return position;
+    }
+
+    function validateSlidePos(opt, navShaftTouchTail, guessIndex, offsetNav, $guessNavFrame, $navWrap, dir) {
+        var position,
+            size,
+            wrapSize;
+        if (dir === 'horizontal') {
+            size = opt.thumbwidth;
+            wrapSize = $navWrap.width();
+        } else {
+            size = opt.thumbheight;
+            wrapSize = $navWrap.height();
+        }
+        if ( (size + opt.margin) * (guessIndex + 1) >= (wrapSize - offsetNav) ) {
+            if (dir === 'horizontal') {
+                position = -$guessNavFrame.position().left;
+            } else {
+                position = -$guessNavFrame.position().top;
+            }
+        } else {
+            if ((size + opt.margin) * (guessIndex) <= Math.abs(offsetNav)) {
+                if (dir === 'horizontal') {
+                    position = -$guessNavFrame.position().left + wrapSize - (size + opt.margin);
+                } else {
+                    position = -$guessNavFrame.position().top + wrapSize - (size + opt.margin);
+                }
+            } else {
+                position = offsetNav;
+            }
+        }
+        position = validateRestrictions(position, navShaftTouchTail);
+
+        return position || 0;
+    }
+
     function elIsDisabled(el) {
         return !!el.getAttribute('disabled');
     }
@@ -1562,6 +1664,7 @@ fotoramaVersion = '4.6.4';
         };
 
     }(UTIL || {}, jQuery));
+
     function slide($el, options) {
         var elData = $el.data(),
             elPos = Math.round(options.pos),
@@ -1574,27 +1677,18 @@ fotoramaVersion = '4.6.4';
 
         if (typeof options.overPos !== 'undefined' && options.overPos !== options.pos) {
             elPos = options.overPos;
-            onEndFn = function () {
-                slide($el, $.extend({}, options, {
-                    overPos: options.pos,
-                    time: Math.max(TRANSITION_DURATION, options.time / 2)
-                }));
-            };
         }
 
-        ////////console.time('var translate = $.extend');
-        var translate = $.extend(getTranslate(elPos/*, options._001*/), options.width && {width: options.width});
-        ////////console.timeEnd('var translate = $.extend');
+        var translate = $.extend(getTranslate(elPos, options.direction), options.width && {width: options.width}, options.height && {height: options.height});
         if (elData && elData.sliding) {
             elData.sliding = true;
         }
 
         if (CSS3) {
             $el.css($.extend(getDuration(options.time), translate));
+
             if (options.time > 10) {
-                ////////console.time('afterTransition');
                 afterTransition($el, 'transform', onEndFn, options.time);
-                ////////console.timeEnd('afterTransition');
             } else {
                 onEndFn();
             }
@@ -1643,10 +1737,12 @@ fotoramaVersion = '4.6.4';
 
         (_$el1 && crossfadeFLAG) || _$el2 || onEndFn();
     }
+
     var lastEvent,
         moveEventType,
         preventEvent,
-        preventEventTimeout;
+        preventEventTimeout,
+        dragDomEl;
 
     function extendEvent(e) {
         var touch = (e.touches || [])[0] || e;
@@ -1720,7 +1816,6 @@ fotoramaVersion = '4.6.4';
                     stopEvent(e);
                 }
             } else {
-                ////console.log('onMove e.preventDefault');
                 stopEvent(e);
                 (options.onMove || noop).call(el, e, {touch: touchFLAG});
             }
@@ -1797,11 +1892,12 @@ fotoramaVersion = '4.6.4';
                 .on('mousemove', onMove)
                 .on('mouseup', onEnd);
         }
-
-        $el.on('click', 'a', function (e) {
-            if (!Modernizr.touch) {
-                e.preventDefault();
-            }
+        if (Modernizr.touch) {
+            dragDomEl = 'a';
+        } else {
+            dragDomEl = 'div';
+        }
+        $el.on('click', dragDomEl, function (e) {
             tail.checked && stopEvent(e);
         });
 
@@ -1823,6 +1919,7 @@ fotoramaVersion = '4.6.4';
             min,
             max,
             snap,
+            dir,
             slowFLAG,
             controlFLAG,
             moved,
@@ -1830,7 +1927,7 @@ fotoramaVersion = '4.6.4';
 
         function startTracking(e, noStop) {
             tracked = true;
-            startCoo = coo = e._x;
+            startCoo = coo = (dir === 'vertical') ? e._y : e._x;
             startTime = e._now;
 
             moveTrack = [
@@ -1845,7 +1942,9 @@ fotoramaVersion = '4.6.4';
         function onStart(e, result) {
             min = tail.min;
             max = tail.max;
-            snap = tail.snap;
+            snap = tail.snap,
+                dir = tail.direction || 'horizontal',
+                $el.navdir = dir;
 
             slowFLAG = e.altKey;
             tracked = moved = false;
@@ -1862,14 +1961,13 @@ fotoramaVersion = '4.6.4';
                 if (!tracked) {
                     startTracking(e);
                 }
-
-                coo = e._x;
+                coo = (dir === 'vertical') ? e._y : e._x;
 
                 moveTrack.push([e._now, coo]);
 
                 moveElPos = startElPos - (startCoo - coo);
 
-                edge = findShadowEdge(moveElPos, min, max);
+                edge = findShadowEdge(moveElPos, min, max, dir);
 
                 if (moveElPos <= min) {
                     moveElPos = edgeResistance(moveElPos, min);
@@ -1878,7 +1976,7 @@ fotoramaVersion = '4.6.4';
                 }
 
                 if (!tail.noMove) {
-                    $el.css(getTranslate(moveElPos/*, options._001*/));
+                    $el.css(getTranslate(moveElPos, dir));
                     if (!moved) {
                         moved = true;
                         // only for mouse
@@ -1891,15 +1989,12 @@ fotoramaVersion = '4.6.4';
         }
 
         function onEnd(result) {
-            //////console.time('moveontouch.js onEnd');
             if (tail.noSwipe && result.moved) return;
 
             if (!tracked) {
                 startTracking(result.startEvent, true);
             }
 
-            ////console.log('onEnd');
-
             result.touch || MS_POINTER || $el.removeClass(grabbingClass);
 
             endTime = $.now();
@@ -1970,7 +2065,8 @@ fotoramaVersion = '4.6.4';
                 pos: moveElPos,
                 newPos: newPos,
                 overPos: overPos,
-                time: time
+                time: time,
+                dir: dir
             }));
         }
 
@@ -1982,6 +2078,7 @@ fotoramaVersion = '4.6.4';
 
         return tail;
     }
+
     function wheel($el, options) {
         var el = $el[0],
             lockFLAG,
@@ -2026,6 +2123,7 @@ fotoramaVersion = '4.6.4';
 
         return tail;
     }
+
     jQuery.Fotorama = function ($fotorama, opts) {
         $HTML = $('html');
         $BODY = $('body');
@@ -2062,6 +2160,8 @@ fotoramaVersion = '4.6.4';
             navShaftData = $navShaft.data(),
 
             $thumbBorder = $fotorama.find(cls(thumbBorderClass)),
+            $thumbArrLeft = $fotorama.find(cls(thumbArrLeft)),
+            $thumbArrRight = $fotorama.find(cls(thumbArrRight)),
 
             $fullscreenIcon = $fotorama.find(cls(fullscreenIconClass)),
             fullscreenIcon = $fullscreenIcon[0],
@@ -2129,7 +2229,11 @@ fotoramaVersion = '4.6.4';
             stageLeft = 0,
 
             fadeStack = [];
-        $wrap[STAGE_FRAME_KEY] = $('<a class="' + stageFrameClass + '" target="_blank"></a>');
+        if (Modernizr.touch) {
+            $wrap[STAGE_FRAME_KEY] = $('<a class="' + stageFrameClass + '" target="_blank"></a>');
+        } else {
+            $wrap[STAGE_FRAME_KEY] = $('<div class="' + stageFrameClass + '"></div>');
+        }
 
         $wrap[NAV_THUMB_FRAME_KEY] = $($.Fotorama.jst.thumb());
 
@@ -2171,11 +2275,34 @@ fotoramaVersion = '4.6.4';
             return o_keyboard[key] || that.fullScreen;
         }
 
+        function setStagePosition() {
+            if ($stage !== undefined) {
+
+                if (opts.navdir == 'vertical') {
+                    var padding = opts.thumbwidth + opts.thumbmargin;
+
+                    $stage.css('left', padding);
+                    $arrNext.css('right', padding);
+                    $fullscreenIcon.css('right', padding);
+                    $wrap.css('width', $wrap.css('width') + padding);
+                    $stageShaft.css('max-width', $wrap.width() - padding);
+                } else {
+                    $stage.css('left', '');
+                    $arrNext.css('right', '');
+                    $fullscreenIcon.css('right', '');
+                    $wrap.css('width', $wrap.css('width') + padding);
+                    $stageShaft.css('max-width', '');
+                }
+            }
+        }
+
         function bindGlobalEvents(FLAG) {
             var keydownCommon = 'keydown.' + _fotoramaClass,
                 localStamp = _fotoramaClass + stamp,
                 keydownLocal = 'keydown.' + localStamp,
-                resizeLocal = 'resize.' + localStamp + ' ' + 'orientationchange.' + localStamp;
+                keyupLocal = 'keyup.' + localStamp,
+                resizeLocal = 'resize.' + localStamp + ' ' + 'orientationchange.' + localStamp,
+                showParams;
 
             if (FLAG) {
                 $DOCUMENT
@@ -2191,20 +2318,37 @@ fotoramaVersion = '4.6.4';
                                 catched = true;
                                 that.cancelFullScreen();
                             } else if ((e.shiftKey && e.keyCode === 32 && allowKey('space')) || (e.keyCode === 37 && allowKey('left')) || (e.keyCode === 38 && allowKey('up'))) {
+                                that.longPress.progress();
                                 index = '<';
                             } else if ((e.keyCode === 32 && allowKey('space')) || (e.keyCode === 39 && allowKey('right')) || (e.keyCode === 40 && allowKey('down'))) {
+                                that.longPress.progress();
                                 index = '>';
                             } else if (e.keyCode === 36 && allowKey('home')) {
+                                that.longPress.progress();
                                 index = '<<';
                             } else if (e.keyCode === 35 && allowKey('end')) {
+                                that.longPress.progress();
                                 index = '>>';
                             }
                         }
 
                         (catched || index) && stopEvent(e);
-                        index && that.show({index: index, slow: e.altKey, user: true});
+                        showParams = {index: index, slow: e.altKey, user: true};
+                        index && (that.longPress.inProgress ?
+                            that.showWhileLongPress(showParams) :
+                            that.show(showParams));
                     });
 
+                if (FLAG) {
+                    $DOCUMENT
+                        .on(keyupLocal, function (e) {
+                            if (that.longPress.inProgress) {
+                                that.showEndLongPress({user:true});
+                            }
+                            that.longPress.reset();
+                        });
+                }
+
                 if (!that.index) {
                     $DOCUMENT
                         .off(keydownCommon)
@@ -2250,7 +2394,7 @@ fotoramaVersion = '4.6.4';
             data = that.data = data || clone(opts.data) || getDataFromHtml($fotorama);
             size = that.size = data.length;
 
-            !ready.ok && opts.shuffle && shuffle(data);
+            ready.ok && opts.shuffle && shuffle(data);
 
             checkForVideo();
 
@@ -2273,11 +2417,31 @@ fotoramaVersion = '4.6.4';
             opts.autoplay = Math.max(+interval || AUTOPLAY_INTERVAL, o_transitionDuration * 1.5);
         }
 
+        function updateThumbArrow(opt) {
+            if (opt.navarrows && opt.nav === 'thumbs') {
+                $thumbArrLeft.show();
+                $thumbArrRight.show();
+            } else {
+                $thumbArrLeft.hide();
+                $thumbArrRight.hide();
+            }
+
+        }
+
+        function getThumbsInSlide($el, opts) {
+            return Math.floor($wrap.width() / (opts.thumbwidth + opts.thumbmargin));
+        }
+
         /**
          * Options on the fly
          * */
         function setOptions() {
+            if (!opts.nav || opts.nav === 'dots') {
+                opts.navdir = 'horizontal'
+            }
+
             that.options = opts = optionsToLowerCase(opts);
+            thumbsPerSlide = getThumbsInSlide($wrap, opts);
 
             o_fade = (opts.transition === 'crossfade' || opts.transition === 'dissolve');
 
@@ -2288,7 +2452,7 @@ fotoramaVersion = '4.6.4';
             o_rtl = opts.direction === 'rtl';
 
             o_keyboard = $.extend({}, opts.keyboard && KEYBOARD_OPTIONS, opts.keyboard);
-
+            updateThumbArrow(opts);
             var classes = {add: [], remove: []};
 
             function addOrRemoveClass(FLAG, value) {
@@ -2300,7 +2464,7 @@ fotoramaVersion = '4.6.4';
                 o_navTop = opts.navposition === 'top';
                 classes.remove.push(selectClass);
 
-                $arrs.toggle(!!opts.arrows);
+                $arrs.toggle(opts.arrows);
             } else {
                 o_nav = false;
                 $arrs.hide();
@@ -2311,7 +2475,7 @@ fotoramaVersion = '4.6.4';
 
             arrsUpdate();
             stageWheelUpdate();
-
+            thumbArrUpdate();
             if (opts.autoplay) setAutoplayInterval(opts.autoplay);
 
             o_thumbSide = numberFromMeasure(opts.thumbwidth) || THUMB_SIZE;
@@ -2332,7 +2496,6 @@ fotoramaVersion = '4.6.4';
                 frameDraw(size, 'navThumb');
 
                 $navFrame = $navThumbFrame;
-                //
                 navFrameKey = NAV_THUMB_FRAME_KEY;
 
                 setStyle($style, $.Fotorama.jst.style({
@@ -2397,6 +2560,7 @@ fotoramaVersion = '4.6.4';
                 .removeClass(classes.remove.join(' '));
 
             lastOptions = $.extend({}, opts);
+            setStagePosition();
         }
 
         function normalizeIndex(index) {
@@ -2426,8 +2590,13 @@ fotoramaVersion = '4.6.4';
         }
 
         function setNavShaftMinMax() {
-            navShaftTouchTail.min = Math.min(0, measures.nw - $navShaft.width());
+
+            var isVerticalDir = (opts.navdir === 'vertical');
+            var param = isVerticalDir ? $navShaft.height() : $navShaft.width();
+            var mainParam = isVerticalDir ? measures.h : measures.nw;
+            navShaftTouchTail.min = Math.min(0, mainParam - param);
             navShaftTouchTail.max = 0;
+            navShaftTouchTail.direction = opts.navdir;
             $navShaft.toggleClass(grabClass, !(navShaftTouchTail.noMove = navShaftTouchTail.min === navShaftTouchTail.max));
         }
 
@@ -2530,10 +2699,10 @@ fotoramaVersion = '4.6.4';
 
                 function loaded() {
                     $.Fotorama.measures[src] = imgData.measures = $.Fotorama.measures[src] || {
-                        width: img.width,
-                        height: img.height,
-                        ratio: img.width / img.height
-                    };
+                            width: img.width,
+                            height: img.height,
+                            ratio: img.width / img.height
+                        };
 
                     setMeasures(imgData.measures.width, imgData.measures.height, imgData.measures.ratio, index);
 
@@ -2547,7 +2716,7 @@ fotoramaVersion = '4.6.4';
                     }
 
                     fit($img, (
-                        $.isFunction(specialMeasures) ? specialMeasures() : specialMeasures) || measures);
+                            $.isFunction(specialMeasures) ? specialMeasures() : specialMeasures) || measures);
 
                     $.Fotorama.cache[src] = frameData.state = 'loaded';
 
@@ -2735,10 +2904,20 @@ fotoramaVersion = '4.6.4';
         }
 
         function thumbsDraw(pos, loadFLAG) {
+            var leftLimit,
+                rightLimit,
+                exceedLimit;
+
+
             if (o_nav !== 'thumbs' || isNaN(pos)) return;
 
-            var leftLimit = -pos,
-                rightLimit = -pos + measures.nw;
+            leftLimit = -pos;
+            rightLimit = -pos + measures.nw;
+
+            if (opts.navdir === 'vertical') {
+                pos = pos - opts.thumbheight;
+                rightLimit = -pos + measures.h;
+            }
 
             $navThumbFrame.each(function () {
                 var $this = $(this),
@@ -2751,12 +2930,12 @@ fotoramaVersion = '4.6.4';
                         }
                     },
                     specialMeasures = getSpecialMeasures(),
-                    dataFrame = data[eq] || {};
-
+                    exceedLimit = opts.navdir === 'vertical' ?
+                    thisData.t > rightLimit : thisData.l > rightLimit;
                 specialMeasures.w = thisData.w;
 
                 if (thisData.l + thisData.w < leftLimit
-                    || thisData.l > rightLimit
+                    || exceedLimit
                     || callFit(thisData.$img, specialMeasures)) return;
 
                 loadFLAG && loadImg([eq], 'navThumb', getSpecialMeasures);
@@ -2767,7 +2946,8 @@ fotoramaVersion = '4.6.4';
             if (!frameAppend[type]) {
 
                 var thumbsFLAG = type === 'nav' && o_navThumbs,
-                    left = 0;
+                    left = 0,
+                    top = 0;
 
                 $shaft.append(
                     $frames
@@ -2798,13 +2978,16 @@ fotoramaVersion = '4.6.4';
 
                             var $this = $(this),
                                 frameData = $this.data(),
-                                thumbwidth = Math.round(o_thumbSide2 * frameData.data.thumbratio) || o_thumbSide;
-
+                                thumbwidth = Math.round(o_thumbSide2 * frameData.data.thumbratio) || o_thumbSide,
+                                thumbheight = Math.round(o_thumbSide / frameData.data.thumbratio) || o_thumbSide2;
+                            frameData.t = top;
+                            frameData.h = thumbheight;
                             frameData.l = left;
                             frameData.w = thumbwidth;
 
                             $this.css({width: thumbwidth});
 
+                            top += thumbheight + opts.thumbmargin;
                             left += thumbwidth + opts.thumbmargin;
                         })
                 );
@@ -2832,6 +3015,26 @@ fotoramaVersion = '4.6.4';
                 .attr(disableAttr(disableNext));
         }
 
+        function thumbArrUpdate() {
+            var isLeftDisable = false,
+                isRightDisable = false;
+            if (opts.navtype === 'thumbs' && !opts.loop) {
+                (activeIndex == 0) ? isLeftDisable = true : isLeftDisable = false;
+                (activeIndex == opts.data.length - 1) ? isRightDisable = true : isRightDisable = false;
+            }
+            if (opts.navtype === 'slides') {
+                var pos = readPosition($navShaft, opts.navdir);
+                pos >= navShaftTouchTail.max ? isLeftDisable = true : isLeftDisable = false;
+                pos <= navShaftTouchTail.min ? isRightDisable = true : isRightDisable = false;
+            }
+            $thumbArrLeft
+                .toggleClass(arrDisabledClass, isLeftDisable)
+                .attr(disableAttr(isLeftDisable));
+            $thumbArrRight
+                .toggleClass(arrDisabledClass, isRightDisable)
+                .attr(disableAttr(isRightDisable));
+        }
+
         function stageWheelUpdate() {
             if (stageWheelTail.ok) {
                 stageWheelTail.prevent = {'<': disableDirrection(0), '>': disableDirrection(1)};
@@ -2841,51 +3044,97 @@ fotoramaVersion = '4.6.4';
         function getNavFrameBounds($navFrame) {
             var navFrameData = $navFrame.data(),
                 left,
-                width;
+                top,
+                width,
+                height;
 
             if (o_navThumbs) {
                 left = navFrameData.l;
+                top = navFrameData.t;
                 width = navFrameData.w;
+                height = navFrameData.h;
             } else {
                 left = $navFrame.position().left;
                 width = $navFrame.width();
             }
 
-            return {
+            var horizontalBounds = {
                 c: left + width / 2,
                 min: -left + opts.thumbmargin * 10,
                 max: -left + measures.w - width - opts.thumbmargin * 10
             };
+
+            var verticalBounds = {
+                c: top + height / 2,
+                min: -top + opts.thumbmargin * 10,
+                max: -top + measures.h - height - opts.thumbmargin * 10
+            };
+
+            return opts.navdir === 'vertical' ? verticalBounds : horizontalBounds;
         }
 
         function slideThumbBorder(time) {
             var navFrameData = activeFrame[navFrameKey].data();
             slide($thumbBorder, {
                 time: time * 1.2,
-                pos: navFrameData.l,
-                width: navFrameData.w
+                pos: (opts.navdir === 'vertical' ? navFrameData.t : navFrameData.l),
+                width: navFrameData.w,
+                height: navFrameData.h,
+                direction: opts.navdir
             });
         }
 
         function slideNavShaft(options) {
-            var $guessNavFrame = data[options.guessIndex][navFrameKey];
+            var $guessNavFrame = data[options.guessIndex][navFrameKey],
+                typeOfAnimation = opts.navtype;
+
+            var overflowFLAG,
+                time,
+                minMax,
+                boundTop,
+                boundLeft,
+                l,
+                pos,
+                x;
+
             if ($guessNavFrame) {
-                var overflowFLAG = navShaftTouchTail.min !== navShaftTouchTail.max,
-                    minMax = options.minMax || overflowFLAG && getNavFrameBounds(activeFrame[navFrameKey]),
-                    l = overflowFLAG && (options.keep && slideNavShaft.l ? slideNavShaft.l : minMaxLimit((options.coo || measures.nw / 2) - getNavFrameBounds($guessNavFrame).c, minMax.min, minMax.max)),
-                    pos = overflowFLAG && minMaxLimit(l, navShaftTouchTail.min, navShaftTouchTail.max),
+                if (typeOfAnimation === 'thumbs') {
+                    overflowFLAG = navShaftTouchTail.min !== navShaftTouchTail.max;
+                    minMax = options.minMax || overflowFLAG && getNavFrameBounds(activeFrame[navFrameKey]);
+                    boundTop = overflowFLAG && (options.keep && slideNavShaft.t ? slideNavShaft.l : minMaxLimit((options.coo || measures.nw / 2) - getNavFrameBounds($guessNavFrame).c, minMax.min, minMax.max));
+                    boundLeft = overflowFLAG && (options.keep && slideNavShaft.l ? slideNavShaft.l : minMaxLimit((options.coo || measures.nw / 2) - getNavFrameBounds($guessNavFrame).c, minMax.min, minMax.max));
+                    l = (opts.navdir === 'vertical' ? boundTop : boundLeft);
+                    pos = overflowFLAG && minMaxLimit(l, navShaftTouchTail.min, navShaftTouchTail.max) || 0;
                     time = options.time * 1.1;
+                    slide($navShaft, {
+                        time: time,
+                        pos: pos,
+                        direction: opts.navdir,
+                        onEnd: function () {
+                            thumbsDraw(pos, true);
+                            thumbArrUpdate();
+                        }
+                    });
 
-                slide($navShaft, {
-                    time: time,
-                    pos: pos || 0,
-                    onEnd: function () {
-                        thumbsDraw(pos, true);
-                    }
-                });
+                    setShadow($nav, findShadowEdge(pos, navShaftTouchTail.min, navShaftTouchTail.max, opts.navdir));
+                    slideNavShaft.l = l;
+                } else {
+                    x = readPosition($navShaft, opts.navdir);
+                    time = options.time * 1.11;
+
+                    pos = validateSlidePos(opts, navShaftTouchTail, options.guessIndex, x, $guessNavFrame, $navWrap, opts.navdir);
 
-                setShadow($nav, findShadowEdge(pos, navShaftTouchTail.min, navShaftTouchTail.max));
-                slideNavShaft.l = l;
+                    slide($navShaft, {
+                        time: time,
+                        pos: pos,
+                        direction: opts.navdir,
+                        onEnd: function () {
+                            thumbsDraw(pos, true);
+                            thumbArrUpdate();
+                        }
+                    });
+                    setShadow($nav, findShadowEdge(pos, navShaftTouchTail.min, navShaftTouchTail.max, opts.navdir));
+                }
             }
         }
 
@@ -2929,13 +3178,19 @@ fotoramaVersion = '4.6.4';
                     $frame.attr('aria-hidden', 'false');
                 }
 
-                skipOnEnd || that.show.onEnd(true);
+                skipOnEnd || that.showStage.onEnd(true);
                 stop($stageShaft, 0, true);
 
                 detachFrames(STAGE_FRAME_KEY);
                 stageFramePosition(activeIndexes);
                 setStageShaftMinmaxAndSnap();
                 setNavShaftMinMax();
+                addEnterUp($stageShaft[0], function () {
+                    if (!$fotorama.hasClass(fullscreenClass)) {
+                        that.requestFullScreen();
+                        $(fullscreenIcon).trigger('focus');
+                    }
+                });
             }
         }
 
@@ -3050,7 +3305,70 @@ fotoramaVersion = '4.6.4';
             return this;
         };
 
-        that.show = function (options) {
+        that.showSlide = function (slideDir) {
+            var currentPosition = readPosition($navShaft, opts.navdir),
+                pos,
+                time = 500 * 1.1,
+                size = opts.navdir === 'horizontal' ? opts.thumbwidth : opts.thumbheight,
+                onEnd = function () {
+                    thumbArrUpdate();
+                };
+            if (slideDir === 'next') {
+                pos = currentPosition - (size + opts.margin) * thumbsPerSlide;
+            }
+            if (slideDir === 'prev') {
+                pos = currentPosition + (size + opts.margin) * thumbsPerSlide;
+            }
+            pos = validateRestrictions(pos, navShaftTouchTail);
+            thumbsDraw(pos, true);
+            slide($navShaft, {
+                time: time,
+                pos: pos,
+                direction: opts.navdir,
+                onEnd: onEnd
+            });
+        };
+
+        that.showWhileLongPress = function (options) {
+            if (that.longPress.singlePressInProgress)
+            {
+                return;
+            }
+
+            var index = calcActiveIndex(options);
+            calcGlobalIndexes(index);
+            var time = calcTime(options)/50;
+            var _activeFrame = activeFrame;
+            that.activeFrame = activeFrame = data[activeIndex];
+            var silent = _activeFrame === activeFrame && !options.user;
+
+            that.showNav(silent, options, time);
+
+            return this;
+        };
+
+        that.showEndLongPress = function (options) {
+            if (that.longPress.singlePressInProgress)
+            {
+                return;
+            }
+
+            var index = calcActiveIndex(options);
+            calcGlobalIndexes(index);
+            var time = calcTime(options)/50;
+            var _activeFrame = activeFrame;
+            that.activeFrame = activeFrame = data[activeIndex];
+
+            var silent = _activeFrame === activeFrame && !options.user;
+
+            that.showStage(silent, options, time);
+
+            showedFLAG = typeof lastActiveIndex !== 'undefined' && lastActiveIndex !== activeIndex;
+            lastActiveIndex = activeIndex;
+            return this;
+        };
+
+        function calcActiveIndex (options) {
             var index;
 
             if (typeof options !== 'object') {
@@ -3064,6 +3382,10 @@ fotoramaVersion = '4.6.4';
             index = isNaN(index) ? undefined : index;
             index = typeof index === 'undefined' ? activeIndex || 0 : index;
 
+            return index;
+        }
+
+        function calcGlobalIndexes (index) {
             that.activeIndex = activeIndex = edgeIndex(index);
             prevIndex = getPrevIndex(activeIndex);
             nextIndex = getNextIndex(activeIndex);
@@ -3071,20 +3393,22 @@ fotoramaVersion = '4.6.4';
             activeIndexes = [activeIndex, prevIndex, nextIndex];
 
             dirtyIndex = o_loop ? index : activeIndex;
+        }
 
+        function calcTime (options) {
             var diffIndex = Math.abs(lastActiveIndex - dirtyIndex),
                 time = getNumber(options.time, function () {
                     return Math.min(o_transitionDuration * (1 + (diffIndex - 1) / 12), o_transitionDuration * 2);
-                }),
-                overPos = options.overPos;
-
-            if (options.slow) time *= 10;
+                });
 
-            var _activeFrame = activeFrame;
-            that.activeFrame = activeFrame = data[activeIndex];
+            if (options.slow) {
+                time *= 10;
+            }
 
-            var silent = _activeFrame === activeFrame && !options.user;
+            return time;
+        }
 
+        that.showStage = function (silent, options, time) {
             unloadVideo($videoPlaying, activeFrame.i !== data[normalizeIndex(repositionIndex)].i);
             frameDraw(activeIndexes, 'stage');
             stageFramePosition(SLOW ? [dirtyIndex] : [dirtyIndex, getPrevIndex(dirtyIndex), getNextIndex(dirtyIndex)]);
@@ -3097,7 +3421,8 @@ fotoramaVersion = '4.6.4';
 
             pausedAutoplayFLAG = true;
 
-            var onEnd = that.show.onEnd = function (skipReposition) {
+            var overPos = options.overPos;
+            var onEnd = that.showStage.onEnd = function (skipReposition) {
                 if (onEnd.ok) return;
                 onEnd.ok = true;
 
@@ -3131,12 +3456,11 @@ fotoramaVersion = '4.6.4';
                     pos: -getPosByIndex(dirtyIndex, measures.w, opts.margin, repositionIndex),
                     overPos: overPos,
                     time: time,
-                    onEnd: onEnd/*,
-                     _001: true*/
+                    onEnd: onEnd
                 });
             } else {
                 var $activeFrame = activeFrame[STAGE_FRAME_KEY],
-                    $prevActiveFrame = activeIndex !== lastActiveIndex ? data[lastActiveIndex][STAGE_FRAME_KEY] : null;
+                    $prevActiveFrame = data[lastActiveIndex] && activeIndex !== lastActiveIndex ? data[lastActiveIndex][STAGE_FRAME_KEY] : null;
 
                 fade($activeFrame, $prevActiveFrame, $stageFrame, {
                     time: time,
@@ -3146,7 +3470,10 @@ fotoramaVersion = '4.6.4';
             }
 
             arrsUpdate();
+        };
 
+        that.showNav = function(silent, options, time){
+            thumbArrUpdate();
             if (o_nav) {
                 navUpdate();
 
@@ -3157,12 +3484,27 @@ fotoramaVersion = '4.6.4';
                     guessIndex: typeof options.coo !== 'undefined' ? guessIndex : activeIndex,
                     keep: silent
                 });
-
                 if (o_navThumbs) slideThumbBorder(time);
             }
+        };
+
+        that.show = function (options) {
+            that.longPress.singlePressInProgress = true;
+
+            var index = calcActiveIndex(options);
+            calcGlobalIndexes(index);
+            var time = calcTime(options);
+            var _activeFrame = activeFrame;
+            that.activeFrame = activeFrame = data[activeIndex];
+
+            var silent = _activeFrame === activeFrame && !options.user;
+
+            that.showStage(silent, options, time);
+            that.showNav(silent, options, time);
 
             showedFLAG = typeof lastActiveIndex !== 'undefined' && lastActiveIndex !== activeIndex;
             lastActiveIndex = activeIndex;
+            that.longPress.singlePressInProgress = false;
 
             return this;
         };
@@ -3258,11 +3600,12 @@ fotoramaVersion = '4.6.4';
             var time = arguments[1] || 0,
                 setFLAG = arguments[2];
 
+            thumbsPerSlide = getThumbsInSlide($wrap, opts);
             extendMeasures(!that.fullScreen ? optionsToLowerCase(options) : {
-                width: '100%',
+                width: $(window).width(),
                 maxwidth: null,
                 minwidth: null,
-                height: '100%',
+                height: $(window).height(),
                 maxheight: null,
                 minheight: null
             }, [measures, setFLAG || that.fullScreen || opts]);
@@ -3273,13 +3616,15 @@ fotoramaVersion = '4.6.4';
                 windowHeight = $WINDOW.height() - (o_nav ? $nav.height() : 0);
 
             if (measureIsValid(width)) {
+                $wrap.css({width: ''});
+                $wrap.css({height: ''});
                 $stage.css({width: ''});
                 $stage.css({height: ''});
+                $stage.css({'line-height': ''});
                 $stageShaft.css({width: ''});
                 $stageShaft.css({height: ''});
                 $nav.css({width: ''});
                 $nav.css({height: ''});
-                $stage.css({'line-height': ''});
                 $wrap.css({minWidth: measures.minwidth || 0, maxWidth: measures.maxwidth || MAX_WIDTH});
 
                 width = measures.W = measures.w = $wrap.width();
@@ -3294,27 +3639,63 @@ fotoramaVersion = '4.6.4';
                 if (height) {
                     width = Math.round(width);
                     height = measures.h = Math.round(minMaxLimit(height, numberFromWhatever(measures.minheight, windowHeight), numberFromWhatever(measures.maxheight, windowHeight)));
-
                     $stage.css({'width': width, 'height': height, 'line-height': height + 'px'});
 
-                    stageShaftReposition();
+                    if (opts.navdir === 'vertical' && !that.fullscreen) {
+                        $nav.width(opts.thumbwidth + opts.thumbmargin * 2);
+                    }
+
+                    if (opts.navdir === 'horizontal' && !that.fullscreen) {
+                        $nav.height(opts.thumbheight + opts.thumbmargin * 2);
+                    }
+
+                    if (opts.navdir === 'vertical' && that.fullScreen) {
+                        $stage.css('height', $(window).height());
+                    }
+
+                    if (opts.navdir === 'horizontal' && that.fullScreen) {
+                        $stage.css('height', $(window).height() - (opts.thumbheight + opts.thumbmargin * 2));
+                    }
 
                     if (o_nav) {
-                        $nav
-                            .stop()
-                            .animate({width: measures.nw}, time);
+                        switch (opts.navdir) {
+                            case 'vertical':
+                                $navWrap.removeClass(navShafthorizontalClass);
+                                $navWrap.removeClass(navShaftListClass);
+                                $navWrap.addClass(navShaftVerticalClass);
+                                $nav
+                                    .stop()
+                                    .animate({height: measures.h, width: opts.thumbwidth}, time);
+                                break;
+                            case 'list':
+                                $navWrap.removeClass(navShaftVerticalClass);
+                                $navWrap.removeClass(navShafthorizontalClass);
+                                $navWrap.addClass(navShaftListClass);
+                                break;
+                            default:
+                                $navWrap.removeClass(navShaftVerticalClass);
+                                $navWrap.removeClass(navShaftListClass);
+                                $navWrap.addClass(navShafthorizontalClass);
+                                $nav
+                                    .stop()
+                                    .animate({width: measures.nw}, time);
+                                break;
+                        }
 
+                        stageShaftReposition();
                         slideNavShaft({guessIndex: activeIndex, time: time, keep: true});
                         if (o_navThumbs && frameAppend.nav) slideThumbBorder(time);
                     }
 
                     measuresSetFLAG = setFLAG || true;
 
+                    ready.ok = true;
                     ready();
                 }
             }
 
             stageLeft = $stage.offset().left;
+            setStagePosition();
 
             return this;
         };
@@ -3333,10 +3714,33 @@ fotoramaVersion = '4.6.4';
         function setShadow($el, edge) {
             if (o_shadows) {
                 $el.removeClass(shadowsLeftClass + ' ' + shadowsRightClass);
+                $el.removeClass(shadowsTopClass + ' ' + shadowsBottomClass);
                 edge && !$videoPlaying && $el.addClass(edge.replace(/^|\s/g, ' ' + shadowsClass + '--'));
             }
         }
 
+        that.longPress = {
+            threshold: 1,
+            count: 0,
+            thumbSlideTime: 20,
+            progress: function(){
+                if (!this.inProgress) {
+                    this.count++;
+                    this.inProgress = this.count > this.threshold;
+                    }
+            },
+            end: function(){
+                if(this.inProgress) {
+                    this.isEnded = true
+                }
+            },
+            reset: function(){
+                this.count = 0;
+                this.inProgress = false;
+                this.isEnded = false;
+            }
+        };
+
         that.destroy = function () {
             that.cancelFullScreen();
             that.stopAutoplay();
@@ -3466,7 +3870,11 @@ fotoramaVersion = '4.6.4';
                     toggleControlsClass();
                 } else if (opts.click) {
 
-                    clickToShow({index: e.shiftKey || getDirectionSign(getDirection(e._x)), slow: e.altKey, user: true});
+                    clickToShow({
+                        index: e.shiftKey || getDirectionSign(getDirection(e._x)),
+                        slow: e.altKey,
+                        user: true
+                    });
                 }
             }
         }
@@ -3503,7 +3911,9 @@ fotoramaVersion = '4.6.4';
             timeHigh: 1,
             friction: 2,
             select: '.' + selectClass + ', .' + selectClass + ' *',
-            $wrap: $stage
+            $wrap: $stage,
+            direction: 'horizontal'
+
         });
 
         navShaftTouchTail = moveOnTouch($navShaft, {
@@ -3519,6 +3929,7 @@ fotoramaVersion = '4.6.4';
                     releaseAutoplay();
                     changeAutoplay();
                     thumbsDraw(result.newPos, true);
+                    thumbArrUpdate();
                 }
 
                 if (!result.moved) {
@@ -3530,10 +3941,11 @@ fotoramaVersion = '4.6.4';
                         time: result.time,
                         pos: result.newPos,
                         overPos: result.overPos,
+                        direction: opts.navdir,
                         onEnd: onEnd
                     });
                     thumbsDraw(result.newPos);
-                    o_shadows && setShadow($nav, findShadowEdge(result.newPos, navShaftTouchTail.min, navShaftTouchTail.max));
+                    o_shadows && setShadow($nav, findShadowEdge(result.newPos, navShaftTouchTail.min, navShaftTouchTail.max, result.dir));
                 } else {
                     onEnd();
                 }
@@ -3541,7 +3953,8 @@ fotoramaVersion = '4.6.4';
             timeLow: .5,
             timeHigh: 2,
             friction: 5,
-            $wrap: $nav
+            $wrap: $nav,
+            direction: opts.navdir
         });
 
         stageWheelTail = wheel($stage, {
@@ -3558,8 +3971,8 @@ fotoramaVersion = '4.6.4';
                 onTouchStart();
                 onTouchEnd();
                 var newPos = stop($navShaft) + direction * .25;
-                $navShaft.css(getTranslate(minMaxLimit(newPos, navShaftTouchTail.min, navShaftTouchTail.max)));
-                o_shadows && setShadow($nav, findShadowEdge(newPos, navShaftTouchTail.min, navShaftTouchTail.max));
+                $navShaft.css(getTranslate(minMaxLimit(newPos, navShaftTouchTail.min, navShaftTouchTail.max), opts.navdir));
+                o_shadows && setShadow($nav, findShadowEdge(newPos, navShaftTouchTail.min, navShaftTouchTail.max, opts.navdir));
                 navWheelTail.prevent = {'<': newPos >= navShaftTouchTail.max, '>': newPos <= navShaftTouchTail.min};
                 clearTimeout(navWheelTail.t);
                 navWheelTail.t = setTimeout(function () {
@@ -3578,7 +3991,6 @@ fotoramaVersion = '4.6.4';
                 }, 0);
             },
             function () {
-                //console.log("click");
                 if (!hoverFLAG) return;
                 toggleControlsClass(!(hoverFLAG = false));
             }
@@ -3586,7 +3998,12 @@ fotoramaVersion = '4.6.4';
 
         function onNavFrameClick(e) {
             var index = $(this).data().eq;
-            clickToShow({index: index, slow: e.altKey, user: true, coo: e._x - $nav.offset().left});
+
+            if (opts.navtype === 'thumbs') {
+                clickToShow({index: index, slow: e.altKey, user: true, coo: e._x - $nav.offset().left});
+            } else {
+                clickToShow({index: index, slow: e.altKey, user: true});
+            }
         }
 
         function onArrClick(e) {
@@ -3604,6 +4021,27 @@ fotoramaVersion = '4.6.4';
             onTouchEnd: onTouchEnd
         });
 
+        smartClick($thumbArrLeft, function (e) {
+            stopEvent(e);
+            if (opts.navtype === 'thumbs') {
+
+                that.show('<');
+            } else {
+                that.showSlide('prev')
+            }
+        });
+
+        smartClick($thumbArrRight, function (e) {
+            stopEvent(e);
+            if (opts.navtype === 'thumbs') {
+                that.show('>');
+            } else {
+                that.showSlide('next')
+            }
+
+        });
+
+
         function addFocusOnControls(el) {
             addFocus(el, function () {
                 setTimeout(function () {
@@ -3620,7 +4058,10 @@ fotoramaVersion = '4.6.4';
             addFocusOnControls(this);
         });
 
-        addEnterUp(fullscreenIcon, that.toggleFullScreen);
+        addEnterUp(fullscreenIcon, function () {
+            that.toggleFullScreen();
+            $(fullscreenIcon).trigger('focus');
+        });
         addFocusOnControls(fullscreenIcon);
 
         function reset() {
@@ -3679,16 +4120,14 @@ fotoramaVersion = '4.6.4';
         });
 
         function ready() {
-            if (!ready.ok) {
-                ready.ok = true;
+            if (ready.ok) {
+                ready.ok = false;
                 triggerEvent('ready');
             }
         }
 
         reset();
     };
-
-
     $.fn.fotorama = function (opts) {
         return this.each(function () {
             var that = this,
@@ -3733,49 +4172,50 @@ fotoramaVersion = '4.6.4';
         $.Fotorama.instances.splice(instance.index, 1);
         calculateIndexes();
     }
+
     $.Fotorama.cache = {};
     $.Fotorama.measures = {};
     $ = $ || {};
     $.Fotorama = $.Fotorama || {};
     $.Fotorama.jst = $.Fotorama.jst || {};
 
-    $.Fotorama.jst.dots = function(v) {
+    $.Fotorama.jst.dots = function (v) {
         var __t, __p = '', __e = _.escape;
-        __p += '<div class="fotorama__nav__frame fotorama__nav__frame--dot" tabindex="0" role="button" data-gallery-role="nav-frame" data-nav-type="dot" aria-label>\r\n    <div class="fotorama__dot"></div>\r\n</div>';
+        __p += '<div class="fotorama__nav__frame fotorama__nav__frame--dot" tabindex="0" role="button" data-gallery-role="nav-frame" data-nav-type="thumb" aria-label>\r\n    <div class="fotorama__dot"></div>\r\n</div>';
         return __p
     };
 
-    $.Fotorama.jst.frameCaption = function(v) {
+    $.Fotorama.jst.frameCaption = function (v) {
         var __t, __p = '', __e = _.escape;
         __p += '<div class="fotorama__caption" aria-hidden="true">\r\n    <div class="fotorama__caption__wrap" id="' +
-        ((__t = ( v.labelledby )) == null ? '' : __t) +
-        '">' +
-        ((__t = ( v.caption )) == null ? '' : __t) +
-        '</div>\r\n</div>\r\n';
+            ((__t = ( v.labelledby )) == null ? '' : __t) +
+            '">' +
+            ((__t = ( v.caption )) == null ? '' : __t) +
+            '</div>\r\n</div>\r\n';
         return __p
     };
 
-    $.Fotorama.jst.style = function(v) {
+    $.Fotorama.jst.style = function (v) {
         var __t, __p = '', __e = _.escape;
         __p += '.fotorama' +
-        ((__t = ( v.s )) == null ? '' : __t) +
-        ' .fotorama__nav--thumbs .fotorama__nav__frame{\r\npadding:' +
-        ((__t = ( v.m )) == null ? '' : __t) +
-        'px;\r\nheight:' +
-        ((__t = ( v.h )) == null ? '' : __t) +
-        'px}\r\n.fotorama' +
-        ((__t = ( v.s )) == null ? '' : __t) +
-        ' .fotorama__thumb-border{\r\nheight:' +
-        ((__t = ( v.h )) == null ? '' : __t) +
-        'px;\r\nborder-width:' +
-        ((__t = ( v.b )) == null ? '' : __t) +
-        'px;\r\nmargin-top:' +
-        ((__t = ( v.m )) == null ? '' : __t) +
-        'px}';
+            ((__t = ( v.s )) == null ? '' : __t) +
+            ' .fotorama__nav--thumbs .fotorama__nav__frame{\r\npadding:' +
+            ((__t = ( v.m )) == null ? '' : __t) +
+            'px;\r\nheight:' +
+            ((__t = ( v.h )) == null ? '' : __t) +
+            'px}\r\n.fotorama' +
+            ((__t = ( v.s )) == null ? '' : __t) +
+            ' .fotorama__thumb-border{\r\nheight:' +
+            ((__t = ( v.h )) == null ? '' : __t) +
+            'px;\r\nborder-width:' +
+            ((__t = ( v.b )) == null ? '' : __t) +
+            'px;\r\nmargin-top:' +
+            ((__t = ( v.m )) == null ? '' : __t) +
+            'px}';
         return __p
     };
 
-    $.Fotorama.jst.thumb = function(v) {
+    $.Fotorama.jst.thumb = function (v) {
         var __t, __p = '', __e = _.escape;
         __p += '<div class="fotorama__nav__frame fotorama__nav__frame--thumb" tabindex="0" role="button" data-gallery-role="nav-frame" data-nav-type="thumb" aria-label>\r\n    <div class="fotorama__thumb">\r\n    </div>\r\n</div>';
         return __p
diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html
index 6a9a3cfbe3c3c..34d26c812dae4 100644
--- a/lib/web/mage/gallery/gallery.html
+++ b/lib/web/mage/gallery/gallery.html
@@ -4,28 +4,38 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="fotorama-item" data-gallery-role="gallery">
+<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__arr fotorama__arr--prev" tabindex="0" role="button" aria-label="Previos">
-                <div class="fotorama__arr__arr"></div>
+                <div class="fotorama__arr__arr" data-gallery-role="arrow"></div>
             </div>
             <div class="fotorama__stage__shaft" tabindex="0" data-gallery-role="stage-shaft">
             </div>
             <div class="fotorama__arr fotorama__arr--next fotorama__arr--disabled" tabindex="-1" role="button"
                  aria-label="Next">
-                <div class="fotorama__arr__arr"></div>
+                <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>
         <div class="fotorama__nav-wrap" data-gallery-role="nav-wrap">
             <div class="fotorama__nav fotorama__nav--thumbs">
-                <div class="fotorama__fullscreen-icon" tabindex="0" role="button"></div>
+                <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__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" data-gallery-role="arrow"></div>
+                </div>
             </div>
         </div>
     </div>
+    <div data-gallery-role="fotorama__focusable-end" tabindex="0"></div>
 </div>
-<div class="magnifier-preview" id="preview" data-gallery-role="magnifier"></div>
+<div class="magnifier-preview" data-gallery-role="magnifier" id="preview"></div>
diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js
index 9f81daba85bcc..2f38ea505aa10 100644
--- a/lib/web/mage/gallery/gallery.js
+++ b/lib/web/mage/gallery/gallery.js
@@ -7,11 +7,37 @@ define([
     'fotorama/fotorama',
     'underscore',
     'matchMedia',
+    'mage/template',
     'text!mage/gallery/gallery.html',
-    'Magento_Ui/js/lib/class'
-], function ($, fotorama, _, mediaCheck, template, Class) {
+    'Magento_Ui/js/lib/class',
+    'mage/translate'
+], function ($, fotorama, _, mediaCheck, template, galleryTpl, Class, $t) {
     'use strict';
 
+    /**
+     * Set main item first in order.
+     * @param {Array.<Object>} data - Set of gallery items to update.
+     */
+    var pushMainFirst = function(data){
+        var mainIndex;
+
+        if(!_.every(data, function(item){
+                return _.isObject(item);
+            }))
+        {
+            return data;
+        }
+
+        mainIndex = _.findIndex(data, function(item){
+            return item.isMain;
+        });
+        if(mainIndex > -1){
+            data.unshift(data.splice(mainIndex, 1)[0]);
+        }
+
+        return data;
+    };
+
     return Class.extend({
 
         defaults: {
@@ -36,6 +62,11 @@ define([
         initialize: function (config, element) {
             this._super();
 
+            _.bindAll(this,
+                '_focusSwitcher'
+            );
+
+            config.options.swipe = true;
             this.config = config;
 
             this.settings = {
@@ -47,12 +78,11 @@ define([
                 activeBreakpoint: {},
                 fotoramaApi: null,
                 isFullscreen: false,
-                api: null
+                api: null,
+                data: _.clone(pushMainFirst(config.data))
             };
-
             config.options.ratio = config.options.width / config.options.height;
             config.options.height = null;
-            config.options.allowfullscreen = false;
 
             $.extend(true, this.startConfig, config);
 
@@ -60,14 +90,35 @@ define([
             this.initApi();
             this.setupBreakpoints();
             this.initFullscreenSettings();
+            this.settings.$element.on('click', '.fotorama__stage__frame', function () {
+                $('[data-gallery-role="gallery"]').data('fotorama').requestFullScreen();
+                $('[data-gallery-role="fotorama__fullscreen-icon"]').css({
+                    opacity: 1,
+                    visibility: 'visible',
+                    display: 'block'
+                });
+            });
         },
 
         /**
          * Gallery fullscreen settings.
          */
         initFullscreenSettings: function () {
-            var settings = this.settings;
-            settings.$element.on('fotorama:fullscreenenter', function () {
+            var settings = this.settings,
+                self = this,
+                items = [];
+
+            settings.$gallery = this.settings.$element.find('[data-gallery-role="gallery"]');
+            settings.$fullscreenIcon = this.settings.$element.find('[data-gallery-role="fotorama__fullscreen-icon"]');
+            settings.focusableStart = this.settings.$element.find('[data-gallery-role="fotorama__focusable-start"]');
+            settings.focusableEnd = this.settings.$element.find('[data-gallery-role="fotorama__focusable-end"]');
+            settings.closeIcon = this.settings.$element.find('[data-gallery-role="fotorama__fullscreen-icon"]');
+            settings.fullscreenConfig.swipe = true;
+
+            settings.$gallery.on('fotorama:fullscreenenter', function () {
+                settings.$gallery.focus();
+                settings.focusableStart.bind('focusin', self._focusSwitcher);
+                settings.focusableEnd.bind('focusin', self._focusSwitcher);
                 settings.api.updateOptions(settings.defaultConfig.options, true);
                 settings.api.updateOptions(settings.fullscreenConfig, true);
 
@@ -77,16 +128,60 @@ define([
                 settings.isFullscreen = true;
             });
 
-            settings.$element.on('fotorama:fullscreenexit', function () {
+            settings.$gallery.on('fotorama:fullscreenexit', function () {
                 settings.api.updateOptions(settings.defaultConfig.options, true);
+                settings.focusableStart.unbind('focusin', this._focusSwitcher);
+                settings.focusableEnd.unbind('focusin', this._focusSwitcher);
 
                 if (!_.isEqual(settings.activeBreakpoint, {})) {
                     settings.api.updateOptions(settings.activeBreakpoint.options, true);
                 }
                 settings.isFullscreen = false;
+                settings.$fullscreenIcon.hide();
             });
         },
 
+        /**
+         * Switcher focus.
+         */
+        _focusSwitcher: function (e) {
+            var target = $(e.target),
+                settings = this.settings;
+
+            if (target.is(settings.focusableStart)) {
+                this._setFocus('start');
+            } else if (target.is(settings.focusableEnd)) {
+                this._setFocus('end');
+            }
+        },
+
+        /**
+         * Set focus to element.
+         * @param {String} position - can be "start" and "end"
+         *      positions.
+         *      If position is "end" - sets focus to first
+         *      focusable element in modal window scope.
+         *      If position is "start" - sets focus to last
+         *      focusable element in modal window scope
+         *
+         *  @param {String} type - can be "opened" or false
+         *      If type is "opened" - looks to "this.options.focus"
+         *      property and sets focus
+         */
+        _setFocus: function (position) {
+            var settings = this.settings,
+                focusableElements,
+                infelicity;
+
+            if (position === 'end') {
+                settings.$gallery.find(settings.closeIcon).focus();
+            } else if (position === 'start') {
+                infelicity = 2; //Constant for find last focusable element
+                focusableElements = settings.$gallery.find(':focusable');
+                focusableElements.eq(focusableElements.length - infelicity).focus();
+            }
+        },
+
         /**
          * Initializes gallery with configuration options.
          */
@@ -94,14 +189,17 @@ define([
             var breakpoints = {},
                 settings = this.settings,
                 config = this.config,
-                mainImage;
+                tpl = template(galleryTpl, {
+                    next: $t('Next'),
+                    previous: $t('Previous')
+                });
 
             if (settings.breakpoints) {
                 _.each(_.values(settings.breakpoints), function (breakpoint) {
                     var conditions;
                     _.each(_.pairs(breakpoint.conditions), function (pair) {
                         conditions = conditions ? conditions + ' and (' + pair[0] + ': ' + pair[1] + ')' :
-                            '(' + pair[0] + ': ' + pair[1] + ')';
+                        '(' + pair[0] + ': ' + pair[1] + ')';
                     });
                     breakpoints[conditions] = breakpoint.options;
                 });
@@ -115,21 +213,14 @@ define([
                 config.arrows = false;
             }
 
-            /**
-             * Returns index of main image.
-             */
-            mainImage = _.findIndex(config.data, function (obj) {
-                return obj.isMain === true;
-            });
-
             config.click = false;
             config.breakpoints = null;
-            config.startindex = mainImage;
             settings.currentConfig = config;
-            settings.$element.html(template);
-            settings.$element = $(settings.$element.children()[0]);
-            settings.$element.fotorama(config);
-            settings.fotoramaApi = settings.$element.data('fotorama');
+            settings.$element.html(tpl);
+            settings.$element.removeClass('_block-content-loading');
+            settings.$elementF = $(settings.$element.children()[0]);
+            settings.$elementF.fotorama(config);
+            settings.fotoramaApi = settings.$elementF.data('fotorama');
             $.extend(true, config, this.startConfig);
         },
 
@@ -153,7 +244,6 @@ define([
                          * Is triggered when breakpoint enties.
                          */
                         entry: function () {
-                            triggeredBreakpoints++;
                             $.extend(true, config, _.clone(startConfig));
 
                             settings.api.updateOptions(settings.defaultConfig.options, true);
@@ -170,16 +260,13 @@ define([
                          * Is triggered when breakpoint exits.
                          */
                         exit: function () {
-                            if (triggeredBreakpoints < 1) {
-                                $.extend(true, config, _.clone(startConfig));
-                                settings.api.updateOptions(settings.defaultConfig.options, true);
-
-                                if (settings.isFullscreen) {
-                                    settings.api.updateOptions(settings.fullscreenConfig, true);
-                                }
-                                settings.activeBreakpoint = {};
+                            $.extend(true, config, _.clone(startConfig));
+                            settings.api.updateOptions(settings.defaultConfig.options, true);
+
+                            if (settings.isFullscreen) {
+                                settings.api.updateOptions(settings.fullscreenConfig, true);
                             }
-                            triggeredBreakpoints--;
+                            settings.activeBreakpoint = {};
                         }
                     });
                 });
@@ -203,28 +290,28 @@ define([
                      * Displays the last image on preview.
                      */
                     last: function () {
-                        this.fotorama.show('>>');
+                        settings.fotoramaApi.show('>>');
                     },
 
                     /**
                      * Displays the first image on preview.
                      */
                     first: function () {
-                        this.fotorama.show('<<');
+                        settings.fotoramaApi.show('<<');
                     },
 
                     /**
                      * Displays previous element on preview.
                      */
                     prev: function () {
-                        this.fotorama.show('<');
+                        settings.fotoramaApi.show('<');
                     },
 
                     /**
                      * Displays next element on preview.
                      */
                     next: function () {
-                        this.fotorama.show('>');
+                        settings.fotoramaApi.show('>');
                     },
 
                     /**
@@ -237,7 +324,7 @@ define([
                             if (index > 0) {
                                 index -= 1;
                             }
-                            this.fotorama.show(index);
+                            settings.fotoramaApi.show(index);
                         }
                     },
 
@@ -264,7 +351,7 @@ define([
 
                             }
                             $.extend(true, settings.currentConfig.options, configuration);
-                            this.fotorama.setOptions(settings.currentConfig.options);
+                            settings.fotoramaApi.setOptions(settings.currentConfig.options);
                         }
                     },
 
@@ -274,16 +361,35 @@ define([
                      */
                     updateData: function (data) {
                         if (_.isArray(data)) {
-                            this.fotorama.load(data);
-                            $.extend(false, settings.defaultConfig, {
-                                data: data
+                            pushMainFirst(data);
+                            settings.fotoramaApi.load(data);
+
+                            $.extend(false, settings, {
+                                data: data,
+                                defaultConfig: data
                             });
                             $.extend(false, config, {
                                 data: data
                             });
                         }
+                    },
+
+                    /**
+                     * Returns current images list
+                     *
+                     * @returns {Array}
+                     */
+                    returnCurrentImages: function () {
+                        var images = [];
+
+                        _.each(this.fotorama.data, function (item) {
+                            images.push(_.omit(item, '$navThumbFrame', '$navDotFrame', '$stageFrame'));
+                        });
+
+                        return images;
                     }
                 };
+
             settings.$element.data('gallery', api);
             settings.api = settings.$element.data('gallery');
             settings.$element.trigger('gallery:loaded');
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
index 9fd58e8b302ef..f1a68415517b1 100644
--- a/lib/web/mage/gallery/gallery.less
+++ b/lib/web/mage/gallery/gallery.less
@@ -6,8 +6,8 @@
 @fotorama-duration-time: 0.3s;
 @fotorama-arw-size: 95px;
 @fotorama_close_size: 30px;
-@fotorama_fullscreen_button: 32px;
 @size-fotorama-block: 50px;
+@fotorama-thumb-arrow: 30px;
 
 @import '../../css/source/lib/_lib.less'; // Global lib
 @import '../../css/source/_theme.less'; // Theme overrides
@@ -20,23 +20,34 @@
     transform: translate3d(@x, @y, @z);
 }
 
+.fotorama-rotate (@deg) {
+    -webkit-transform: rotate(@deg);
+    -ms-transform: rotate(@deg);
+    transform: rotate(@deg);
+}
+
 .translateX(@value) {
+    -webkit-transform: translateX(@value);
     -ms-transform: translateX(@value);
     -o-transform: translateX(@value);
-    -webkit-transform: translateX(@value);
     transform: translateX(@value);
 }
 
 .translateY(@value) {
+    -webkit-transform: translateY(@value);
     -ms-transform: translateY(@value);
     -o-transform: translateY(@value);
-    -webkit-transform: translateY(@value);
     transform: translateY(@value);
 }
 
-.translate3d(@x, @y, @z) {
-    -webkit-transform: translate3d(@x, @y, @z);
-    transform: translate3d(@x, @y, @z);
+.fotorama-shadow-gradient(@x, @y) {
+    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(farthest-side at @x @y, rgba(0, 0, 0, 0.4), transparent);
+}
+
+.fotorama-arrow-gradient(@d){
+    background-image: -webkit-linear-gradient(@d, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
+    background-image: -ms-linear-gradient(@d, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
+    background-image: linear-gradient(@d, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
 }
 
 .fotorama-inline-block(@va: middle) {
@@ -48,6 +59,87 @@
     vertical-align: @va;
 }
 
+.fotorama__zoom-in,
+.fotorama__zoom-out {
+    display: none;
+}
+.fotorama__fullscreen {
+    .fotorama__zoom-in,
+    .fotorama__zoom-out {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        display: block;
+        margin-left: 20px;
+        z-index: 1000;
+    }
+    .fotorama__zoom-out {
+        top: 51px;
+        &:extend(.fotorama-sprite);
+        background-position: 0 (-@size-fotorama-block) !important;
+    }
+
+    .fotorama__zoom-in {
+        top: 0;
+        &:extend(.fotorama-sprite);
+        background-position: 0 0 !important;
+    }
+}
+
+.fotorama__zoom-in,
+.fotorama__zoom-out {
+    display: none;
+}
+.fotorama__fullscreen {
+    .fotorama__zoom-in,
+    .fotorama__zoom-out {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        display: block;
+        margin-left: 20px;
+        cursor: pointer;
+    }
+    .fotorama__zoom-out {
+        top: 51px;
+        &:extend(.fotorama-sprite);
+        background-position: 0 (-@size-fotorama-block) !important;
+    }
+
+    .fotorama__zoom-in {
+        top: 0;
+        &:extend(.fotorama-sprite);
+        background-position: 0 0 !important;
+    }
+}
+
+.fotorama__zoom-in,
+.fotorama__zoom-out {
+    display: none;
+}
+.fotorama__fullscreen {
+    .fotorama__zoom-in,
+    .fotorama__zoom-out {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        display: block;
+        margin-left: 20px;
+        cursor: pointer;
+    }
+    .fotorama__zoom-out {
+        top: 51px;
+        &:extend(.fotorama-sprite);
+        background-position: 0 (-@size-fotorama-block) !important;
+    }
+
+    .fotorama__zoom-in {
+        top: 0;
+        &:extend(.fotorama-sprite);
+        background-position: 0 0 !important;
+    }
+}
+
 .fotorama-stretch {
     bottom: 0;
     height: 100%;
@@ -58,16 +150,6 @@
     width: 100%;
 }
 
-.fotorama-image-reset {
-    border-radius: 0 !important;
-    box-shadow: none !important;
-    max-height: 99999px !important;
-    max-width: 99999px !important;
-    min-height: 0 !important;
-    min-width: 0 !important;
-    padding: 0 !important;
-}
-
 .fotorama-grab-cursor {
     cursor: move;
     cursor: -webkit-grab;
@@ -114,6 +196,7 @@
     height: 100%;
     position: absolute;
     width: 100%;
+    left:0;
 }
 
 .fotorama-transform-disabled {
@@ -202,8 +285,7 @@
 }
 
 .fotorama--fullscreen {
-    &:extend(.fotorama-image-reset);
-    background: @color-black;
+    background: @color-white;
     bottom: 0 !important;
     float: none !important;
     height: 100% !important;
@@ -214,9 +296,8 @@
     top: 0 !important;
     width: 100% !important;
     z-index: @z-index-10 !important;
-    .fotorama__stage,
-    .fotorama__nav {
-        background: @color-black;
+    .fotorama__wrap {
+        max-width: 100% !important;
     }
 }
 
@@ -357,7 +438,6 @@
     &:extend(.fotorama-focus);
     &:extend(.fotorama-inline-block);
     &:extend(.fotorama-no-tap);
-    cursor: pointer;
     position: relative;
 }
 
@@ -429,6 +509,7 @@
 }
 
 .fotorama__thumb {
+  background-color: @color-gray92;
     height: 100%;
     overflow: hidden;
     position: relative;
@@ -583,6 +664,14 @@
     &:extend(.fotorama-no-tap);
     cursor: pointer;
     position: absolute;
+}
+
+.fotorama__arr {
+    z-index: @z-index-9;
+
+}
+.fotorama__fullscreen-icon,
+.fotorama__video-close {
     z-index: @z-index-10;
 }
 
@@ -598,6 +687,9 @@
         .fotorama-abs-center();
         height: @size-fotorama-block;
         width: @size-fotorama-block;
+        .ie9 & {
+            margin: (-@size-fotorama-block/2) 0 0 (-@size-fotorama-block/2);
+        }
     }
 }
 
@@ -629,10 +721,12 @@
     right: 2px;
     top: 2px;
     width: @size-fotorama-block;
-    z-index: 20;
+    z-index: @z-index-10;
+    display:  none;
 }
 
 .fotorama__fullscreen-icon {
+    //display: none;
     &:focus {
         &:extend(.fotorama-focus);
         border-radius: 50%;
@@ -642,7 +736,8 @@
 
 .fotorama--fullscreen {
     .fotorama__fullscreen-icon {
-        background-position: (-@fotorama_fullscreen_button) (-@fotorama_fullscreen_button);
+        //display: inline-block;
+        background-position: (-@size-fotorama-block) 0;
     }
 }
 
@@ -686,7 +781,7 @@
     }
 
     .fotorama__wrap--css3 & {
-        .translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0);
+        .fotorama-translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0);
     }
 
     .fotorama__wrap--video & {
@@ -711,6 +806,60 @@
     }
 }
 
+.fotorama__wrap--toggle-arrows {
+    &:not(.fotorama__wrap--video) {
+        .fotorama__video-close {
+            display: none;
+        }
+    }
+}
+
+.fotorama__wrap--toggle-arrows {
+    &.fotorama__wrap--video {
+        .fotorama__video-close {
+            top: 97px;
+            right: 93px;
+            opacity: 1;
+        }
+    }
+}
+
+.fotorama__wrap--toggle-arrows {
+    &:not(.fotorama__wrap--video) {
+        .fotorama__video-close {
+            display: none;
+        }
+    }
+}
+
+.fotorama__wrap--toggle-arrows {
+    &.fotorama__wrap--video {
+        .fotorama__video-close {
+            top: 97px;
+            right: 93px;
+            opacity: 1;
+        }
+    }
+}
+
+.fotorama__wrap--toggle-arrows {
+    &:not(.fotorama__wrap--video) {
+        .fotorama__video-close {
+            display: none;
+        }
+    }
+}
+
+.fotorama__wrap--toggle-arrows {
+    &.fotorama__wrap--video {
+        .fotorama__video-close {
+            top: 97px;
+            right: 93px;
+            opacity: 1;
+        }
+    }
+}
+
 .fotorama__wrap--video {
     .fotorama__arr,
     .fotorama__fullscreen-icon {
@@ -739,24 +888,24 @@
 .fotorama__wrap--css3 {
     &.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows {
         .fotorama__fullscreen-icon:not(:focus) {
-            .translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0);
+            .fotorama-translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0);
         }
         .fotorama__arr--prev:not(:focus) {
-            .translate3d(-@fotorama-arw-size * 1.5, 0, 0);
+            .fotorama-translate3d(-@fotorama-arw-size * 1.5, 0, 0);
         }
         .fotorama__arr--next:not(:focus) {
-            .translate3d(@fotorama-arw-size * 1.5, 0, 0);
+            .fotorama-translate3d(@fotorama-arw-size * 1.5, 0, 0);
         }
     }
     &.fotorama__wrap--video {
         .fotorama__fullscreen-icon {
-            .translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0) !important;
+            .fotorama-translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0) !important;
         }
         .fotorama__arr--prev {
-            .translate3d(-@fotorama-arw-size * 1.5, 0, 0) !important;
+            .fotorama-translate3d(-@fotorama-arw-size * 1.5, 0, 0) !important;
         }
         .fotorama__arr--next {
-            .translate3d(@fotorama-arw-size * 1.5, 0, 0) !important;
+            .fotorama-translate3d(@fotorama-arw-size * 1.5, 0, 0) !important;
         }
     }
 }
@@ -777,34 +926,59 @@
     &:after {
         &:extend(.fotorama-gpu);
         background-repeat: no-repeat;
-        background-size: 1px 100%, 5px 100%;
-        bottom: 0;
         content: '';
         display: block;
-        height: auto;
         pointer-events: none;
         position: absolute;
         text-decoration: none;
-        top: 0;
-        width: 10px;
         z-index: 10;
     }
     &:before {
-        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.4), transparent);
-        background-position: 0 0, 0 0;
         left: -10px;
-    }
-    &.fotorama__shadows--left:before {
-        left: 0;
+        top: -10px;
     }
     &:after {
-        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.4), transparent);
-        background-position: 100% 0, 100% 0;
         right: -10px;
+        bottom: -10px;
     }
+    &.fotorama__shadows--left:before,
     &.fotorama__shadows--right:after {
+        top: 0;
+        bottom: 0;
+        background-size: 1px 100%, 5px 100%;
+        height: auto;
+        width: 10px;
+    }
+    &.fotorama__shadows--top:before,
+    &.fotorama__shadows--bottom:after {
+        left: 0;
+        right:0;
+        background-size: 100% 1px, 100% 5px ;
+        height:10px;
+        width:auto;
+    }
+    &.fotorama__shadows--left:before {
+        .fotorama-shadow-gradient(0, 50%);
+        background-position: 0 0, 0 0;
+        left: 0;
+    }
+
+    &.fotorama__shadows--right:after {
+        .fotorama-shadow-gradient(100%, 50%);
+        background-position: 100% 0, 100% 0;
         right: 0;
     }
+    &.fotorama__shadows--top:before {
+        .fotorama-shadow-gradient(50%, 0);
+        background-position: 0 0, 0 0;
+        top:0;
+
+    }
+    &.fotorama__shadows--bottom:after {
+        .fotorama-shadow-gradient(50%, 100%);
+        background-position: 0 100%, 0 100%;
+        bottom:0;
+    }
 }
 
 .fotorama--fullscreen .fotorama__stage,
@@ -835,7 +1009,7 @@
             width: 100%;
         }
     }
-    .fotorama_horisontal_ratio {
+    .fotorama_horizontal_ratio {
         .fotorama__img {
             .translateX(-50%);
             height: 100%;
@@ -859,7 +1033,7 @@
     overflow: hidden;
     position: absolute;
     top: 0;
-    z-index: @z-index-10;
+    z-index: @z-index-8;
 }
 
 .magnify-lens {
@@ -905,10 +1079,10 @@
     text-align: center;
     .fotorama__img {
         height: auto;
+        width: auto;
         max-height: 100%;
         max-width: 100%;
         vertical-align: middle;
-        width: auto;
     }
 }
 
@@ -919,3 +1093,143 @@
 .magnify-hidden {
     display: none;
 }
+
+.fotorama__nav-wrap--vertical {
+    &.fotorama__nav-wrap {
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .fotorama__nav__shaft {
+        width: 100%;
+        background-color: white;
+        .fotorama__nav__frame--thumb {
+            display: block;
+            padding-bottom: inherit !important;
+        }
+    }
+}
+
+.fotorama--fullscreen {
+    .fotorama__stage__frame {
+        .fotorama__img {
+            bottom: 0;
+            left: 0;
+            margin: auto;
+            max-height: inherit;
+            max-width: inherit;
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
+}
+
+.fotorama__nav-wrap--horizontal {
+    .fotorama__thumb__arr--left,
+    .fotorama__thumb__arr--right {
+        bottom: 0;
+        position: absolute;
+        top: 0;
+        width: @fotorama-thumb-arrow;
+        z-index: @z-index-10;
+        cursor: pointer;
+        .fotorama__thumb__arr {
+            width: 100%;
+            .fotorama-abs-center();
+        }
+    }
+    .fotorama__thumb__arr--left {
+        .fotorama-arrow-gradient(left);
+        left: 0;
+        .fotorama__thumb__arr {
+            background-position: (-@fotorama-thumb-arrow) (-@fotorama-thumb-arrow);
+        }
+    }
+    .fotorama__thumb__arr--right {
+        .fotorama-arrow-gradient(right);
+        right: 0;
+        .fotorama__thumb__arr {
+            background-position: (-@fotorama-thumb-arrow*2) (-@fotorama-thumb-arrow);
+        }
+    }
+}
+
+.fotorama__nav-wrap--vertical {
+    .fotorama__thumb__arr--left,
+    .fotorama__thumb__arr--right {
+        height: @fotorama-thumb-arrow;
+        left: 0;
+        position: absolute;
+        right: 0;
+        cursor: pointer;
+        z-index: @z-index-10;
+        .fotorama__thumb__arr {
+            .fotorama-rotate(90deg);
+            margin: auto;
+            width: @fotorama-thumb-arrow;
+        }
+    }
+    .fotorama__thumb__arr--left {
+        .fotorama-arrow-gradient(top);
+        top: 0;
+        .fotorama__thumb__arr {
+            background-position: (-@fotorama-thumb-arrow) (-@fotorama-thumb-arrow);
+        }
+    }
+    .fotorama__thumb__arr--right {
+        .fotorama-arrow-gradient(bottom);
+        bottom: 0;
+        .fotorama__thumb__arr {
+            background-position: (-@fotorama-thumb-arrow*2) (-@fotorama-thumb-arrow);
+        }
+    }
+}
+
+.fotorama__wrap--only-active {
+    .fotorama__stage,
+    .fotorama__nav {
+        max-width: 99999px !important;
+    }
+    .fotorama__stage__frame {
+        visibility: hidden;
+    }
+    .fotorama__stage__frame.fotorama__active {
+        visibility: visible;
+    }
+}
+
+.fotorama__thumb__arr {
+    &:extend(.fotorama-sprite);
+    background-size: 300%;
+    font-size: 0.001px;
+    padding-bottom: @fotorama-thumb-arrow;
+}
+
+.magnify-fullimage {
+    display: none;
+}
+
+.gallery-placeholder {
+    .loading-mask {
+        padding: 0 0 50%;
+        position: absolute;
+    }
+    .loader img {
+      position: absolute;
+    }
+}
+
+body.fotorama__fullscreen {
+    overflow-y: hidden;
+    .magnify-fullimage {
+        display: inline-block;
+    }
+    .fotorama__stage__shaft {
+        //.fotorama__img {
+        //    display: none;
+        //}
+    }
+}
diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js
index af08fb28fe486..2a315a2b9bc6f 100644
--- a/lib/web/magnifier/magnifier.js
+++ b/lib/web/magnifier/magnifier.js
@@ -4,6 +4,11 @@
  */
 
 ;(function ($) {
+    var onWheelCallback,
+        zoomWidthStep = 0,
+        zoomHeightStep = 0,
+        isDraggable = false;
+
     $.fn.magnify = function (options) {
         'use strict';
 
@@ -24,8 +29,9 @@
             $thumb,
             that = this,
             largeWrapper = options.largeWrapper ||  ".magnifier-preview",
-            $largeWrapper = $(largeWrapper);
-        curThumb = null,
+            $largeWrapper = $(largeWrapper),
+            zoomShown = false,
+            curThumb = null,
             currentOpts = {
                 x: 0,
                 y: 0,
@@ -96,7 +102,9 @@
 
         var MagnifyCls = {
             magnifyHidden: "magnify-hidden",
-            magnifyOpaque: "magnify-opaque"
+            magnifyOpaque: "magnify-opaque",
+            magnifyFull: "magnify-fullimage"
+
         };
 
 
@@ -116,41 +124,19 @@
             _init($box, options);
         };
 
-        /**
-         * Delete events and created block for magnify
-         *
-         */
-        that.destroy  = function () {
-            console.warn("API not implemented.");
-        };
-
-        /**
-         * @todo
-         */
-        that.zoomIn = function () {
-            console.warn("API not implemented.");
-        };
-
-        /**
-         * @todo
-         */
-        that.zoomOut = function () {
-            console.warn("API not implemented.");
-        };
-
-        /**
-         * @todo
-         */
-        that.show = function () {
-            console.warn("API not implemented.");
-        };
-
-        /**
-         * @todo
-         */
-        that.hide = function () {
-            console.warn("API not implemented.");
-        };
+        function _toBoolean (str) {
+            if (typeof  str === 'string') {
+                if (str === 'true') {
+                    return true;
+                } else if (str === 'false' || '') {
+                    return false;
+                } else {
+                    console.warn("Wrong type: can't be transformed to Boolean");
+                }
+            } else if (typeof str === 'boolean') {
+                return str;
+            }
+        }
 
         function createLens(thumb) {
             if ($(thumb).siblings('.magnify-lens').length) {
@@ -187,7 +173,7 @@
             data[idx].lensH = data[idx].lensH > $thumb.height() ? $thumb.height() : data[idx].lensH;
             lens.css({
                 width: data[idx].lensW + 1 + 'px',
-                height: data[idx].lensH + 'px'
+                height: data[idx].lensH + 0.5 + 'px'
             });
         }
 
@@ -238,7 +224,7 @@
 
 
         function onThumbEnter() {
-            if (enabled === true) {
+            if (_toBoolean(enabled)) {
                 currentOpts = data[curIdx];
                 curLens = $box.find('.magnify-lens');
 
@@ -277,7 +263,7 @@
         }
 
         function move() {
-            if (enabled === true) {
+            if (_toBoolean(enabled)) {
                 if (status !== currentOpts.status) {
                     onThumbEnter();
                 }
@@ -301,8 +287,8 @@
                     pos.l = pos.l <= 0 ? 0 : pos.l;
                     //pos.l = pos.l > 0 ? pos.l : pos.l;
                     curLens.css({
-                        left: pos.l + paddingX + 'px',
-                        top: pos.t + paddingY + 'px'
+                        left: pos.l + paddingX +'px',
+                        top: pos.t + paddingY + 1.75 + 'px'
                     });
 
                     if (lensbg) {
@@ -372,7 +358,8 @@
                 opts.thumb = $thumb;
                 enabled = opts.enabled;
 
-                if(enabled) {
+                if(_toBoolean(enabled)) {
+
                     $largeWrapper.show().css('display', '');
                     $largeWrapper.addClass(MagnifyCls.magnifyHidden);
                     set(opts);
@@ -386,13 +373,14 @@
 
         function hoverEvents(thumb) {
             $(thumb).on('mouseover', function (e) {
+
                 if (showWrapper) {
 
                     if (currentOpts.status !== 0) {
                         onThumbLeave();
                     }
                     handleEvents(e);
-                    isOverThumb = true;
+                    isOverThumb = inBounds;
                 }
             }).trigger('mouseover');
         }
@@ -479,7 +467,7 @@
                     ? options.onthumbmove
                     : currentOpts.onthumbmove;
 
-            largeUrl = gOptions.original || $thumb.attr('src');
+            largeUrl = gOptions.full || $thumb.attr('src');
 
             if (thumb.id === '') {
                 idx = thumb.id = 'magnifier-item-' + gId;
@@ -562,6 +550,10 @@
 
             getMousePos();
 
+            if (gEventType === 'hover') {
+                isOverThumb = inBounds;
+            }
+
             if (inBounds && isOverThumb) {
                 $largeWrapper.removeClass(MagnifyCls.magnifyHidden);
                 move();
@@ -572,6 +564,161 @@
             }
         }
 
+        function toggleZoomButtons($image) {
+            var path = $image.attr("src"),
+                imgSize;
+            if (path) {
+                imgSize = getImageSize(path);
+                if ((imgSize.rh > $image.parent().height()) || (imgSize.rw > $image.parent().width())) {
+                    $('.fotorama__zoom-in').show();
+                    $('.fotorama__zoom-out').show();
+                    zoomShown = true;
+                } else {
+                    $('.fotorama__zoom-in').hide();
+                    $('.fotorama__zoom-out').hide();
+                    zoomShown = false;
+                }
+            } else {
+                $('.fotorama__zoom-in').hide();
+                $('.fotorama__zoom-out').hide();
+                zoomShown = false;
+            }
+        }
+
+        function magnifierFullscreen () {
+            var isDragActive = false,
+                startX,
+                startY,
+                imagePosX,
+                imagePosY,
+                touch,
+                isTouchEnabled = 'ontouchstart' in document.documentElement;
+
+            $('[data-gallery-role="gallery"]').on('fotorama:fullscreenenter fotorama:showend fotorama:load', function () {
+                var $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'),
+                    $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'),
+                    $imageContainer = $preview.parent(),
+                    gallery = $('[data-gallery-role="gallery"]');
+
+                gallery.on('fotorama:fullscreenexit', function () {
+                    $thumb.css({
+                        'top': '',
+                        'left': ''
+                    });
+                });
+
+                if (gallery.data('fotorama').fullScreen) {
+                    toggleZoomButtons($image);
+                    resetVars($('[data-gallery-role="stage-shaft"] .fotorama__img--full'));
+
+                    $('.fotorama__stage__frame .fotorama__img--full').each(function () {
+                        var path = $(this).attr("src"),
+                            imgSize;
+                        if (path) {
+                            imgSize = getImageSize(path);
+
+                            if ((imgSize.rh > $(this).parent().height()) || (imgSize.rw > $(this).parent().width())) {
+
+                                if (imgSize.rh / imgSize.rw < $(this).parent().height() / $(this).parent().width()) {
+                                    $(this).width($(this).parent().width());
+                                    $(this).height('auto');
+                                } else {
+                                    $(this).height($(this).parent().height());
+                                    $(this).width('auto');
+                                }
+
+                                $(this).css({
+                                    'top': '',
+                                    'left': ''
+                                });
+                            }
+                        }
+                    });
+                }
+
+                $image
+                    .off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown')
+                    .on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) {
+                        if (gallery.data('fotorama').fullScreen && isDraggable) {
+                            e.preventDefault();
+                            $image.css('cursor', 'move');
+                            imagePosY = $image.offset().top;
+                            imagePosX = $image.offset().left;
+
+                            if (isTouchEnabled) {
+                                touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+                                e.clientX = touch.pageX;
+                                e.clientY = touch.pageY;
+                            }
+                            startX = e.clientX || e.originalEvent.clientX;
+                            startY = e.clientY || e.originalEvent.clientY;
+                            isDragActive = true;
+                        }
+                    });
+
+
+
+                $image
+                    .off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove')
+                    .on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) {
+                        if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) {
+
+                            var top,
+                                left,
+                                startOffset = $image.offset(),
+                                clientX = e.clientX || e.originalEvent.clientX,
+                                clientY = e.clientY || e.originalEvent.clientY;
+
+
+                            e.preventDefault();
+
+                            if (isTouchEnabled) {
+                                touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+                                e.clientX = touch.pageX;
+                                e.clientY = touch.pageY;
+                            }
+                            top = +imagePosY + (clientY - startY);
+                            left = +imagePosX + (clientX - startX);
+
+                            if ($image.height() > $imageContainer.height()) {
+
+                                if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) {
+                                    top = $imageContainer.offset().top + $imageContainer.height() - $image.height();
+                                } else {
+                                    top = ($imageContainer.offset().top < top) ? 0 : top;
+                                }
+                                $image.offset({
+                                    'top': top
+                                });
+                            }
+
+                            if ($image.width() > $imageContainer.width()) {
+
+                                if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) {
+                                    left = $imageContainer.offset().left + $imageContainer.width() - $image.width();
+                                } else {
+                                    left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left;
+                                }
+                                $image.offset({
+                                    'left': left
+                                });
+                            }
+                        }
+                    });
+
+                $image
+                    .off(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp')
+                    .on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) {
+                        if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) {
+                            isDragActive = false;
+                            $image.css('cursor', 'pointer');
+
+                            return false;
+                        }
+                    });
+            });
+        }
+
         function onScroll() {
 
             if (curThumb !== null) {
@@ -579,11 +726,260 @@
             }
         }
 
+        if ($('.fotorama-item').data('fotorama').fullScreen) {
+            $('.fotorama__stage__frame .fotorama__img--full').each(function () {
+                var image = new Image();
+                image.src = $(this).attr("src");
+
+                if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) {
+
+                    if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) {
+                        $(this).width($(this).parent().width());
+                        $(this).height('');
+                    } else {
+                        $(this).height($(this).parent().height());
+                        $(this).width('');
+                    }
+                }
+            });
+        }
+
         $(window).on('scroll', onScroll);
         $(window).resize(function() {
+
+            if ($('.fotorama-item').data('fotorama').fullScreen) {
+
+                $('.fotorama__stage__frame .fotorama__img--full').each(function () {
+                    var image = new Image();
+                    image.src = $(this).attr("src");
+
+                    if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) {
+
+                        if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) {
+                            $(this).width($(this).parent().width());
+                            $(this).height('');
+                        } else {
+                            $(this).height($(this).parent().height());
+                            $(this).width('');
+                        }
+                    }
+                });
+
+                toggleZoomButtons($('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'));
+            }
+
+
             _init($box, gOptions);
+
         });
+
+        function resetVars($image) {
+            zoomWidthStep = 0;
+            zoomHeightStep = 0;
+            isDraggable = false;
+            $image.css({
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                cursor: ''
+            });
+        }
+
+        function checkFullscreenImagePosition(widthStep, heightStep) {
+            var $preview, $image, $imageContainer, gallery, top, left;
+
+            if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) {
+
+                $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img');
+                $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full');
+                $imageContainer = $preview.parent();
+                gallery = $('[data-gallery-role="gallery"]');
+                top = $image.offset().top;
+                left = $image.offset().left;
+
+                if ($image.height() > $imageContainer.height()) {
+                    if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height() + heightStep/2) {
+                        top = $imageContainer.offset().top + $imageContainer.height() - $image.height() + heightStep/2;
+                    } else {
+                        top = ($imageContainer.offset().top <= top + heightStep/2 && heightStep > 0) ? 0 : top + heightStep/2;
+                    }
+                    $image.css({
+                        top: top,
+                        bottom: 'auto'
+                    });
+                } else {
+                    $image.css({
+                        top: 0,
+                        bottom: 0
+                    });
+                }
+
+                if ($image.width() > $imageContainer.width()) {
+                    if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width() + widthStep/2)) {
+                        left = $imageContainer.offset().left + $imageContainer.width() - $image.width() + widthStep/2;
+                    } else {
+                        left = ($imageContainer.offset().left <= left + widthStep/2 && widthStep > 0) ? 0 : left - $imageContainer.offset().left + widthStep/2;
+                    }
+                    $image.css({
+                        left: left,
+                        right: 'auto'
+                    });
+                } else {
+                    $image.css({
+                        left: 0,
+                        right: 0
+                    });
+                }
+            }
+        }
+
+        function zoomIn(e) {
+            if (zoomShown) {
+                var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'),
+                    imgOriginalSize = $image.length ? getImageSize($image[0].src) : '',
+                    widthResult,
+                    heightResult;
+
+                if (!zoomWidthStep) {
+                    zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width())/parseFloat(options.fullscreenzoom));
+                    zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height())/parseFloat(options.fullscreenzoom));
+                }
+                widthResult = $image.width() + zoomWidthStep;
+                heightResult = $image.height() + zoomHeightStep;
+
+                if (widthResult >= imgOriginalSize.rw) {
+                    widthResult = imgOriginalSize.rw;
+                }
+                if (heightResult >= imgOriginalSize.rh) {
+                    heightResult = imgOriginalSize.rh;
+                }
+
+                if ( zoomShown ) {
+                    isDraggable = true;
+                }
+
+                if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) {
+                    $image.css({
+                        width: widthResult,
+                        height: 'auto'
+                    });
+                    checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep);
+                } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) {
+                    $image.css({
+                        width: 'auto',
+                        height: heightResult
+                    });
+                    checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep);
+                }
+            }
+
+            return false;
+        }
+
+        function zoomOut(e) {
+            if (zoomShown) {
+                var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'),
+                    setedResult = $image.width() - zoomWidthStep,
+                    widthCheck = $image.width() - zoomWidthStep <= $image.parent().width(),
+                    heightCheck = $image.height() - zoomHeightStep <= $image.parent().height();
+
+                e.preventDefault();
+
+                if (widthCheck && heightCheck) {
+                    if ($image.width() >= $image.height()) {
+                        $image.trigger('fotorama:load');
+
+                        return false;
+                    } else if ($image.width() < $image.height()) {
+                        $image.trigger('fotorama:load');
+
+                        return false;
+                    }
+                }
+
+                $image.css({'width': setedResult, height: 'auto'});
+                checkFullscreenImagePosition(zoomWidthStep, zoomHeightStep);
+            }
+
+            return false;
+        }
+
+        /**
+         * Return width and height of original image
+         * @param src path for original image
+         * @returns {{rw: number, rh: number}}
+         */
+        function getImageSize(src) {
+            var img = new Image(),
+                imgSize = {
+                    rw: 0,
+                    rh: 0
+                };
+            img.src = src;
+            imgSize.rw = img.width;
+            imgSize.rh = img.height;
+            return imgSize;
+        }
+
+
+        function setEventOnce() {
+            $('.fotorama__zoom-in')
+                .off('mouseup')
+                .on('mouseup', zoomIn);
+            $('.fotorama__zoom-out')
+                .off('mouseup')
+                .on('mouseup', zoomOut);
+            $('.fotorama__zoom-in')
+                .off('touchstart')
+                .on('touchstart', zoomIn);
+            $('.fotorama__zoom-out')
+                .off('touchstart')
+                .on('touchstart', zoomOut);
+        }
+
         $(document).on('mousemove', onMousemove);
         _init($box, gOptions);
+        setEventOnce();
+        magnifierFullscreen();
+
+        if (!onWheelCallback) {
+            onWheelCallback = function onWheel(e) {
+                if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) {
+                    e = e || window.event;
+
+
+                    var delta = e.deltaY || e.detail || e.wheelDelta;
+
+                    if (delta > 0) {
+                        zoomOut(e);
+                    } else {
+                        zoomIn(e);
+                    }
+
+                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
+                }
+            };
+        }
+        $('.fotorama-item').on('fotorama:load', function () {
+            if (document.querySelector('.fotorama__stage').addEventListener) {
+                if ('onwheel' in document) {
+                    // IE9+, FF17+, Ch31+
+                    document.querySelector('.fotorama__stage').removeEventListener("wheel", onWheelCallback);
+                    document.querySelector('.fotorama__stage').addEventListener("wheel", onWheelCallback);
+                } else if ('onmousewheel' in document) {
+                    document.querySelector('.fotorama__stage').removeEventListener("mousewheel", onWheelCallback);
+                    document.querySelector('.fotorama__stage').addEventListener("mousewheel", onWheelCallback);
+                } else {
+                    // Firefox < 17
+                    document.querySelector('.fotorama__stage').removeEventListener("MozMousePixelScroll", onWheelCallback);
+                    document.querySelector('.fotorama__stage').addEventListener("MozMousePixelScroll", onWheelCallback);
+                }
+            } else { // IE8-
+                document.querySelector('.fotorama__stage').detachEvent("onmousewheel", onWheelCallback);
+                document.querySelector('.fotorama__stage').attachEvent("onmousewheel", onWheelCallback);
+            }
+        });
+
     }
 }(jQuery));
diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js
index a30a827aabdd3..06a835ef9a2df 100644
--- a/lib/web/magnifier/magnify.js
+++ b/lib/web/magnifier/magnify.js
@@ -13,26 +13,59 @@ define([
         var isTouchEnabled = 'ontouchstart' in document.documentElement,
             gallerySelector = '[data-gallery-role="gallery"]',
             magnifierSelector = '[data-gallery-role="magnifier"]',
-            magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]';
+            magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]',
+            fullScreenIcon = '[data-gallery-role="fotorama__fullscreen-icon"]',
+            hideMagnifier,
+            behaveOnHover;
 
         if (isTouchEnabled) {
             $(element).on('fotorama:showend fotorama:load', function () {
                 $(magnifierSelector).remove();
+                $(magnifierZoomSelector).remove();
             });
-
-            return config;
         }
 
+        /**
+         * Hides magnifier preview and zoom blocks.
+         */
+        hideMagnifier = function () {
+            $(magnifierSelector).empty().hide();
+            $(magnifierZoomSelector).remove();
+        };
+
+        /**
+         * Hides magnifier on drag and while arrow click.
+         */
+        behaveOnHover = function (e, initPos) {
+            var pos = [e.pageX, e.pageY],
+                isArrow = $(e.target).data('gallery-role') === 'arrow',
+                isClick = initPos[0] === pos[0] && initPos[1] === pos[1];
+            if (isArrow || !isClick) {
+                hideMagnifier();
+            }
+        };
+
         if (config.magnifierOpts.eventType === 'click') {
             config.options.swipe = false;
+        } else if (config.magnifierOpts.eventType === 'hover') {
+            $(element).on('pointerdown mousedown MSPointerDown', function (e) {
+                var pos = [e.pageX, e.pageY];
+
+                $(element).on('mousemove pointermove MSPointerMove', function (ev) {
+                    navigator.msPointerEnabled ? hideMagnifier() : behaveOnHover(ev, pos);
+                });
+                $(document).on('mouseup pointerup MSPointerUp', function () {
+                    $(element).off('mousemove pointermove MSPointerMove');
+                });
+            });
         }
 
         $.extend(config.magnifierOpts, {
             zoomable: false,
-            thumb: '.fotorama__img',
+            thumb: '.fotorama__img:not(".fotorama__img--full")',
             largeWrapper: '[data-gallery-role="magnifier"]',
             height: config.magnifierOpts.height || function () {
-                return $('[data-active="true"]').width() / config.options.ratio;
+                return $('[data-active="true"]').height();
             },
             width: config.magnifierOpts.width || function () {
                 var productMedia = $(gallerySelector).parent().parent();
@@ -47,16 +80,16 @@ define([
             }
         });
 
-        $(element).on('fotorama:showend fotorama:load', function (e, fotorama) {
-            $(magnifierSelector).empty().hide();
-            $(magnifierZoomSelector).remove();
+        $(element).on('fotorama:showend fotorama:load fotorama:fullscreenexit fotorama:ready', function (e, fotorama) {
+            hideMagnifier();
             config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img;
-            config.magnifierOpts.original = fotorama.data[fotorama.activeIndex].original;
+            config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].full;
             $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts);
         });
-        $(element).on('fotorama:show', function () {
-            $(magnifierSelector).empty().hide();
-            $(magnifierZoomSelector).remove();
+        $(element).on('gallery:loaded', function () {
+            $(element).find(gallerySelector).on('fotorama:show fotorama:fullscreenenter ', function () {
+                hideMagnifier();
+            });
         });
 
         return config;