Artkelbild Wechsel nach Klick auf more_pictures in product_info.html

[robertko]

Hi.
Momentan ist es so, dass sich bei Klick auf ein weiteres Artikelbild sich die thickbox öffnet und mir die vergrößerte Version des Bildes anzeigt.
Das ist zwar ganz toll, aber ich hätte das gern etwas anders.

Wäre es möglich, dass sich nach dem Klick auf ein weiteres Bild, sich das Bild, was standardmäßig in der product_info.html angezeigt wird ändert?
Also ohne thickbox oder fancybox, sondern an der Stelle an der wo PRODUCT_IMAGE steht soll dann das jeweils ausgewählte erscheinen.
Das wäre klasse.

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

[robertko]

Keiner ne Idee?

[Matt]

Doch. Einfach das src-Attribut tauschen. Hast du bestimmt schon probiert und bis in Probleme gelaufen, oder?

[robertko]

Wie meinst du das, tauschen???

Ich suche im netz krampfhaft nach ner Lösung. JavaScript oder php, aber alles was ich finde kann ich nicht umsetzten, da in diesen Beispielen immer eine vordefinierte Menge an Bildern und vorgegeben ist.
In der product_info wird aber erst durch {foreach} soetwas gemacht.

Daher weiß ich nicht wie ich die Code Beispiele einbauen kann.

[robertko]

Ich suche quasi soetwas hier.

http://www.web-toolbox.net/webtoolbox/bilder/01-bildvorschau/bildvorschau04.htm

[awids]

MODUL: Bilderwechsel mit jQuery in der product_info.html

[Matt]

Irgendwie war mir klar, dass es für so ein einfaches Problem schon von irgendwem ne Lösung gibt.
Hätte ich mir die Fingerübung sparen können: http://ladeze.it/product_info.php?products_id=3

Aber das Beispiel von robertko ist eher für die Tonne, weil wie schon festgestellt null Flexibilität vorhanden ist.

[awids]

Warum das Rad neu erfinden?

Die anderen Bilder kann man sicher auch noch direkt unter das Hauptbild bauen, anstatt sie unter die Beschreibung zu setzen, die Miniaturgrößen und das Aussehen anpassen und schon siehts aus wie bei den anderen Shops.

[robertko]

Mein Beispiel sollte auch nur die Funktion zeigen.
Ich werde mir eure Vorschläge mal anschauen.

Danke erstmal.

Komisch, dass ich das Modul über dich Suche nicht gefunden hab.

[robertko]

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.php
An Stelle von:

Code: Javascript  [Auswählen]

$(".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:

Code: Javascript  [Auswählen]

$(".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:

Code: Javascript  [Auswählen]

var url = $(this).attr("src").replace("thumbnail_images", "info_images");

durch

Code: Javascript  [Auswählen]

var url = $(this).attr("src").replace("info_images", "popup_images");

ersetzen.
desweiteren in der
templates/YOURTEMPLATE/module/product_info/product_info_tabs_v1.html
ca. Zeile 9
Suchen:

Code: PHP  [Auswählen]

src="{$PRODUCTS_IMAGE}"

ersetzen mit

Code: PHP  [Auswählen]

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.html
suchen:

Code: PHP  [Auswählen]

{foreach item=more_images_data from=$more_images}

und direkt darunter:

Code: PHP  [Auswählen]

<!-- 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

[noRiddle (revilonetz)]

Ich mag mich irren, denn ich hab's nicht explizit getestet, aber mir scheint das hier alles zu aufgeblasen.
Hier habe ich eine Kurzversion gepostet.
Dort fehlt lediglich noch der Austausch des Links für das Popup nachdem das Hauptbild gewechselt wurde, für den der es benötigt.
Das ist aber leicht hinzuzufügen.

Gruß,
noRiddle

[Matt]

So ähnlich sieht mein Code auch aus, allerdings ohne das angeklickte Bild auf das bisherige Hauptbild zu ändern. Bei dir fehlt aber noch ein

Code: Javascript  [Auswählen]

return false;

, damit dem Link nicht gefolgt wird.

[noRiddle (revilonetz)]

Okay, dann aber das korrektere event.preventDefault.

Gruß,
noRiddle

[robertko]

Mag sein, dass das zu aufgeblasen ist. Ich bin mir auch sicher das es eine bessere und einfachere Lösung dafür gibt, aber dafür das ich weder von php noch von JavaScript verstehe, denke ich, dass ich mir das relativ gut zusammengeschustert habe.
Außerdem war das meine erste Anleitung.
Bitte um Gnade!

[noRiddle (revilonetz)]

So war's nicht gemeint, wir wissen zu schätzen, daß du deine Implementation mit der Community teilst,
im Gegensatz zu manch Anderem der Hilfe sucht, Leute beschäftigt und dann lapidar schreibt "Erledigt".
Auch ist mein Vorschlag ja eine einfache Version ohne fadeTo-Animation.

Gruß,
noRiddle