Platzhalter für Bilder

[nicnero4]

Hallo

Ich verbringe nun schon seit einer Weile meine Zeit mit einen Problem wo ich keine Lösung bisher gefunden habe.
Ich habe in ein Template ein moushover Funktion eingebaut. Mit den direkten Links zu die Bilder funktioniert auch das ganze.
Nun wollte ich das mit den Platzhaltern für die Bilder lösen. Das haut aber irgentwie nicht hin.
Vielleicht habt Ihr dafür eine Lösung.
Hier mal der Codeschnipsel der betreffenden Zeilen.

<p align="center">&nbsp;</p>                                                                                                                                <p align="center">                                                                                                                                <img src="http://www.xxx.de/images/product_images/popup_images/773_0.jpg"<p class="bilderrahmen" name="gross" width="456" height="676"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                                                                                                                </p>                                                                                                                                <div style="border:none;margin-bottom:60px;">        <p align="right">        &nbsp;<p align="center">                                                                                                                                <b>                                                                &nbsp;<font size="5">Produktbeschreibung</font></b><font size="5">                                                                                                                                </font>                                                                                                                                </p>                                                                                                                                <p>
                                                                &nbsp;<p>
                                                                <br>
                                                                <div style="width:580px; height:33px">                                                                                                                                        <font size="3">$#Text.Beschreibung#$</font><p>&nbsp;</div>
                                                                                                                                <p align="left">        &nbsp;<p align="right">        &nbsp;</div><p>
                                                                        <br></p>                                                                                                                                <div style="$#Sichtbarkeit.Picture:1#$;vertical-align:middle;" align="center"><br><br></div>                                                                <div style="$#Sichtbarkeit.Picture:2#$;vertical-align:middle;" align="center"><br><br></div>                                                                <div style="$#Sichtbarkeit.Picture:3#$;vertical-align:middle;" align="center"><br><br></div>                                                                <div style="$#Sichtbarkeit.Picture:4#$;vertical-align:middle;" align="center"><br></div>                                                                <br><br>&nbsp;<td height="400" width="330" valign="top" style="padding:5px; padding-top:15px;padding-left:6px;padding-right:2px;">                                                                    &nbsp;<p>                                                                                                                                <a href="#"; onmouseover="document.gross.src='http://www.xxx.de/images/product_images/popup_images/773_0.jpg'; return false;"><img src="http://www.xxx.de/images/product_images/popup_images/773_0.jpg" width="148" height="217"></a></p>                                                                                                                                <p>                                                                                                                                <p>&nbsp;</p>                                                                                                                                </p>                                                                                                                                <a href="#"; onmouseover="document.gross.src='http://www.xxx.de/images/product_images/popup_images/773_1.jpg'; return false;"><img src="http://www.xxx.de/images/product_images/popup_images/773_1.jpg" width="148" height="217"></a><p>&nbsp;</p>                                                                                                                                <p>&nbsp;<a href="#"; onmouseover="document.gross.src='http://www.xxx.de/images/product_images/popup_images/773_2.jpg'; return false;"><img src="http://www.xxx.de/images/product_images/popup_images/773_2.jpg" width="148" height="217"></a></tr></tr></tr>                                                <tr>                                                        <td valign="top" width="896" colspan="2">

Die betreffenden Zeilen habe ich mit xxx markiert was der direkte Pfad zu den Bildern wäre, wo ich annehme das dort die Platzhalter rein müssen. Das eintragen der Platzhalter dort brachte aber nicht das Ergebniss.

Wäre für jede Hilfe dankbar.

Gruß Nico

 

[nicnero4]

AW: Platzhalter für Bilder

Hallo

So wie ich es mir vorstelle wird es leider nicht gehen.
Da die Platzhalter für Bilder die komplette Adresse mitbringen.
Also inklusive img src="Platzhalter"
Das funktioniert auch. Nur brauchte ich für das mouseover die Adresse src=' Platzhalter'
Also mit einen Strich oben. Und dies bringt der Platzhalter nicht mit.
Gibt es eine möglichkeit die Variablen für die Platzhalter zu bearbeiten? Zum Beispiel dann für Bild 4-5

Gruß Nico

 

[nmueller]

AW: Platzhalter für Bilder

Würd mich auch interessieren, hab ein ähnliches Problem mit einer hübschen, selbst gebauten mouseover-Galerie die so nur leider nicht funktionieren wird weil $#Picture.1:200x300#$ den gesamten img src mitbringt.

 

[nmueller]

AW: Platzhalter für Bilder

btw habs gelöst bekommen

du musst, wie in einem anderen Thread hier im Forum beschrieben, diese beiden Variablen zwingend in Kombination nutzen, da sonst die Bilder nicht auf dem EA-Server bereitgestellt werden:

