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

@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

Code:

<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:

Code:

 <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}" /> 

 

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

 

Jakbym wiedział, że to takie proste.. Dziękuje za lepsze rozwiązanie

 

Hej, a czy jest możliwe, aby wyświetlało się trzecie zdjęcie w galerii po najechaniu myszki?

 

image=$product->galleryImages.1
zmień na:
image=$product->galleryImages.2

https://forum.home.pl/threads/table...ze-lub-drugie-zdjecie-produktu.664/#post-3896

 

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.

 

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

Code:

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ęć.

 

Działa ! Dzięki @flex

 

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...

 

Działa javascript

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

 

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.

 

@tomek567 adres sklepu, opis problemu, co zmieniałeś, jak zmieniałeś, jaka skórka...

 

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

 

@Grzesiek Poradzisz coś?

 

Może ktoś inny potrafi mi pomóc?

 

Jeszcze raz, który dokładnie kod wkleiłeś

 

Dzięki za odzew

To tak to wrzuciłem do Własny skrypt JS wrzuciłem to:

Code:

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:

Code:

.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.

 

Tego CSSa wywal i sprawdź

 

Na wszystkie sposoby już próbowałem, nie działa ;/

 

ok dziś postaram się to sprawdzić czemu nie działa.