feat: Product slider comes from slider.

bin/css/cologne.blue.css

@@ -12,10 +12,11 @@ a:hover {
     color: #3986dd;
 }
 
-.product-gallery .quiqqer-gallery-slider-active-preview {
+/*.product-gallery .quiqqer-gallery-slider-active-preview {
     opacity: 1;
     border-color: #92bcec;
-}
+    border-color: #3986dd;
+}*/
 
 .product-data-more-tabs-tab.active {
     color: #3986dd;

bin/css/style.css

@@ -572,12 +572,23 @@ img {
     border: none !important;
 }
 
+.product-gallery .quiqqer-gallery-slider-image {
+    cursor: zoom-in;
+}
+
+.product-gallery .quiqqer-gallery-slider-prev,
+.product-gallery .quiqqer-gallery-slider-next,
+.product-gallery .quiqqer-gallery-slider-controls {
+    display: none;
+}
+
 .product-gallery .quiqqer-gallery-slider-previewOutside .quiqqer-gallery-slider-content {
     height: calc(100% - 60px)
 }
 .product-gallery .quiqqer-gallery-slider-previews {
     margin-top: 10px;
 }
+
 .product-gallery .quiqqer-gallery-slider-previews-prev,
 .product-gallery .quiqqer-gallery-slider-previews-next {
     height: 70px;
@@ -592,12 +603,17 @@ img {
     height: 70px;
     margin-right: 10px;
     padding: 5px;
-    border: 1px solid #ddd;
+    border: 2px solid #ddd;
     border-radius: 3px;
+    transition: 0.30s border-color;
+}
+.product-gallery .quiqqer-gallery-slider-active-preview {
+    border-color: #666;
+    opacity: 1;
 }
 
 .product-gallery .quiqqer-gallery-slider-previews-container img {
-    height: 60px
+    height: 55px
 }
 
 /* product data */

src/QUI/TemplateCologne/Controls/ProductGallery.html

+{$Gallery->create()}
\ No newline at end of file

src/QUI/TemplateCologne/Controls/ProductGallery.php

@@ -4,7 +4,7 @@
  * This file contains QUI\TemplateCologne\Controls\ProductGallery
  */
 
-namespace QUI\TemplateCologne\Controls\ProductGallery;
+namespace QUI\TemplateCologne\Controls;
 
 use DusanKasan\Knapsack\Collection;
 use QUI;
@@ -26,11 +26,11 @@ class ProductGallery extends QUI\Control
     public function __construct($attributes = [])
     {
         $this->setAttributes([
-            'Product'  => false,
+            'Product' => false,
 //            'data-qui' => 'package/quiqqer/products/bin/controls/frontend/products/Product'
         ]);
 
-        $this->addCSSFile(dirname(__FILE__).'/ProductGallery.css');
+//        $this->addCSSFile(dirname(__FILE__).'/ProductGallery.css');
 
         parent::__construct($attributes);
     }
@@ -47,7 +47,7 @@ public function getBody()
         /* @var $Product QUI\ERP\Products\Product\Product */
         $Engine  = QUI::getTemplateManager()->getEngine();
         $Product = $this->getAttribute('Product');
-        $Gallery = new QUI\Gallery\Controls\ImageSlider();
+        $Gallery = new QUI\Gallery\Controls\Slider();
 
         // gallery
         $PlaceholderImage = $this->getProject()->getMedia()->getPlaceholderImage();
@@ -66,12 +66,27 @@ public function getBody()
         } catch (QUI\Exception $Exception) {
         }
 
-        $Gallery->setAttribute('height', '400px');
+        $height = '400px';
+        if ($this->getAttribute('height')) {
+            $height = $this->getAttribute('height');
+        }
+
+        $Gallery->setAttribute('height', $height);
+
+        $Gallery->setAttribute('data-qui-options-show-controls-always', 0);
+        $Gallery->setAttribute('data-qui-options-show-title-always', 0);
+        $Gallery->setAttribute('data-qui-options-show-title', 0);
+        $Gallery->setAttribute('data-qui-options-imagefit', 0);
+
+        $Gallery->setAttribute('data-qui-options-preview', 1);
+        $Gallery->setAttribute('data-qui-options-preview-outside', 1);
+        $Gallery->setAttribute('data-qui-options-preview-background-color', '#fff');
+        $Gallery->setAttribute('data-qui-options-preview-color', '#ddd');
 
         $Engine->assign([
-            'Gallery'              => $Gallery,
+            'Gallery' => $Gallery,
         ]);
 
-        return $Engine->fetch(dirname(__FILE__).'/ProductGallery.html');
+        return $Engine->fetch(dirname(__FILE__) . '/ProductGallery.html');
     }
 }