nicht angemeldet
DOM Manipulation -> brauche Hilfe bei einem Script
Hallo zusammen,
Ich arbeite momentan an einem Code der beim Laden der Seite manipuliert werden muss. Leider kenne ich mich mit Javascript aber noch wenig aus weshalb ich hier nach Hilfe Frage.
Der Code soll auf eBay genutzt werden und ist Teil einer Bildergalerie, eine Testseite mit der fertigen Galerie kann unter diesem Link aufgerufen werden cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=181123995607 . Auf dieser Testseite habe ich das was durch das Script beim Laden der Seite verändert werden soll von Hand geändert (durch bearbeiten des fertig hochgeladenen Angebots).
Der Code den ich nutze ist folgender:
<div id="slider">
<a href="$#Link.Picture:1#$" id="bild1" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:1#$">$#Picture.1:600x450#$</a>
<a href="$#Link.Picture:2#$" id="bild2" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:2#$">$#Picture.2:600x450#$</a>
<a href="$#Link.Picture:3#$" id="bild3" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:3#$">$#Picture.3:600x450#$</a>
<a href="$#Link.Picture:4#$" id="bild4" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:4#$">$#Picture.4:600x450#$</a>
<a href="$#Link.Picture:5#$" id="bild5" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:5#$">$#Picture.5:600x450#$</a>
<a href="$#Link.Picture:6#$" id="bild6" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:6#$">$#Picture.6:600x450#$</a>
<a href="$#Link.Picture:7#$" id="bild7" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:7#$">$#Picture.7:600x450#$</a>
<a href="$#Link.Picture:8#$" id="bild8" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:8#$">$#Picture.8:600x450#$</a>
</div>
$#irgendwas#$ im Code wird automatisch mit Daten aus einem Warenwirtschaftssystem gefüllt.
$#Link.Picture:X#$ erzeugt einen Link zu einem Bild (http://example.example.de/example/pi.../example_1.jpg) in voller Auflösung (in meinem Fall 1200*900px)
$#Sichtbarkeit.Picture:X#$ setzt "display:none" wenn das dazugehörige Bild $#Picture.X:600x450#$ nicht gesetzt ist. Wenn das Bild gesetzt ist erzeugt $#Sichtbarkeit.Picture:X#$ keine Ausgabe.
$#Picture.X:600x450#$ erzeugt einen IMG-Tag mit dem Link zu dem zugehörigen Bild in Auflösung 600*450 Pixel inkl. ALT-Attribut (<img src="http://example.example.de/example/pictures/example_1_resized.jpg" alt="something i can not change">
Dieser Code kommt also dabei heraus wenn ich - als Beispiel - in meinem Warenwirtschaftssystem 4 Bilder den Variablen Bild 1 bis 4 zuordne:
<div id="slider">
<a href="http://example.example.de/example/pictures/example_1.jpg" id="bild1" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_1_resized.jpg" alt="something i can not change"></a>
<a href="http://example.example.de/example/pictures/example_2.jpg" id="bild2" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_2_resized.jpg" alt="something i can not change"></a>
<a href="http://example.example.de/example/pictures/example_3.jpg" id="bild3" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_3_resized.jpg" alt="something i can not change"></a>
<a href="http://example.example.de/example/pictures/example_4.jpg" id="bild4" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_4_resized.jpg" alt="something i can not change"></a>
<a href="" id="bild5" class="MagicZoomPlus" style="display:none;"></a>
<a href="" id="bild6" class="MagicZoomPlus" style="display:none;"></a>
<a href="" id="bild7" class="MagicZoomPlus" style="display:none;"></a>
<a href="" id="bild8" class="MagicZoomPlus" style="display:none;"></a>
</div>
Zu beachten hierbei ist dass ich auf die durch die Platzhalter erzeugten Links keinerlei Einfluss habe, diese sind auch NICHT von 1 bis 8 durchnummeriert und liegen NICHT auf meinem Server. Ich habe diese hier lediglich zur besseren Übersicht von 1 bis 8 nummeriert.
Weiterhin ist zu beachten dass es sich bei "example_1.jpg" und "example_1_resized.jpg" zwar um das selbe Bild handelt, jedoch um zwei unterschiedliche Auflösungen. diese sind getrennt voneinander gespeichert.
Ich habe KEINE Möglichkeit per Platzhalter an den reinen Link von "example_1_resized.jpg" zu kommen, $#Picture.1:600x450#$ ist jedoch vorraussetzung für die Existenz von $#Link.Picture:1#$
Das Problem ist folgendes:
1. Wie man sehen kann wird das ALT-Attribut der Bilder automatisch als "something i can not change" gesetzt. Dieses Attribut wird für jedes Bild gesetzt und ist innerhalb einer Galerie immer das gleiche, kann von mir im Vorfeld jedoch nicht beeinflusst werden.
2. Wenn ich - wie im Beispiel oben - weniger als 8 Bilder setze bleiben die übrigen A-Tags leer.
Ich muss jedoch als ALT-Attribut für Bild1 "#htmlcaption1" setzen, für Bild2 "#htmlcaption2" usw. und zusätzlich müssen - sofern weniger als 8 Bilder genutzt werden - die leeren A-Tags gelöscht werden.
Da die in den A-Tags enthaltenen IMG-Tags durch den Platzhalter $#Picture.X:600x450#$ erzeugt werden kann ich diesen leider keine IDs zuordnen ABER ich habe den übergeordneten A-Tags IDs von "Bild1" bis "Bild8" zugeordnet.
Das ganze soll durch ein kleines Script erfolgen welches beim Laden der Seite automatisch ausgeführt wird. Dabei ist zu beachten dass es sich dabei um reines JavaScript ohne Frameworks handeln muss.
Den Aufbau des Scripts habe ich mir folgendermaßen vorgestellt:
Ich benötige ein script mit Schleife die von 0 bis 7 (bzw. 1 bis 8) zählt, da es sich um 8 Bilder handelt.
Das Script called zuerst das Element mit der ID "Bild1" und überprüft ob dort "style="display:none" gesetzt ist.
Sofern dies der Fall ist wird der komplette A-Tag mit der ID "Bild1" inkl. Inhalt gelöscht.
Wenn nicht wird das ALT-Attribut der ersten Kindes (first child, also IMG-Tag) zu "#htmlcaption1" geändert.
Das Script startet nun - bedingt durch die Schleife - neu und zählt loop+1
Das Script called nun das Element mit der ID "Bild2" und überprüft ob dort "style="display:none" gesetzt ist.
Sofern dies der Fall ist wird der komplette A-Tag mit der ID "Bild2" inkl. Inhalt gelöscht.
Wenn nicht wird das ALT-Attribut der ersten Kindes (first child, also IMG-Tag) zu "#htmlcaption2" geändert.
...
usw bis die Schleife 8 mal ausgeführt wurde
...
Danach ist die Schleife beendet und alles sollte so sein wie es ist.
Wer kann mir dabei helfen, gerne auch gegen kleine Spende?
Mit freundlichen Grüßen
L. Mechler
-
Hier die Lösung, nachdem weder hier noch bei webdeveloper.com eine brauchbare Antwort kam habe ich kurzerhand beschlossen es selbst zu schreiben. Mein erstes JavaScript, funktioniert genau wie es soll :)
Für eventuelle Verbesserungsvorschläge bin ich natürlich dennoch offen ;)<script> for (var i=1; i<9; i++) { var bildnummer = 'bild'+i; if (document.getElementById(bildnummer).style.display == 'none') { document.getElementById(bildnummer).parentNode.removeChild(document.getElementById(bildnummer)) } else { document.getElementById(bildnummer).firstChild.setAttribute('alt', '#htmlcaption' + i); } } </script>-
... oder etwas kompakter:
<script> for (var i=1; i<9; i++) { var bild = document.getElementById('bild'+i) if (bild.style.display == 'none') { bild.parentNode.removeChild(bild) } else { bild.firstChild.setAttribute('alt', '#htmlcaption' + i) } } </script>
-