Thema: MODUL: Mouseover bei den Bildern im product_listing

Markus · **am:** 03. Januar 2012, 20:46:43

Hi ...

da das anscheinend mehrere immer wieder suchen hier mal eine relativ einfache Lösung für eine vergrößerte Bildvorschau in den Produktlisten.

Das ganze basiert auf diesem Script hier: Easiest Tooltip and Image Preview Using jQuery (Example 3)
Einfach das ganze herunterladen und entpacken.

Der Einbau ist relativ einfach:
Aus dem Ordner "03" die "main.js" in das Verzeichnis "/templates/<dein-template>/javascript/" hochladen

Jetzt noch ein paar Anpassungen:

"/templates/<dein-template>/javascript/general.js.php"

suche:

Code: PHP [Auswählen]

danach einfügen:

Code: PHP [Auswählen]

"/templates/<dein-template>/stylesheet.css"

ganz am Ende folgendes einfügen und bei Bedarf nach den eigenen Wünschen anpassen:

Code: CSS [Auswählen]

#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

und jetzt noch die Templatedateien:

"/templates/<dein-template>/module/product_listing/product_listing_v1.html"

suche:

Code: PHP [Auswählen]

<td align="center" class="productPreviewImage">{if $module_data.PRODUCTS_IMAGE!=''}<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" class="productImageBorder" /></a>{else} {/if}</td>

ersetze mit:

Code: PHP [Auswählen]

<td align="center" class="productPreviewImage">{if $module_data.PRODUCTS_IMAGE!=''}<a href="{$module_data.PRODUCTS_LINK}" class="screenshot" rel="{$module_data.PRODUCTS_IMAGE|replace:"thumbnail_images":"info_images"}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" class="productImageBorder" /></a>{else} {/if}</td>

Wer möchte kann das "info_images" auch durch "popup_images" ersetzen.

Und wer das auch noch in den anderen 3 Listing-Dateien möchte muss die 3 Dateien exakt genauso anpassen:
"/templates/<dein-template>/module/new_products.html"
"/templates/<dein-template>/module/new_products_default.html"
"/templates/<dein-template>/module/new_products_overview.html"

Anbei noch ein Screenshot ... und viel Spaß damit.

Markus

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

Toby · **Antwort #1 am:** 04. Januar 2012, 08:35:29

Hi,
habe ich gerade eingebaut, funktioniert prima!
Kann man irgendwie die Grösse der Vorschaubilder einstellen?

Vielen Dank

jannemann · **Antwort #2 am:** 04. Januar 2012, 09:04:03

Hallo Toby,

die Größe der Bilder bestimmt der Shop. Schau mal bei dir im Backend, welche Werte du für die Popup, Info- und Thumbnails eingestellt hast. Ansonsten vielleicht noch das versuchen:

Zitat von: Markus am 03. Januar 2012, 20:46:43

[...]
Wer möchte kann das "info_images" auch durch "popup_images" ersetzen.
[...]

Schöne Grüße,
Jan

Toby · **Antwort #3 am:** 04. Januar 2012, 09:48:57

Hmm, gibt es vielleicht noch eine weitere Möglichkeit? Zum Beispiel die "/popup_images/2" oder so?
Bei mir nimmt er die Werte für die "info_images" nicht, auch wenn ich sie im Backend verändere. Die Bilder haben dann immer eine Breite von 220px. Die "popup_images" sind leider etwas zu gross.

jannemann · **Antwort #4 am:** 04. Januar 2012, 09:52:56

Wenn du die Werte veränderst, dann musst du nochmal das "XT-Imageprocessing" durchlaufen lassen.

Toby · **Antwort #5 am:** 04. Januar 2012, 10:14:43

Achso ok.

Tomcraft · **Antwort #6 am:** 04. Januar 2012, 16:38:49

Danke für das tolle Modul!

Grüße

Torsten

Fatau · **Antwort #7 am:** 07. Januar 2012, 17:46:18

Bei mir ist natürlich wieder alles anders ... altes xt:Commerce Template ...
Vielleicht sollte ich mir doch die Mühe machen ein neues Tempalte zu installieren ...
Mein Code sieht in der "product_listing" wie folgt aus:

