Artikelbild bei Maus-Hover in Artikelbild 1 ändern

[V-Pixel]

Hallo liebe Kollegen,
gibt es eine Möglichkeit dass in der product_listing beim Hover über ein Produkt, das Artikelbild in Artikelbild 1 geändert wird?

Es ist so dass wir immer ein Gesamtbild als Artikelbild verwenden. Und das Artikelbild 1 ist dann ein Detailfoto. Beim Hovern würde es dann direkt das Detailbild anzeigen.

Wäre eine solche Änderung aufwendig? Es geht um die aktuellste 2.0er Version.

Danke vorab für Eure Unterstützung.

Linkback: https://www.modified-shop.org/forum/index.php?topic=35685.0

[Bonsai]

hmmmmm ..... mit Jquery sollte recht einfach zu lösen sein. hier ein Beispiel für ein einziges Bild:
http://stackoverflow.com/questions/540349/change-the-image-source-on-rollover-using-jquery

Jetzt müsstest Du nur den Bildern eine ID als Array geben, also im HTML das:

Code: XML  [Auswählen]

<img id="img_arr[]" src= .... />

und dann daraus den Eventhandler basteln. Der kann dann einfach 50_0.jpg durch 50_1.jpg ersetzen. ACHTUNG! Funktioniert nur so einfach, wenn IMMER ein Dateityp Bilder benutzt wird! Also nicht 50_0.jpg und 50_1.png !!! In dem Fall wird es wesentlich komplexer!

[noRiddle (revilonetz)]

An das zweite Bild kommst du
- insofern alles was die Bilder betrifft noch Original ist -
ganz einfach so heran:

Code: XML  [Auswählen]

{$module_data.PRODUCTS_IMAGE|replace:'_0':'_1'}

Javascript oder jQuery ist eigtl. nicht nötig da man mittels :hover auch mit lediglich CSS einiges machen kann, inkl. Effekte mit CSS3.
Das :hover auf den umgebenden Container .lb_image anwenden und dem Befehl ggfls. ein !important mitgeben, da die unveil-Funktion den images einen inline-style mitgibt.

Gruß,
noRiddle

[h-h-h]

einfach mal ein paar Codeschnipsel

Code: Javascript  [Auswählen]

    $(".no-touch .listing .item-image-alt").mouseenter(function() {
        $( this ).attr('src', $( this ).data('hover-img'));
    }).mouseleave(function() {
        $( this ).attr('src', $( this ).attr('data-src'));
    });

Code: XML  [Auswählen]

{assign var="img_two" value="`$smarty.const.DIR_FS_CATALOG`images/product_images/thumbnail_images/"|cat:$module_data.PRODUCTS_IMAGE|replace:'_0.':'_1.'}
{if file_exists($img_two)} item-image-alt" data-hover-img="{$module_data.PRODUCTS_IMAGE|replace:'_0.':'_1.'}{/if}
 

https://www.modified-shop.org/forum/index.php?topic=15376.0

Gruß, h-h-h

[noRiddle (revilonetz)]

Ohne Javascript (und somit fallback-sicher) viel einfacher (am Beispiel Standard-Template), in
/templates/tpl_modified/module/includes/product_listing_include.html
das zweite Bild vor dem ersten hinzufügen und dem zweiten eine weitere Klasse (z.B. frst-img) vergeben:

Code: XML  [Auswählen]

<div class="lb_image">
    {if $module_data.PRODUCTS_IMAGE != ''}
    <a href="{$module_data.PRODUCTS_LINK}">
        <img class="unveil" src="{$tpl_path}css/images/loading.gif" data-src="{$module_data.PRODUCTS_IMAGE|replace:'_0':'_1'}" alt="{$module_data.PRODUCTS_NAME|onlytext}" />
        <img class="unveil frst-img" src="{$tpl_path}css/images/loading.gif" data-src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" />
    </a>
    <noscript>
        <a href="{$module_data.PRODUCTS_LINK}">
            <img src="{$module_data.PRODUCTS_IMAGE|replace:'_0':'_1'}" alt="{$module_data.PRODUCTS_NAME|onlytext}" />
            <img class="frst-img" src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" />
        </a>
    </noscript>
    {else}
    &nbsp;
    {/if}
</div>

Im CSS bei .lb_image img { hinzufügen:

Code: CSS  [Auswählen]

.lb_image img {
...
opacity:1;
transition:all .5s ease-in-out;
}

und darunter:

Code: CSS  [Auswählen]

.lb_img:hover .frst-img {
opacity:0;
visibility:hidden;
}
}

Gruß,
noRiddle

[h-h-h]

nice noRiddle,
doch was ist mit dem iPad (2 clicks für's öffnen des Artikels)?
Hast du meine Mail bekommen?

LG, h-h-h

[noRiddle (revilonetz)]

iPad ??, watt'n datt ?
Jau, da müsste eine Alternative für Touch-Screens her.
Man muß sich dann halt überlegen ob man auf das Erscheinen des zweiten Bildes auf Touch-Geräten verzichten möchte. Wenn dem so ist kann man es auf Touch-Devices so abfangen:

Code: Javascript  [Auswählen]

if ("ontouchstart" in document.documentElement) {
    document.documentElement.className += " istouch";
}

und im CSS dann

Code: CSS  [Auswählen]

.lb_img:not(.istouch):hover .frst-img {
opacity:0;
visibility:hidden;
}

Nicht getestet !

Jau, Mail wird gleich beantwortet.

Gruß,
noRiddle

[h-h-h]

Der Vollständigkeit halber, wobei ich mir gerade nicht sicher bin, ob es nicht nur mit .no-touch und removeClass auf dem iPad funktioniert.

Code: Javascript  [Auswählen]

$(document).ready(function(){
    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        $('.lb_img').addClass('is-touch');
    }
});
 

[demoncleaner]

War super hilfreich für mich der Beitrag. Danke.
Kleinen Fehler hab ich grad in der CSS Version gefunden:

Code: PHP  [Auswählen]

.lb_img:hover .frst-img
 

funktioniert nicht. Es muss

Code: PHP  [Auswählen]

.lb_image:hover .frst-img
 

lauten.