$#Picture.1#$
$#Link.Picture:1#$

Um das ganze nun in einer Mouseover-Galerie zu benutzen läst du dir die Bilder per 1 Px großem Aufruf egal wo im Template rein
$#Picture.1:1x1#$

und legst in deinen img src nur den $#Link.Picture:1#$

<img alt="Produktbild" 
         onmouseover="var bild = this.src;vollbild.src=bild;"                                          
         src="$#Link.Picture:4#$"/>

oder ähnlich, gibt ja diverse Varianten für's onmouseover etc
Nu muss ich noch bischen an der Skalierung feilen und dann ist's fast fertig *freu* Die Umlaute sind in der fertigen Auktion dann auch korrekt, in meinem File fehlt der Doctype weil der von Ebay eh später schon vorgelegt wird.

 

[Horst7000]

AW: Platzhalter für Bilder

Hallo Nina!

Ich möchte für meine Template auch ein mouseover realisieren, habe aber nicht ganz verstanden wie du das meinst:

Du skalierst alle Bilder nur mit $#Picture.x:1x1#$
auf 1x1 und dann zum Anzeigen mit width und height die thumbnails und das große Bild?

Dann schreibst du

"und legst in deinen img src nur den $#Link.Picture:1#$"

aber im Code wird auf "src="$#Link.Picture:4#$"/>" verwiesen, ist das Absicht oder ein Tippfehler?

Kannst Du das nochmal genauer erklären?

Ich wäre dankbar für eine Hilfestellung.

liebe Grüße
Horst

 

[nmueller]

AW: Platzhalter für Bilder

Naja, ist ein Beispielcodeausschnitt, nicht der Code in seiner Gesamtheit (den ich hier auch nicht posten will).

Man benötigt zur fehlerfreien Bildanzeige immer beide Variablen und muss das Bild im Template vorladen, sonst kann man den direkten Bildlink nicht generieren.
Also sowohl die $#Picture.*nummer* Platzhaltervariable sowie passend dazu die $#Link.Picture:*nummer* Variable.

Wenn du z.b. 2 Bilder in deinem Artikel hinterlegt hast und in der Ebayvorlage ausgeben willst, benötigst du sowohl $#Picture.1.. , $#Picture.2... als auch $#Link.Picture:1.. wie $#Link.Picture:2... und so weiter.

In meiner Vorlage wird also das Bild als 1x1 px vorskaliert und geladen, damit ich per $#Link.Picture... den Link generieren kann. Da ich keine 1x1 px großen Bilder benötige (hier gehts wirklich nur drum das die $#Link.Picture-Variable funktioniert) wird deren Anzeige per "display: none" im Css unterdrückt.

Ich benutze also die Vorskalierung der Bilder über EA nicht für die Anzeige innerhalb der eigentlichen Bildergalerie, die proportionale Skalierung besorgt bei mir das Template selbst.

Das Bild wird vom EA auf deren Server in der in der Wawi hinterlegten Originalgröße (max 1000 x 1000 px) und als 1x1 px hinterlegt, im Template greife ich dann für die Galerieansicht nur auf das Originalgröße-Bild zu um sowohl das Tumbnail als auch die Hover-Ansicht anzuzeigen. Somit werden anstatt z.b. 8 Bilder (4 Thumbnails und 4 Großansichten) nur die 4 Großansichten geladen und ich kann mit dem Originalgröße-Bild im Template selbst verfahren, wie ich möchte. Es sind also theoretisch mehr als nur 2 Bildgrößen (Thumb + Vollbild) möglich. Bislang tüftel ich an einer Lupenfunktion ähnlich der im JTL Shop, aus Zeitmangel schleift das Projekt aber ein bischen

 

[cdx]

AW: Platzhalter für Bilder

Hallo.

Wir haben ein Template für Ebayauctionen, welches ich auch bis zu einem gewissen Grad angepasst bekommen habe.
Ich tue mich aktuell irgendwie schwer was die Einbindung der Bilder angeht, da diese mit Mouseover vergrößert angezeigt werden sollen und das irgendwie nicht klappt. Sprich sie werden derzeit gar nicht angezeigt. Ich glaub ich hab da einen Denkfehler drin.

$#Picture.1:1x1#$ und $#Link.Picture:1#$ hab ich drin für Bild 1-5. Es gibt bei uns maximal 5 Bilder wobei es durchaus vorkommen kann dass es mal nur 2 oder 3 sind.
Die 5 Bilder sollen eine Größe von 110x83 px haben und das große 580x435 px.

Aber dennoch will es irgendwie nicht richtig das machen was ich will… J
Vielleicht hat ja jemand eine Idee dazu!?

Anbei noch ein Auszug des Quelltextes. Die $#Picture.1:1x1#$ stehen weiter unten bei uns im Template.

