Produktbeschreibung Bildergalerie

[profrolfwolf]

Hallo Leute

Ich bin neu hier, daher erstmal ein freundliches Hallo aus Österreich.

Ich habe schon im Forum gesucht, genauso wie im www, aber so recht fündig bin ich nicht geworden.

Es geht um folgendes:

Bis dato füge ich meine Bilder in der Produktbeschreibung einfach ein, mit einer Größe von 100 * 100 px und gebe die selbe Adresse als Link an, mit in neuem Fenster öffnen, um das Bild groß sehen zu können.

Nun das das wirklich unprofessionell ist, weiß ich, deshalb suche ich hier Hilfe.

Eigentlich suche ich nur eine Art Bildergalerie, bei der man ein Bild anklickt, und es in einem PopUp groß aufgemacht wird, zusätzlich sollte man gleich die restlichen Bilder auch über die Pfeiltaste im Popup Fenster ansehen können.

Mehr muß das ganze nicht können.

Leider versuche ich das erste mal so etwas einzubauen, es würde eine detaillierte Einbauanleitung sehr helfen.

Möglicherweise gibt es das bereits in der Shopsoftware, und ich finde es einfach nur nicht, bitte auch dann um Hilfe.

Schon jetzt vielen Dank für eure Geduld und eure Hilfe.
Wolfgang

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

[Tomcraft]

Hallo Wolfgang,

stelle mal unter "Konfiguration" -> "Bild Optionen" -> "Anzahl zusätzlicher Produktbilder" die gewünschte Menge an zusätzlichen Bilder ein, die du dann bei jedem Artikel in der Artikelbearbeitung hinterlegen kannst.

Grüße

Torsten

[profrolfwolf]

Hallo Thorsten

Mann gratulation ihr seid aber schnell.

Es geht nicht um die Artikelbilder in der Kategorie wo man mehrere Artikel sieht.

Es geht um den Artikelbeschreibung selbst (der gewünschte Artikel ist bereits ausgewählt) d.h. nicht um die Kurzbeschreibung.

Dort kann ich ja über den Image Button so viele Bilder wie gewünscht in jeder (festzulegenden) Größe einfügen.

Dort habe ich z.B. ein großes Bild, dann die Artikelbeschreibung als Text, und danach eine Serie von Bildern des Artikels in unterschiedlichen Farben. Diese Bilder habe ich alle 100 * 100 px. Diese 6- 10 Bilder sollten als Bildergalerie sein, das ich beim aufrufen nur eines anklicke, und alle ansehen kann.

lg Wolfgang

[profrolfwolf]

Eventuell so wie hier:

http://www.drachennest.biz/shop/Kite-Buggys/Peter-Lynn-Kites-Competition-ST-Kite-Buggy::736.html

aber besser noch direkt im Detailreiter integriert.

lg Wolfgang

[Bonsai]

Hast Du es denn mal ausprobiert was Torsten schrieb????? Der Shop macht dann genau das was Du willst.

Der unterschied Zu Deinem Link ist nur, die weiteren Bilder werden unter dem Beschreibungstext angezeigt und nicht in einem seperaten tab.

aber besser noch direkt im Detailreiter integriert.

sollte also fast 100% das sein was du Dir vorstellst.

[profrolfwolf]

Hallo

Im Grunde passt das. Und ist zumindest nicht die schlechteste Lösung.

Besser würde mir trotzdem gefallen, wenn ich die von der Funktion her selbe Galerie einfach in den Text einbauen kann.

Das würde den Text etwas auflockern, schöner gliedern usw.

Zusätzlich gefällt es mir nicht, wenn diese Bilder einfach nur irgendwelche Nummern zugewiesen bekommen. Ich hätte diese Gerne wie oben mit Bildnamen und Bildbeschreibung wegen der Suchmaschinenoptimierung.

Vielleicht gibts ja doch eine einfache Möglichkeit z.B. als IFRAME oder so?

lg Wolfgang

[noRiddle (revilonetz)]

Du kannst die im Shop bereuts vorhandene und verwendete Thickbox ganz leicht auch für Galerien in deinen Textfeldern verwenden.
Wichtig dabei ist:
Das a href muß die class="thickbox" haben und außerdem das gleiche rel-Attribut damit man nach Popup blättern kann.
Schau dir im Testshop den Quellcode der Bilder mithilfe z.B. von Firebug an. Genauso muß, was die Attribute betrifft, dein Code aussehen.

Gruß,
noRiddle

[profrolfwolf]

Sorry, ich bin wirklich Laie, im Aufbau solcher Dinge. Eigentlich kann ich nur Artikel einstellen. Den Rest hat mir ein alter Freund gemacht, der nun nicht mehr da ist.