Code: PHP [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
<h2>{$CATEGORIES_NAME}</h2>
<h3>{$CATEGORIES_HEADING_TITLE}</h3>
{if $CATEGORIES_DESCRIPTION}<br />
{$CATEGORIES_DESCRIPTION}{/if}<br />{if $CATEGORIES_IMAGE}<img src="{$CATEGORIES_IMAGE}" alt="{$CATEGORIES_NAME}" />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-bottom: 1px solid; border-color: #000000;"> </td>
</tr>
</table>
{/if}
{if $MANUFACTURER_DROPDOWN}<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="main" align="right"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="main" align="right">{#text_show#} </td>
<td class="main" align="right">{$MANUFACTURER_DROPDOWN}</td>
</tr>
</table> </td>
</tr>
</table>
<br />
{/if}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-top: 2px solid; border-color: #d4d4d4;">
{foreach name=aussen item=module_data from=$module_content}
<tr>
<td rowspan="2" style="border-bottom: 1px solid; border-color: #cccccc;"> {if $module_data.PRODUCTS_IMAGE!=''}<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>{/if}
{if $module_data.PRODUCTS_FSK18=='true'}<br /><img src="{$tpl_path}img/fsk18.gif" alt="" />{/if}</td>
<td align="left" class="main"><a href="{$module_data.PRODUCTS_LINK}"><strong>{$module_data.PRODUCTS_NAME}</strong></a></td>
</tr>
<tr>

<td align="left" class="main" style="border-bottom: 1px solid; border-color: #cccccc;">{$module_data.PRODUCTS_SHORT_DESCRIPTION}
<br />
<strong>{$module_data.PRODUCTS_PRICE} </strong><br />
{$module_data.LAGER_AMPEL}<br>
{$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK}
{if $module_data.PRODUCTS_VPE}<br />{$module_data.PRODUCTS_VPE}{/if}
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right"><table width="200" border="0">
<tr>
<td align="right">{if $module_data.PRODUCTS_SHIPPING_NAME}
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td class="main">{#text_shippingtime#}</td>
{if $module_data.PRODUCTS_SHIPPING_IMAGE}
<td><img src="{$module_data.PRODUCTS_SHIPPING_IMAGE}" alt="{$module_data.PRODUCTS_SHIPPING_NAME}" /></td>
{/if}
<td class="main">{$module_data.PRODUCTS_SHIPPING_NAME}</td>
</tr>
</table>
{/if}
{$module_data.PRODUCTS_BUTTON_BUY_NOW}</td>
</tr>
</table></td>
</tr>
</table> </td>
</tr>
{/foreach}
</table>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>{$NAVIGATION}</td>
</tr>
</table>

2 Fragen:

1.) Wie kopiere ich einen Code vom Forum ohne die Zeilennummer mit zu ziehen?

2.) Könnte mir bitte jemand den Code für mich entsprechend anpassen.

Tomcraft · **Antwort #8 am:** 07. Januar 2012, 17:59:35

So hier:

Code: PHP [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
<h2>{$CATEGORIES_NAME}</h2>
<h3>{$CATEGORIES_HEADING_TITLE}</h3>
{if $CATEGORIES_DESCRIPTION}<br />
{$CATEGORIES_DESCRIPTION}{/if}<br />{if $CATEGORIES_IMAGE}<img src="{$CATEGORIES_IMAGE}" alt="{$CATEGORIES_NAME}" />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-bottom: 1px solid; border-color: #000000;"> </td>
</tr>
</table>
{/if}
{if $MANUFACTURER_DROPDOWN}<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="main" align="right"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="main" align="right">{#text_show#} </td>
<td class="main" align="right">{$MANUFACTURER_DROPDOWN}</td>
</tr>
</table> </td>
</tr>
</table>
<br />
{/if}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-top: 2px solid; border-color: #d4d4d4;">
{foreach name=aussen item=module_data from=$module_content}
<tr>
<td rowspan="2" style="border-bottom: 1px solid; border-color: #cccccc;"> {if $module_data.PRODUCTS_IMAGE!=''}<a href="{$module_data.PRODUCTS_LINK}" rel="{$module_data.PRODUCTS_IMAGE|replace:"thumbnail_images":"info_images"}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>{/if}
{if $module_data.PRODUCTS_FSK18=='true'}<br /><img src="{$tpl_path}img/fsk18.gif" alt="" />{/if}</td>
<td align="left" class="main"><a href="{$module_data.PRODUCTS_LINK}"><strong>{$module_data.PRODUCTS_NAME}</strong></a></td>
</tr>
<tr>

<td align="left" class="main" style="border-bottom: 1px solid; border-color: #cccccc;">{$module_data.PRODUCTS_SHORT_DESCRIPTION}
<br />
<strong>{$module_data.PRODUCTS_PRICE} </strong><br />
{$module_data.LAGER_AMPEL}<br>
{$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK}
{if $module_data.PRODUCTS_VPE}<br />{$module_data.PRODUCTS_VPE}{/if}
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right"><table width="200" border="0">
<tr>
<td align="right">{if $module_data.PRODUCTS_SHIPPING_NAME}
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td class="main">{#text_shippingtime#}</td>
{if $module_data.PRODUCTS_SHIPPING_IMAGE}
<td><img src="{$module_data.PRODUCTS_SHIPPING_IMAGE}" alt="{$module_data.PRODUCTS_SHIPPING_NAME}" /></td>
{/if}
<td class="main">{$module_data.PRODUCTS_SHIPPING_NAME}</td>
</tr>
</table>
{/if}
{$module_data.PRODUCTS_BUTTON_BUY_NOW}</td>
</tr>
</table></td>
</tr>
</table> </td>
</tr>
{/foreach}
</table>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>{$NAVIGATION}</td>
</tr>
</table>

Zitat von: Fatau am 07. Januar 2012, 17:46:18

[...]
1.) Wie kopiere ich einen Code vom Forum ohne die Zeilennummer mit zu ziehen?
[...]

Gegenfrage: Wie schaffst du es den Code so zu kopieren, dass die Zeilennummern enthalten sind?

Grüße

Torsten

Fatau · **Antwort #9 am:** 07. Januar 2012, 18:18:24

Passt, DANKE!

Du hast da wirklich ein tolles Forum, mit spitzen Support!

Keine Ahnung, ich markiere, Str+C und drin sind die Zeilennummern ...

Tomcraft · **Antwort #10 am:** 07. Januar 2012, 18:27:49

Danke für das Kompliment.

Mit welchem Browser kopierst du denn den Code?

Grüße

Torsten

Fatau · **Antwort #11 am:** 07. Januar 2012, 18:43:35

IE 9

aber jetzt bin ich gleich ganz verwegen, da das Mousoverteil wirklich vom feinsten ist ...

Würde es auch gerne in der "product_info" einbauen.

Mein Codestückerl ...

Code: PHP [Auswählen]

<tr>
<td>{if $PRODUCTS_IMAGE!=''}<a href="{$PRODUCTS_POPUP_LINK}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>{/if}</td>
</tr>

Würdest du dir bitte nochmals die Mühe machen.

Tomcraft · **Antwort #12 am:** 07. Januar 2012, 18:55:00

Das Modul hier ist dafür nicht gedacht.

Was du suchst ist folgendes: MODUL: Cloud Zoom als Alternative zu MagicZoom

Grüße

Torsten

Fatau · **Antwort #13 am:** 07. Januar 2012, 19:11:45

Na dann an die Arbeit ...

Danke und einen schönen Abend!

lg
Manfred

Tomcraft · **Antwort #14 am:** 08. Januar 2012, 15:56:26

Zitat von: Fatau am 07. Januar 2012, 17:46:18

[...]
1.) Wie kopiere ich einen Code vom Forum ohne die Zeilennummer mit zu ziehen?
[...]

Hierzu ist mir noch folgendes eingefallen:

Du musst die Markierung natürlich innerhalb des Code-Kästchens anfangen und nicht außerhalb, denn sonst wird der Text "Code: PHP" mit eingeschlossen, sowie die Zeilennummern!

Grüße

Torsten

Thema: MODUL: Mouseover bei den Bildern im product_listing

Markus

MODUL: Mouseover bei den Bildern im product_listing

Toby

Re: MODUL: Mouseover bei den Bildern im product_listing

jannemann

Re: MODUL: Mouseover bei den Bildern im product_listing

Toby

Re: MODUL: Mouseover bei den Bildern im product_listing

jannemann

Re: MODUL: Mouseover bei den Bildern im product_listing

Toby

Re: MODUL: Mouseover bei den Bildern im product_listing

Tomcraft

Re: MODUL: Mouseover bei den Bildern im product_listing

Fatau

Re: MODUL: Mouseover bei den Bildern im product_listing

Tomcraft

Re: MODUL: Mouseover bei den Bildern im product_listing

Fatau

Re: MODUL: Mouseover bei den Bildern im product_listing

Tomcraft

Re: MODUL: Mouseover bei den Bildern im product_listing

Fatau

Re: MODUL: Mouseover bei den Bildern im product_listing

Tomcraft

Re: MODUL: Mouseover bei den Bildern im product_listing

Fatau

Re: MODUL: Mouseover bei den Bildern im product_listing

Tomcraft

Re: MODUL: Mouseover bei den Bildern im product_listing

Teile Thema

Ähnliche Themen

Modul Produkterinnerung in product_listing

Modul in product_listing einbinden

Mouseover ( bei Kategorien)

Mouseover Navimenü