From bde46c8064dc4546355b0818beabc9ecfbfc9838 Mon Sep 17 00:00:00 2001
From: Metehan Celik <mthncelik@gmail.com>
Date: Wed, 5 Jan 2022 16:55:36 +0300
Subject: [PATCH] added if statement for banner. category cards have carousel
 now

---
 .../resources/views/list/gallery.twig         | 27 +++++++++++++--
 .../base-theme/resources/css/gallery.css      | 34 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig b/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
index b72873280..75685f1c1 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
@@ -13,8 +13,16 @@
             <div class="col-xl-4 col-6 p-sm-3 p-0">
                 <div class="d-flex flex-column product-hb gallery-card pb-3 px-1 pt-1 border shadow-sm rounded">
                     <div class="product-image-hb p-sm-3 p-1">
-                        <a href="{{ adv.detail_url }}">
-                            <img class="product-image-in" src="{{ adv.cover_photo }}" alt="{{ adv.name }}">
+                        <a href="{{ adv.detail_url }}" class="imgs" id="{{ adv.id }}">
+                                {%  for key,photo in adv.getViewPhotoUrl %}
+                                    <img src="{{ photo }}" class="product-image-in ads-img img-{{ adv.id ~ '-' ~ key }}" alt="">
+
+                                {% endfor %}
+                            <div class="hover-area">
+                                {% for key, photo in adv.getViewPhotoUrl %}
+                                        <div class="hover-{{ key }}" data-parent="{{ adv.id }}" data-id="img-{{ adv.id ~ '-' ~ key }}"></div>
+                                {% endfor %}
+                            </div>
                         </a>
                         {{ addBlock('list/extra-actions', {'ad': adv, 'vars': _context}, ['favs'])|raw }}
                     </div>
@@ -36,6 +44,19 @@
             </div>
         {% endfor %}
     </div>
+    <script>
+        $('.ads-img').first().css('display', 'block');
+
+        $('.hover-area').mouseover((e) => {
+            var el = $(e);
+
+            var img = $(`.${$(el[0].target).data('id')}`);
+
+            img.siblings('img').css('display', 'none');
+
+            img.css('display', 'block');
+        });
+    </script>
 
 {% endblock %}
 
@@ -48,3 +69,5 @@
     {{ asset_add("scripts.js", "visiosoft.module.advs::js/list-table.js") }}
     {% include "theme::scroll-modal" %}
 {% endblock %}
+
+
diff --git a/addons/default/visiosoft/base-theme/resources/css/gallery.css b/addons/default/visiosoft/base-theme/resources/css/gallery.css
index 2d031b42f..64d3d144b 100644
--- a/addons/default/visiosoft/base-theme/resources/css/gallery.css
+++ b/addons/default/visiosoft/base-theme/resources/css/gallery.css
@@ -52,4 +52,38 @@
 }
 .fs-14{
     font-size: 14px;
+}
+.imgs{
+    position: relative;
+}
+.ads-img{
+    position:inherit;
+}
+.imgs .ads-img {
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+.imgs .ads-img:first-child {
+    display: flex;
+}
+.hover-area{
+    position: absolute;
+    display: flex;
+    height: 100%;
+    width: 200px;
+    top: 0;
+    left: 0;
+}
+.hover-0 {
+    width: 33%;
+    height: 100%;
+}
+.hover-1 {
+    width: 33%;
+    height: 100%;
+}
+.hover-2 {
+    width: 33%;
+    height: 100%;
 }
\ No newline at end of file