AW: Lightbox bei Standardtemplates nachrüsten
Hallo, das Thema ist zwar von 2010 ... aber ich stehe gerade vor einem ähnlichen Problem.
Hab heut mit Ebay telefoniert und noch einmal bestätigt bekommen was mir schon klar war = javasript ist nicht von grund auf verboten, aber gewisse Voraussetzungen müssen da sein ( siehe hier):
Grundsatz zur Verwendung von Skriptsprachen (Javascript oder Flash)
Ich habe mir eine Lightbox für meine Artikelbilder eingebaut, funtioniert bisher tadelos. Jedoch =
die #sichtbarkeit funktioniert nicht in der Lightbox, d.h. das bei 3 übertragenen Bildern von 7 voreingestellten, die Lightbox alle 7 zeigen möchte.
hier der Code aus der index: (#sichtbarkeit steht hier zwar an falscher stelle, aber es hat auch im originalzustand nicht funktioniert)
HTML:
<div style="padding: 0px 0px 0px 0;"><a href="$#Link.Picture:1#$" rel="lightbox[roadtrip]" "$#Sichtbarkeit.Picture:1#$;vertical-align:middle;">$#Picture.1:300x280#$</a></div>
</td>
<td><div style="padding: 0px 0px 0px 0px;"><a href="$#Link.Picture:2#$" rel="lightbox[roadtrip]" "$#Sichtbarkeit.Picture:2#$;vertical-align:middle;">$#Picture.2:100x100#$</a></div>
<div style="padding: 0px 0px 0px 0px;"><a href="$#Link.Picture:3#$" rel="lightbox[roadtrip]" "$#Sichtbarkeit.Picture:3#$;vertical-align:middle;">$#Picture.3:100x100#$</a></div>
<div style="padding: 0px 0px 0px 0px;"><a href="$#Link.Picture:4#$" rel="lightbox[roadtrip]" "$#Sichtbarkeit.Picture:4#$;vertical-align:middle;">$#Picture.4:100x100#$</a></div></td>
<td><div style="padding: 0px 0px 0px 0px;"><a href="$#Link.Picture:5#$" rel="lightbox[roadtrip]" "$#Sichtbarkeit.Picture:5#$;vertical-align:middle;">$#Picture.5:100x100#$</a></div>
<div style="padding: 0px 0px 0px 0px;"><a href="$#Link.Picture:6#$" rel="lightbox[roadtrip]" "$#Sichtbarkeit.Picture:6#$;vertical-align:middle;">$#Picture.6:100x100#$</a></div>
<div style="padding: 0px 0px 0px 0px;"><a href="$#Link.Picture:7#$" rel="lightbox[roadtrip]" "$#Sichtbarkeit.Picture:7#$;vertical-align:middle;">$#Picture.7:100x100#$</a></div></td>
muss in der css die anpassung vorgenommen werden?
Code:
/* Lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lady-chic-mode.de/ebay_extra/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lady-chic-mode.de/ebay_extra/images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 113px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
die images und javascriptes sind natürlich aufm server ...
kann sich einer meiner annehmen der evtl. auch noch eine lösung in der tasche hat?
vielen Dank im Voraus, Marcel