Magic Zoom und/oder jQZoom für modified eCommerce Shopsoftware

[peterpan19]

Ich habe etwas dazu gefunden, passt aber nicht so ganz:
ANLEITUNG: Popup bei Klick des Bildes im product_listing
So weit, so gut, aber besser wäre diese Funktion mit mouseover zu realisieren, ist in vielen Shops schon Standard.
Wie müsste der Code dafür geändert werden?
Gruß

[peterpan19]

Ich habe da etwas gefunden, funktioniert allerdings nicht 100%ig.
Basiert auf css. Quelle: Bild vergrößern mit Mouseover
Vielleicht kann das ja mal jemand auf modified eCommerce Shopsoftware anpassen, versuche es schon den ganzen vormittag, aber wie so oft reichen meine Kenntnisse nicht 
Habs auch nur lokal zum Test, 2 spalten Layout. IE und Firefox funktionieren, Chrome nicht. Das Layout wird aber bei mouseover komplett verschoben. Hier ist dann noch feintuning nötig.

In der product_listing_v1.html ändern wie folgt:

Code: PHP  [Auswählen]

                {if $module_data.PRODUCTS_IMAGE!=''}
                                <a title="{$module_data.PRODUCTS_NAME}" href="{$module_data.PRODUCTS_IMAGE|replace:"thumbnail_images":"popup_images"}" class="imageHold" rel="{$module_data.PRODUCTS_ID}">
                                <img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}"  /></a>            
                    {else}
                        <strong>Kein Bild vorhanden!</strong>
                {/if}

Stylesheet erweitern mit:

Code: CSS  [Auswählen]

.imageHold {
  padding: 55px 85px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}

.imageHold div {
  float: left;
  width: 230px;
  height: 150px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 50px;
}

.imageHold img {
  width: 230px;  /* wir skalieren das große bild auf die kleine größe */
  height: 150px; /* um verpixelung beim vergößern zu verhindern       */
}

.imageHold img:hover {
  position: absolute;
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -55px;  /* hier genau so */
  width: 400px;       /* die weite beim vergrößern */
  height: 260px;      /* die höhe beim vergrößern */
}

[peterpan19]

Wer suchet, der findet: MODUL: Mouseover bei den Bildern im product_listing
PERFEKT!!! 
Gruß

[fresh_prince]

Hallo allerseits,

ich betreue momentan diesen Shop. Ich wurde gebeten, eine Zoomfunktion für Artikelbilder einzubauen. Ich wollte das ganze mit jqZoom verwirklichen und habe mich an diese Anleitung gehalten, aber leider hat es nicht funktioniert.

Liegt das vielleicht daran, dass ich die neueste Version von jqZoom benutzt habe und die Anleitung etwas älter ist? Ich habe die Dateinamen natürlich entsprechend angepasst.

Das Plugin habe ich von dieser Seite: http://www.myjqueryplugins.com/jquery-plugin/jqzoom

Hoffe jemand hat einen Lösungsansatz.

EDIT: Was ich vergessen habe, zu erwähnen: Die Produktinfo funktioniert nicht mehr, sobald ich bei product_info_v1.html alle "thickbox" durch "thickbox jqzoom" ersetze.

[Tomcraft]

Versuch es mal hiermit: MODUL: jQZoom für modified eCommerce Shopsoftware
Dort sind die erforderlichen Dateien gleich mit angehängt.

Grüße

Torsten

[fresh_prince]

Danke für die Antwort. Da ist halt nur die .js-Datei drin, die .css zum Beispiel fehlt. Ich habe es testweise trotzdem mal in Verbindung mit der .css vom neuen jqZoom versucht, bin aber nicht weiter gekommen.

Vielleicht setze ich das ganze Template nochmal neu auf, um Konfigurationsfehler auszuschließen. Ich bin halt nicht der erste, der da dran rumbastelt.

[Tomcraft]

Ich hatte das auch schon einmal eingebaut und dabei eigentlich keinerlei Probleme gehabt.

Alternativ kannst du dir auch folgendes Modul anschauen: MODUL: Cloud Zoom als Alternative zu MagicZoom

Grüße

Torsten