Merge branch 'fix-materials-slider' of Adyn/medgis-ru-assets into master

AppAssets.php

@@ -9,11 +9,13 @@ use base\web\FancyboxAsset;
 class AppAssets extends AssetBundle
 {
     public $css = [
+        '//cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css',
         'css/all.css',
     ];
 
     public $js = [
-        'js/all.min.js'
+        '//cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js',
+        'js/all.min.js',
     ];
 
     public $depends = [

app/assets/scripts/main.js

@@ -1,4 +1,4 @@
-(function () {
+(function (document, window, $) {
     if ($("*").is('#dayitime')) {
         function addZero(i) {
             if (i < 10) {
@@ -187,4 +187,18 @@
         itemCheckboxClass: 'regionsfilter__checkbox',
         itemLabelClass: 'regionsfilter__label'
     });
-})();
+
+    window.showFotorama = function(jQuery, fotoramaObjectClass, fotoramaPrevClass, fotoramaNextClass) {
+        var $selector = jQuery(fotoramaObjectClass);
+        $selector.data('navwidth', ($selector.outerWidth() - 80) + 'px');
+        var $fotoramaDiv = $selector.fotorama();
+        var fotorama = $fotoramaDiv.data('fotorama');
+        jQuery(fotoramaPrevClass).click((function (e) {
+            fotorama.show('<');
+        }).bind(this));
+        jQuery(fotoramaNextClass).click((function (e) {
+            fotorama.show('>');
+        }).bind(this));
+    };
+
+})(window.document, window, window.jQuery);

app/assets/styles/content/centerbar/full-news.scss

@@ -318,4 +318,56 @@
         }
     }
 
-}
+
+    &__gallery {
+        position: relative;
+
+        &-img {
+            overflow: hidden;
+            border-radius: 10px 0 0 0;
+        }
+
+        &-preview {
+            width: 140px;
+        }
+
+        &-prevs {
+            &-left,
+            &-right {
+                display: inline-block;
+                background: url('../img/slider/sliderLeft.png');
+                cursor: pointer;
+                width: 25px;
+                height: 45px;
+                vertical-align: top;
+                transform: translate(0, -50%);
+                position: absolute;
+                bottom: 15px;
+                top: auto;
+            }
+
+            &-left {
+                margin-right: 15px;
+                &:hover {
+                    background: url('../img/slider/sliderLeft-hover.png');
+                }
+            }
+
+            &-right {
+                background: url('../img/slider/sliderRight.png');
+                right: 0;
+                &:hover {
+                    background: url('../img/slider/sliderRight-hover.png');
+                }
+            }
+        }
+    }
+
+    .fotorama__nav-wrap {
+        width: -moz-calc(100% - 80px);
+        width: -webkit-calc(100% - 80px);
+        width: calc(100% - 80px);
+        margin-left: 40px !important;
+        position: relative;
+    }
+}

app/www/css/all.css

@@ -1687,6 +1687,41 @@ body {
     display: inline-block;
     color: #a2a1a1; }
 
+.full-news__gallery {
+  position: relative; }
+  .full-news__gallery-img {
+    overflow: hidden;
+    border-radius: 10px 0 0 0; }
+  .full-news__gallery-preview {
+    width: 140px; }
+  .full-news__gallery-prevs-left, .full-news__gallery-prevs-right {
+    display: inline-block;
+    background: url("../img/slider/sliderLeft.png");
+    cursor: pointer;
+    width: 25px;
+    height: 45px;
+    vertical-align: top;
+    transform: translate(0, -50%);
+    position: absolute;
+    bottom: 15px;
+    top: auto; }
+  .full-news__gallery-prevs-left {
+    margin-right: 15px; }
+    .full-news__gallery-prevs-left:hover {
+      background: url("../img/slider/sliderLeft-hover.png"); }
+  .full-news__gallery-prevs-right {
+    background: url("../img/slider/sliderRight.png");
+    right: 0; }
+    .full-news__gallery-prevs-right:hover {
+      background: url("../img/slider/sliderRight-hover.png"); }
+
+.full-news .fotorama__nav-wrap {
+  width: -moz-calc(100% - 80px);
+  width: -webkit-calc(100% - 80px);
+  width: calc(100% - 80px);
+  margin-left: 40px !important;
+  position: relative; }
+
 .maintitle {
   background: #ebebeb;
   border-radius: 10px 0 0 0 / 10px 0 0 0;