Also ich habe über Firebug im bereich body die Thinkbox gefunden:

<link media="screen" type="text/css" href="templates/xtc5/css/thickbox.css" rel="stylesheet">

Genau so ist das auch in meinem shop, nur eben mit anders benannten templates

Ansonsten sorry verstehe ich nur Bahnhof ich kann zwar im Quelltext die Links der Bilder finden, aber da bringe ich die Bilder doch wieder oben hinein und nicht zwischen die Textzeilen.

Bitte bitte Step by step erklären, ansonsten schaffe ich das nicht.

lg Wolfgang

[Bonsai]

noRiddle meinte, Du sollst diesen Schnipsel verwenden, indem Du im Texteditor für den Beschreibungstext auf Code drückst und dann an der gewünschten Stelle einfügst.

Code: PHP  [Auswählen]

<a class="thickbox" href="images/product_images/popup_images/[Deine ProduktID]_1.png" title="[Dein Produktname]" rel="[Deine ProduktID]">

    <img align="left" alt="[Dein Produktname]" src="images/product_images/info_images/[Deine ProduktID]_1.png"></img>

</a>

Lediglich [Deine ProduktID] und [Dein Produktname] muss für Dein Produkt angepasst werden.

Für ein weiteres Bild alle _1 durch _2 ersetzen.

[profrolfwolf]

Wow Vielen Dank.

Ich habe es jetzt ein wenig anders gelöst, aber im Grunde war der Tipp Gold wert. Danke für den Quellcode, einen ähnlichen hatte ich gerade aus dem Quellcode des Bildertabs kopiert.

Deiner war zur Erklärung was was bedeutet Weltklasse.

Meiner sieht jetzt so aus:

<a class="thickbox" rel="83" title="GOPRO Halterung f&uuml;r Gleitschirmkappe" href="images/flugsau/gopro_magnethalterung_gleitschirm.png">

<img align="left" src="/images/flugsau/gopro_magnethalterung_gleitschirm.png" alt="GOPRO Halterung f&uuml;r Gleitschirmkappe" width="133" height="100" /></a>

<a class="thickbox" rel="83" title="GOPRO Halterung f&uuml;r Gleitschirmkappe" href="/images/flugsau/gopro_magnethalterung.png">

<img align="left" src="/images/flugsau/gopro_magnethalterung.png" alt="GOPRO Halterung f&uuml;r Gleitschirmkappe" width="133" height="100" /></a></p>

Vielleicht zur Erklärung für spätere Leser was ich anders gemacht habe und warum:

Ich nehme einfach das Bild nicht aus den "Produktbilderordner" sondern aus einen von mir erstellten und zugewiesenen Ordner.

Vorteil:
bei den Produktbilderordner würden die Bilder doppelt also in dem Reiter Bilder und in der Artikelbeschreibung auftauchen. Ebenfalls würden sie in dem geöffneten Popup 2 mal gezeigt.

Zusätzlich sind die Bilder richtig benannt für die Suchmaschinenoptimierung, und haben nicht irgendein Kürzel.

Die größe der Vorschaubilder kann selbst angepasst werden.

Nachteil
Man muß den Ordner bei Thinkbox im Quelltext händisch eingeben, bzw. einiges geht über die Bildeigenschaften

Die Vorschaubilder sind nicht immer das gleiche Format.

Vielen Dank und lg Wolfgang

[profrolfwolf]

So ich habe noch eine Frage, habe aber zur Übersichtlichkeit einen neuen Post gemacht.

<a class="thickbox" rel="83" title="GOPRO Halterung f&uuml;r Gleitschirmkappe" href="images/flugsau/gopro_magnethalterung_gleitschirm.png">

<img align="left" src="/images/flugsau/gopro_magnethalterung_gleitschirm.png" alt="GOPRO Halterung f&uuml;r Gleitschirmkappe" width="133" height="100" /></a>

Das rel="83" bedeutet, das in dem Popupfenster alle Bilder aus Der Produktnr. 83 im Popupfenster gezeigt werden.

Nun wäre meine Frage dazu:

Gibt es da auch andere Befehle, so das ich z.B. nur die eine Reihe Bilder (welche in einer Zeile sind) anzeigen lassen kann, und man für die nächste Bilderreihe z.B. 10 Zielen drunter wieder auf ein Bild dieser Reihe klicken muß, um diese Reihe Bilder sehen zu können?

Sinn dahinter:

Ich habe eine Galerie (Vorschaubilderreihe) für die möglichen Farben, und eine weitere Galerie (Vorschaubilderreihe) für die jeweiligen Bauarten. Diese sollten nur einzeln zu sehen sein, und nicht Farben und Bauarten in einem Popup.

