Merge pull request #1267 from openclassify/minor-changes

Minor changes

addons/default/visiosoft/advs-module/resources/js/list-table.js

@@ -1,3 +1,13 @@
 $(".clickable-row").click(function () {
     window.location = $(this).data("href");
-});
+});
+
+$('.hover-area').mouseover((e) => {
+    var el = $(e);
+
+    var img = $(`.${$(el[0].target).data('id')}`);
+
+    img.siblings('img').hide();
+
+    img.show();
+});

addons/default/visiosoft/advs-module/resources/views/list/gallery.twig

@@ -13,8 +13,18 @@
             <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 }}">
+                        <a href="{{ adv.detail_url }}" class="imgs" id="{{ adv.id }}">
-                            <img class="product-image-in" src="{{ adv.cover_photo }}" alt="{{ adv.name }}">
+                            {% set slicedPhotos = adv.getViewPhotoUrl|slice(0,3) %}
+
+                            {%  for key,photo in slicedPhotos %}
+                                    <img src="{{ photo }}" class="product-image-in ads-img img-{{ adv.id ~ '-' ~ key }}" alt="">
+
+                                {% endfor %}
+                            <div class="hover-area">
+                                {% for key, photo in slicedPhotos %}
+                                        <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>
@@ -37,6 +47,8 @@
         {% endfor %}
     </div>
 
+    {{ asset_add("scripts.js", "visiosoft.module.advs::js/list-table.js") }}
+
 {% endblock %}
 
 {% block styles %}
@@ -45,6 +57,7 @@
 {% endblock %}
 
 {% block customjs %}
-    {{ asset_add("scripts.js", "visiosoft.module.advs::js/list-table.js") }}
     {% include "theme::scroll-modal" %}
 {% endblock %}
+
+

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%;
 }