bild vergrößern bei mouseover

  • Hallo zusammen,


    weiß jemand wie ich das am besten löse, wenn ich in der artikelübersicht ein mouseover auf ein artikelbild mache, dass dann ein vergrößertes bild eingeblendet wird?
    vielleicht gibt es ja diese Funktion bereits?

  • Die oben erwähnte Lösung als Code:

    Code
    1. {if count($product->images) > 1}
    2. {foreach from=$product->images item=image}
    3. <img src="{$product->productImage($image, 'thumbnail', $product->data.products_owner)}" alt="{$product->data.products_name}" />
    4. {/foreach}
    5. {/if}

    würde alle Bilder als Thumbnail anzeigen. Wenn man den Parameter mit

    PHP
    1. info

    ersetzt wären es die Info Bilder. Und

    PHP
    1. popup

    liefert die großen Bilder.


    Man kann aber auch einfach hingehen und


    Smarty
    1. {$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}

    verwenden und den Pfad direkt auf das PopUp Bild setzen.

  • Hallo,


    hier mal mein Quelltext Produktbild mit Hoover
    und Auflistung aller Produktbilder unter dem Hauptbild mit Hoover.


    Smarty
    1. <!-- Hover ueber das Produktbild zu popup Groesse // -->
    2. <img src="{$PRODUCTS_IMAGE}" alt="{$product->data.products_name}" onmouseover="src='{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}'" onmouseout="src='{$PRODUCTS_IMAGE}'" />
    3. <!-- Auflistung aller Produktbilder unter Hauptbild // -->
    4. {if count($product->images) > 1}
    5. {foreach from=$product->images item=image}
    6. <img src="{$product->productImage($image, 'thumbnail', $product->data.products_owner)}" alt="{$product->data.products_name}" onmouseover="src='{$product->productImage($image, 'popup', $product->data.products_owner)}'" onmouseout="src='{$product->productImage($image, 'thumbnail', $product->data.products_owner)}'" />
    7. {/foreach}
    8. {/if}


    Leider werden die weiteren Poruktbilder alle untereinander und nicht nebeneinander angezeigt.
    Und die Breite des Div's in meinem template sollte mit 460px eigentlich ausreichen.


    Der zweite Tip von Lunte mit dem class="zoom" hat so leider nicht funktioniert oder lustige Erscheinungen erzeugt.
    Die Bilder wurden erst groß und dann wieder etwas kleiner. Nach ende des Hovern wurden sie erst kleiner und dann langsam wieder etwas größer ;(

  • Das Mouseover wollte ich nun auch in der Kategorieansicht einbauen.


    In der product_listing.html also von

    Smarty
    1. <div class="img">
    2. <a href="{$data.product->link}" title="{$data.product->data.products_name}">
    3. <img src="{$data.PRODUCTS_IMAGE}" alt="{$data.product->data.products_name}" />
    4. </a>
    5. </div>


    auf

    Smarty
    1. <div class="img">
    2. <a href="{$data.product->link}" title="{$data.product->data.products_name}">
    3. <img src="{$data.PRODUCTS_IMAGE}" alt="{$data.product->data.products_name}" onmouseover="src='{$data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}'" onmouseout="src='{$data.PRODUCTS_IMAGE}'"
    4. </a>
    5. </div>

    geändert.


    Hier funktioniert das replace aber nicht.

  • Da hatte ich mich anfänglich auch gewundert, warum es immer untereinander aufläuft. Das liegt daran, dass die Breite des Div Containers vom ersten Bild und dem Button (Mehr Bilder) fest definiert ist. Die "Galerie" muss im Quelltext unterhalb der Kernartikeldaten (Preis, Gewicht etc) stehen.


    Ich habe heute meinen Arbeitslaptop für die Websachen leider zu Hause vergessen, kann deswegen nicht genau schauen. Das ist nur aus der Erinnerung heraus geschrieben.

  • würde alle Bilder als Thumbnail anzeigen. Wenn man den Parameter mit

    PHP
    1. info

    ersetzt wären es die Info Bilder. Und

    PHP
    1. popup

    liefert die großen Bilder.

    In den Listen wirst du wohl, soweit wie ich es erahnen kann, das hier nehmen müssen, denke ich.
    Und dann das thumbnail durch info popup ersetzen müssen.


    Smarty
    1. <img src="{$product->productImage($image, 'thumbnail', $product->data.products_owner)}" alt="{$product->data.products_name}" />
  • Wenn ich das image in der Liste nicht durch info ode rpopup ersetzen möchte sondern duch das Originalbild, hatte ich jetzt 'original' genommen. Das hatte aber keine Auswirkung.
    thumbnail, info und popup brachten das erwartete Ergebnis.


    Zitat

    original

    kann so nicht aufgerufen werden, Du kannst aber mit replace den zurückgegebenen Pfad ersetzen.