<div id="cont1_left_bildergalerie">
                
                <p class="text_bildergalerie">Überfahren Sie Sie bitte das gewünschte Bild mit der Maus, um es zu vergrößern.<br><br></p>
                
                <table class="vorschaubilder">
                    <tr>
                        <td class="rahmen" width=110><$#Link.Picture:1#$ width=110 onMouseover="javascript:showpic1()" alt="bild1"></td>
                        <td class="rahmen" width=110><$#Link.Picture:2#$ width=110 onMouseover="javascript:showpic2()" alt="bild2"></td>
                        <td class="rahmen" width=110><$#Link.Picture:3#$ width=110 onMouseover="javascript:showpic3()" alt="bild3"></td>
                        <td class="rahmen" width=110><$#Link.Picture:4#$ width=110 onMouseover="javascript:showpic4()" alt="bild4"></td>
                        <td class="rahmen" width=110><$#Link.Picture:5#$ width=110 onMouseover="javascript:showpic5()" alt="bild5"></td>
                    </tr>
                </table>

<!--Bilder ändern-->

                <div id="bilder_gross_box">

                    <!-- Bild 1 --> <div id="bild1" align="left" ><center><$#Link.Picture:1#$ height=435 alt="bild1"></center></div>
                    <!-- Bild 2 --> <div id="bild2" align="left" ><center><$#Link.Picture:2#$ height=435 alt="bild2"></center></div>
                    <!-- Bild 3 --> <div id="bild3" align="left" ><center><$#Link.Picture:3#$ height=435 alt="bild3"></center></div>
                    <!-- Bild 4 --> <div id="bild4" align="left" ><center><$#Link.Picture:4#$ height=435 alt="bild4"></center></div>
                    <!-- Bild 5 --> <div id="bild5" align="left" ><center><$#Link.Picture:5#$ height=435 alt="bild5"></center></div>

                </div>

 

[cdx]

AW: Platzhalter für Bilder

so.. kurzes update...
mittlerweile hab ich die bilder drin und auch der mouseover klappt.
nu hab ich jetzt noch das problem, dass die größen nicht richtig dargestellt werden.
die kleinen bilder sollen 110x83 px groß sein und das große 580x435.
er nimmt ja aber nur eine skalierung.
wie habt ihr das gelöst?
den ansatz von nmüller hab ich leider nicht ganz folgen können.
derzeit schaut der obere teil (thumbnails) so aus

<table class="vorschaubilder">
                    <tr>
                        <td class="rahmen" width=110 style="$#Sichtbarkeit.Picture:1#$"><$#Link.Picture:1#$ onMouseover="javascript:showpic1()" alt="bild1">$#Picture.1:110x83#$</td>
                        <td class="rahmen" width=110 style="$#Sichtbarkeit.Picture:2#$"><$#Link.Picture:2#$ onMouseover="javascript:showpic2()" alt="bild2">$#Picture.2:110x83#$</td>
                        <td class="rahmen" width=110 style="$#Sichtbarkeit.Picture:3#$"><$#Link.Picture:3#$ onMouseover="javascript:showpic3()" alt="bild3">$#Picture.3:110x83#$</td>
                        <td class="rahmen" width=110 style="$#Sichtbarkeit.Picture:4#$"><$#Link.Picture:4#$ onMouseover="javascript:showpic4()" alt="bild4">$#Picture.4:110x83#$</td>
                        <td class="rahmen" width=110 style="$#Sichtbarkeit.Picture:5#$"><$#Link.Picture:5#$ onMouseover="javascript:showpic5()" alt="bild5">$#Picture.5:110x83#$</td>
                    </tr>
                </table>

und der untere (das große bild) so:

<div id="bilder_gross_box">

                    <!-- Bild 1 --> 
                    <div id="bild1" align="left" ><center><$#Link.Picture:1#$ alt="bild1">$#Picture.1#$</center></div>

                    <!-- Bild 2 -->
                    <div id="bild2" align="left" ><center><$#Link.Picture:2#$ alt="bild2">$#Picture.2#$</center></div>

                    <!-- Bild 3 -->
                    <div id="bild3" align="left" ><center><$#Link.Picture:3#$ alt="bild3">$#Picture.3#$</center></div>

                    <!-- Bild 4 -->
                    <div id="bild4" align="left" ><center><$#Link.Picture:4#$ alt="bild4">$#Picture.4#$</center></div>

                    <!-- Bild 5 -->
                    <div id="bild5" align="left" ><center><$#Link.Picture:5#$ alt="bild5">$#Picture.5#$</center></div>

                </div>

hat jemand ne kreative idee dazu? hab irgendwie grad ne gedankliche blockade...

 

[nmueller]

AW: Platzhalter für Bilder

problem gelöst, platzhalter mussten etwas umgestellt werden