1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Po najechaniu myszką na produkt, wyświetlane jest drugie zdjęcie produktu

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika Trybun, 31 Grudzień 2015.

  1. Trybun

    Trybun Początkujący

    Wiadomości:
    9
    Docenione treści:
    3
    @TheL
    Opis modyfikacji: Zmienia podstawowe wyświetlanie produktów - po najechaniu myszką na produkt pokazuje jego drugie w kolejności zdjęcie (Przydatne przy np. koszulkach ponieważ możemy pokazać przód i tył przed wejściem w produkt)
    Ścieżka pliku : product/tableofproducts.tpl
    zmieniamy
    Kod:
    <img src="{imageUrl type='productGfx' width=$skin_settings->img->medium height=$skin_settings->img->medium image=$product->mainImageName() overlay=1}" {$product->translation->name|escape}" /> 
    U mnie jest to linia 175

    Na:
    Kod:
     <img src="{imageUrl type='productGfx' width=$skin_settings->img->medium height=$skin_settings->img->medium image=$product->galleryImages.0->unic_name overlay=1}" {if $product->galleryImages|@count >= 2}onmouseover="this.src='{imageUrl type='productGfx' width=$skin_settings->img->medium height=$skin_settings->img->medium image=$product->galleryImages.1->unic_name overlay=1}'" onmouseout="this.src='{imageUrl type='productGfx' width=$skin_settings->img->medium height=$skin_settings->img->medium image=$product->galleryImages.0->unic_name overlay=1}'" {/if} alt="{$product->translation->name|escape}" /> 
     
    Mariusz lubi to.
  2. gabiec.pl

    gabiec.pl Spryciarz

    Wiadomości:
    48
    Docenione treści:
    32
    Witam
    Aby na liście produktów ( skórka RWD) po najechaniu na zdjęcie pojawiało się drugie z galerii wystarczy w user.css podać tylko kod:
    .products.viewphot{
    .product{
    .prodimage {
    span {
    position:relative;
    min-height: 200px;
    }
    &:hover{
    .replace-img-list{
    img{display:none}
    img.none{ display: block!important; position:relative; background:#fff; margin:0 auto; text-align: center;}
    }
    }
    }
    }
    }
     
    Marand, yankes, Mariusz oraz 1 dodatkowa osoba lubi tego posta.
  3. Trybun

    Trybun Początkujący

    Wiadomości:
    9
    Docenione treści:
    3
    Jakbym wiedział, że to takie proste.. :) Dziękuje za lepsze rozwiązanie
     
  4. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Hej, a czy jest możliwe, aby wyświetlało się trzecie zdjęcie w galerii po najechaniu myszki? :)
     
  5. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
  6. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Po ostatniej aktualizacji sklepu, zamiast pokazywać drugie zdjęcie z galerii pokazuje"pustkę", wcześniej działało OK. Może ktoś wie jak to przywrócić bo fajne było.
     
  7. flex

    flex Użytkownik

    Wiadomości:
    55
    Docenione treści:
    62
    Po ostatniej aktualizacji z kodu wyleciały dodatkowe zdjęcia więc CSS który był tu wcześniej zaproponowany już nie zadziała.

    Do podmiany drugiego zdjęcia będziecie musieli użyć kawałka kodu javascript

    Kod:
    
    Shop.include({
        selectorFunctions: {
            imgReplace: {
                selector: '[data-src][data-src-alt]',
                domready: function ($img) {
                    $img.on('mouseenter', function () {
                        $(this).attr('src', $(this).data('srcAlt'));
                    }).on('mouseleave', function () {
                        $(this).attr('src', $(this).data('src'));
                    });
                }
            }
        }
    });
    
    
    Dodatkowo musicie też wyrzucić wcześniejszy kod CSS który zarządzał Wam podmianą zdjęć.
     
    Marand lubi to.
  8. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Działa ! Dzięki @flex
     
  9. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Działa wam jakikolwiek powyższy kod? Chciałem ustawić, aby po najechaniu myszki na obrazek wyświetlał się 3 w kolejności obrazek i dupa...
     
  10. 1000plytek

    1000plytek Uczestnik

    Wiadomości:
    27
    Docenione treści:
    1
    Działa javascript

    ale mam prośbę
    czy możecie mi przerobić ten kod tak żeby po najechaniu wczytywał konkretne np 6 zdjęcie
     
  11. tomek567

    tomek567 Bywalec

    Wiadomości:
    16
    Docenione treści:
    1
    Cześć,

    Zrobiłem wszystko starannie tak ja jest to opisane wyżej i niestety nie działa. Nie wiem czy coś robię źle, czy może ten sposób już nie działa. Bardzo proszę Was o pomoc.
     
  12. Grzesiek

    Grzesiek Centrum Pomocy home.pl Administrator forum

    Wiadomości:
    3 555
    Docenione treści:
    325
    @tomek567 adres sklepu, opis problemu, co zmieniałeś, jak zmieniałeś, jaka skórka...
     
  13. tomek567

    tomek567 Bywalec

    Wiadomości:
    16
    Docenione treści:
    1
    www.3Dcard.pl, Wkleiłem podany tutaj kod CSS do Własny CSS, a następnie wkleiłem podany tutaj kod JS do własny skrypt JS zapisałem wszystko. Odświeżam stronę i nie ma żadnej reakcji. Skórka RDW
     
  14. tomek567

    tomek567 Bywalec

    Wiadomości:
    16
    Docenione treści:
    1
  15. tomek567

    tomek567 Bywalec

    Wiadomości:
    16
    Docenione treści:
    1
    Może ktoś inny potrafi mi pomóc?
     
  16. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Jeszcze raz, który dokładnie kod wkleiłeś :)
     
  17. tomek567

    tomek567 Bywalec

    Wiadomości:
    16
    Docenione treści:
    1
    Dzięki za odzew :)

    To tak to wrzuciłem do Własny skrypt JS wrzuciłem to:
    Kod:
    Shop.include({
        selectorFunctions: {
            imgReplace: {
                selector: '[data-src][data-src-alt]',
                domready: function ($img) {
                    $img.on('mouseenter', function () {
                        $(this).attr('src', $(this).data('srcAlt'));
                    }).on('mouseleave', function () {
                        $(this).attr('src', $(this).data('src'));
                    });
                }
            }
        }
    });
    Natomiast do Własny styl CSS wrzuciłem to:
    Kod:
    .products.viewphot{
    .product{
    .prodimage {
    span {
    position:relative;
    min-height: 200px;
    }
    &:hover{
    .replace-img-list{
    img{display:none}
    img.none{ display: block!important; position:relative; background:#fff; margin:0 auto; text-align: center;}
    }
    }
    }
    }
    }
    zapisałem oczywiście, odświeżałem stronę, czyściłem cookies i nic żadnej reakcji.
     
  18. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Tego CSSa wywal i sprawdź
     
  19. tomek567

    tomek567 Bywalec

    Wiadomości:
    16
    Docenione treści:
    1
    Na wszystkie sposoby już próbowałem, nie działa ;/
     
  20. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    ok dziś postaram się to sprawdzić czemu nie działa.
     

Poleć forum znajomym