Hallo Freunde,
nun versuche ich es mal über dieses Forum ;-(,
ich versuche seit Tagen herauszubekommen, warum mein Script nicht so läuft wie ich es erwartet habe.
Zum Problem:
Ich habe eine Tabelle, mit kleinen Bildern in den Spalten. Wenn ich auf ein Bild klicke, dann erscheint in einer größeren Spalte 400x250pixel das Bild vergrößert. Bei einem anderen Bild wird ein Video an selber Stelle abgespielt.
Das alles klappt wunderbar, nur tritt folgendes Problem auf, wenn ich vom Video wieder zu einem Bild navigieren will. Das Video schließt sich nicht und ein Bild fügt sich in den Hintergrund ein. ICh habe gehofft, dass sich bei erneutem klick auf ein Bild, dass Video sich schließt und das angeklickte Bild vergrößert angeziegt würde.
Vielleicht kann mir jemand helfen.
Anbei mein Script:
a, a:visited {color:#080;} /* needed for IE to make :active state work first time */
#container {position:relative; width:425px; height:425px; background:#d1c8c3; border:1px solid #a49188; margin:0 auto;}
#container img {border:0;}
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}
a.slidea {background:url(http://www.binnestore.de/bilder/ebay/paradis1kl.jpg);;)}
a.slideb {background:url(http://www.binnestore.de/bilder/ebay/paradis2kl.jpg);;)}
a.slidec {background:url(http://www.binnestore.de/bilder/ebay/paradis3kl.jpg);;)}
a.slided {background:url(http://www.binnestore.de/bilder/ebay/paradis5kl.jpg);;)}
a.slidee {background:url(http://www.binnestore.de/bilder/ebay/paradis6kl.jpg);;)}
a.slidef {background:url(http://www.binnestore.de/bilder/ebay/paradis7kl.jpg);;)}
a.slideg {background:url(http://www.binnestore.de/bilder/ebay/paradis8kl.jpg);;)}
a.slideh {background:url(http://www.binnestore.de/bilder/ebay/paradis9kl.jpg);;)}
a.slidei {background:url(http://www.binnestore.de/bilder/ebay/paradis10kl.jpg);;)}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}
a.gallery:hover span {display:block; position:absolute; width:402px; height:200px; top:110px; left:5px; padding:5px; font-style:italic; color:#fff; z-index:100;}
a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
a.gallery:active, a.gallery:focus {border:1px solid #000;}
a.gallery:active em, a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:160px; left:5px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}
#container h1 {clear:both; padding-top:75px; width:425px; text-align:center; font-family: georgia, „times new roman“, serif; font-size:3em; font-weight:normal; color:#fff;}
#container h1 em {font-size:0.6em; color:#000;}
Bild 1Hauptbild vom paradisionary Frontansicht
Bild 2Frontansicht Titelangabe
Bild 3Aufschlagsansicht vorne
Bild 5Jahresangabe von den 5.Auflagen
Bild 6Ansicht von Inhaltsverzeichnis
Bild 7Innenansicht seitlich
Bild 8Frontansicht des paradisionary
Bild 9Frontansicht des paradisionary
Bild 10Frontansicht des paradisionary
Bild 9Kurzfilm des Artikels
Bilder
von
Binnestore
Vielen Dank
Andi