Hi.
Habe das Modul gestern erfolgreich eingebaut. Es funktioniert einwandfrei.
Ich habe dennoch kleine Änderung vorgenommen.
Für die, die es interessiert:
Ich wollte, dass die Bilder sich nicht beim überfahren mit der Maus ändern, sondern beim klick darauf, also habe ich folgendes gemacht:
in der
templates/YOURTEMPLATE/javascript/general.js.phpAn Stelle von:
$(".morepics img").mouseover(function() {
if ($(this).hasClass("active")) { return; }
var url = $(this).attr("src").replace("thumbnail_images", "info_images");
var wrap = $(".product_pic");
var img = new Image();
img.onload = function() {
wrap.fadeTo("medium", 1);
wrap.find("img").attr("src", url);
};
img.src = url;
$("#pic").attr("href", url.replace("info_images", "popup_images"));
$(".morepics img").removeClass("active");
$(this).addClass("active");
})
Habe ich:
$(".morepics img").click(function() {
if ($(this).hasClass("active")) { return; }
var url = $(this).attr("src").replace("info_images", "popup_images");
var wrap = $(".product_pic");
var img = new Image();
img.onload = function() {
wrap.fadeTo("medium", 1);
wrap.find("img").attr("src", url);
};
img.src = url;
$("#pic").attr("href", url.replace("info_images", "popup_images"));
$(".morepics img").removeClass("active");
$(this).addClass("active");
})
eingesetzt.
Also einfach nur
.mouseover durch
.click ersetzt
Ausserdem lasse ich mir anstelle der info_image das popup_image anzeigen, was wie ich finde für mich besser ist.
Zu ändern im Modulscript:
var url = $(this).attr("src").replace("thumbnail_images", "info_images");
durch
var url = $(this).attr("src").replace("info_images", "popup_images");
ersetzen.
desweiteren in der
templates/YOURTEMPLATE/module/product_info/product_info_tabs_v1.htmlca. Zeile 9
Suchen:
src="{$PRODUCTS_IMAGE}"
ersetzen mit
src="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"
Da jetzt zum einen aber immernoch beim klick auf eines der Bilder die fancybox geöffnet wird, welche ich nicht brauche, da ich ja schon die großen Bilder anzeigen lasse, könnte ich sie ja ganz einfach entfernen, ABER HALT!!!
Es gibt Leute, die n Ihren Browsern Javascript deaktiviert haben.
Sollte dies der Fall sein und man hat auch noch die Fancybox oder von mir aus auch die Thickbox entfernt, funktioniert bei denen weder der Bildwechsel, noch bekommen sie die Bilder in Groß angezeigt.
Also habe ich folgendes gemacht. Wenn javascript bei den Besuchern aktiviert ist, funktioniert der Bildwechsel, und die Fancybox öffnet sich wie gewünscht NICHT.
Sollte ein Besucher aber Javascript deaktiviert haben, funktioniert der Bildwechsel nicht, dafür erscheint beim klick auf eines der Bilder allerdings die große popup Vorschau des Bildes in einem neuen Fenster.
Folgendes ist dafür zu tun:
in der
templates/YOURTEMPLATE/module/product_info/product_info_tabs_v1.htmlsuchen:
{foreach item=more_images_data from=$more_images}
und direkt darunter:
<!-- Javascript True -->
<script>
document.write("<a rel='{$PRODUCTS_ID}' title='{$PRODUCTS_NAME}' ><img align='left'src='{$more_images_data.PRODUCTS_IMAGE}' alt='{$PRODUCTS_NAME}' /></a>");
</script>
<!-- Javascript false -->
<noscript>
<a rel="{$PRODUCTS_ID}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"|replace:"_0":"_1"}" title="{$PRODUCTS_NAME}" ><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
</noscript>
einfügen:
Diese Änderungen beziehen sich jetzt auf mein Template, was teilweile schon vorher bearbeitet wurde und möglicherweise etwas anders aussieht als bei euch, aber ich denke bzw. hoffe, dass es nicht all zu schwer nachzuvollziehen ist.
ich hoffe ich habe nichts vergessen.
Viel Spass