Gibt es auch die Möglichkeit das eigentliche Artikelbild auszunehmen, so das es in diesem Popup nicht gezeigt wird?

Und eine weitere Frage hätte ich noch. Jedes mal nach aktualisieren oder speichern ist die Ansicht in der Quellcodeansicht total unstrukturiert. Man muß jedes mal erstmal etwas strukturieren das man arbeiten kann. Gibt es da möglichkeiten, die Sruktur zu speichern, oder was in den Einstellungen?

lg Wolfgang

[noRiddle (revilonetz)]

Zur Verdeutlichung:
Das rel-Attribut kannst du frei bestimmen
- anders ist das bei den Produkt-Bildern, da muß das rel-Attribut die Produkt-ID haben weil die Bilder für das Produkt ansonsten nicht gefunden werden -
es muß lediglich bei allen Bildern die in einer Galerie sein sollen (bei dir eine Zeile) das gleiche rel-Attribut benutzt werden.
Also z.B. für Zeile 1 rel="z1", für Zeile 2 rel="z2", usw.

Aufpassen muß man lediglich wenn man HTML5-Doctype benutzt. Da sind nicht beliebige rel-Attribute erlaubt. Ich habe vor einiger Zeit ein "Thickbox anmiert"-Plugin ins Forum gestellt wo es auch eine HTML5-Version gibt.

Im übrigen würde ich relativ grpoße Bilder für das Popup nehmen (Kunden wollen was sehen) und vielleicht in einem Unterordner deines Spezialordners einen weiteren Ordner anlegen wo die sog. Thumbnail-Bilder reingeladen werden. Es gibt im I-net freie Programme mit deren Hilfe man große Bilder verlustfrei in kleine Thumbnail-Bilder konvertieren kann.
Hier mal ein Beispiel (kein Shop) wo ich das mithilfe meines "Thickbox animiert"-Plugins umgesetzt habe. Dort kann man sehen wie das wirkt.

Gruß,
noRiddle

[Bonsai]

@profrolfwolf

Für Code bitte den Knopf php hier im Editor verwenden, nicht Zitat.

[profrolfwolf]

Hallo Leute

Eine Kleinigkeit beschäftigt mich noch. Ich hätte gerne einfach ein Leerzeichen zwischen den Bildern.

Und zwar, kleben die Thumbnail Bilder eines neben den anderen ohne Abstand. Ich habe es in den Bildeigenschaften mit den seitlichen Abstand des Bildes probiert, da passiert einfach nichts. Und auch mit der Leertaste, da werden die Bilder untereinander versetzt.

Wie kann ich das hinkriegen?

Code: PHP  [Auswählen]

<p><a class="thickbox" rel="z1" title="Normales Rad vs. Big Wheel" href="/images/paramotor/big_wheel/big_wheel.jpg">                      

<img align="left" src="/images/paramotor/big_wheel/thumbnail/big_wheel.jpg" alt="Normales Rad vs. Big Wheel" width="192" height="95" vspace="10" hspace="10" /></a></p>


<p><a class="thickbox" rel="z1" title="Motorschirmtike Big Wheel in air" href="/images/paramotor/big_wheel/big_wheel_in_air.JPG">    

<img align="left" src="/images/paramotor/big_wheel/thumbnail/big_wheel_in_air.JPG" alt="Motorschirmtike Big Wheel in air" width="127" height="95" vspace="10" hspace="10" /></a>


<a class="thickbox" rel="z1" title="Paramotor Trike Big Wheel" href="/images/paramotor/big_wheel/big_wheel_trike.jpg">

<img align="left" src="/images/paramotor/big_wheel/thumbnail/big_wheel_trike.jpg" alt="Paramotor Trike Big Wheel" width="128" height="95" hspace="10" vspace="10" /></a></p>


<a class="thickbox" rel="z1" title="Triostar Big Wheel" href="/images/paramotor/big_wheel/big_wheel_triostar.JPG">    

<img align="left" src="/images/paramotor/big_wheel/thumbnail/big_wheel_triostar.JPG" alt="Triostar Big Wheel " width="127" height="95" border="0" vspace="10" hspace="10" /></a></p>

Danke für den Tip mit den kleinen Thumbnail

lg Wolfgang

[noRiddle (revilonetz)]

• Ohne CSS können wir mit deinem HTML nicht viel anfangen.
• Lass mal das hier in den img-tags weg: vspace="10" hspace="10"
• Da jedes Bild in einen p-tag gefasst ist und p-tags Block-Elemente sind, müssten eigtl. alle Bilder untereinander stehen, es sei denn du hast den p-tags ein display:inline-block; oder ein float gegeben.
  In diesem Fall mit margin arbeiten.

Gruß,
noRiddle