Hi,
ok, habe ich überlesen, dass du LightWindow einsetzt.
Hier beruht das Prinzip darauf, dass der Inhalt in das "LightWindow-Element" kopiert und angezeigt wird. Deshalb muss anders als bisher vorgegangen werden:
Zunächst muss die selektierbare Liste mit einer Klasse ausgezeichnet werden, da IDs eindeutig sein müssen. Da die Liste geklont wird, kann das sonst nicht vorausgesetzt werden.
Als nächstes wird die Liste erst im
finalAnimationHandler-Handle selektierbar gemacht. Dieser wird durch LightWindow bereit gestellt und wird ausgeführt, nachdem die Animation abgeschlossen wurde.
Problem an dieser Stelle - offensichtlich ein Bug im LightWindow-Script v2.0:
Der IE reagiert darauf mit einer Fehlermeldung, dass die
finalAnimationHandler-Funktion kein Objekt sei. Um das zu beheben, muss in der lightwindow.js die Zeile (ca. Zeile 1550)
Code:
this.options.finalAnimationHandler().bind(this, delay);
durch
Code:
(this.options.finalAnimationHandler.bind(this, delay))();
ersetzt werden.
Sollten weitere Handler benötigt werden, muss mit diesen wahrscheinlich ebenso verfahren werden.
Der Autor wurde wegen des Fehlers bereits informiert.
Das geänderte HTML-Dokument sieht wie folgt aus:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/humanity/jquery-ui.css">
<script type="text/javascript">
<!--
$nc = $.noConflict();
//-->
</script>
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>
<script type="text/javascript" src="lightwindow_v2.0/javascript/prototype.js"></script>
<script type="text/javascript" src="lightwindow_v2.0/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightwindow_v2.0/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="lightwindow_v2.0/css/lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript">
<!--
$nc(function(){
myLightWindow = new lightwindow({
finalAnimationHandler: function(){
$nc("#lightwindow .selectable").selectable({
stop: function() {
var result = $nc("#select-result").empty();
$nc(".ui-selected", $nc("#lightwindow .selectable")).each(function() {
var index = $nc("#lightwindow .selectable li" ).index( this );
if(index!=-1){
index+=1;
bildname = "bild"+index+".jpg";
//var container = document.getElementById("pic");
//container.src=bildname;
alert(bildname);
}
});
}
});
}
});
});
//-->
</script>
</head>
<body>
<div id="demo">
<ol id="selectable" class="selectable">
<li style="clear: left;" class="ui-state-default"><img src="bild1.jpg" height="80" width="100"/></li>
<li class="ui-state-default"><img src="bild2.jpg" height="80" width="100"/></li>
<li style="clear: left;" class="ui-state-default"><img src="bild3.jpg" height="80" width="100"/></li>
<li class="ui-state-default"><img src="bild4.jpg" height="80" width="100"/></li>
<li style="clear: left;" class="ui-state-default"><img src="bild5.jpg" height="80" width="100"/></li>
</ol>
</div>
<div id="select-result"></div>
<div class="demo-description">
<a id="window_open" class="lightwindow" href="#demo">Show in window</a>
</div>
</body>
</html>
Ciao
Quaese
