Anton Korduan
Threadersteller
Dabei seit: 16.12.2009
Ort: Buch am Erlbach
Alter: -
Geschlecht: -
|
Verfasst So 19.09.2010 12:39
Titel iCarousel (allgemeine Javascript Frage) |
  |
|
Hallo!
Ich habe einen vielversprechenden Beitrag über iCarousel hier gefunden - daher versuche ich es einfach mal... vielleicht könnt Ihr mir ja helfen. Ich denke, es geht um JavaScript allgemein:
Die Situation:
Ich möchte im iCarousel-Script eine bestimmte Position anspringen (genauer gesagt: ich wünsche mir eine bestimmte START-Position - das Anspringen ist ein akzeptabler umweg). Funktioniert grundsätzlich auch. Nur ist die Position nicht fix - sondern sie ändert sich von mal zu mal. Daher wollte ich das "goTo" in eine eigene Funktion schreiben... genau da hakt es aber.
Besser zu verstehen im direkten Beispiel:
http://www.korduan.de/icarousel/iCarousel_test3.html
Hier der Code dazu (siehe Zeile 54 bis 57):
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="Fabio Zendhi Nagao" />
<meta name="editor" content="Notepad++" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="15 Days" />
<link rel="stylesheet" type="text/css" href="reset-fonts.css" />
<title>iCarousel - Simple news ticker</title>
<link type="text/css" rel="stylesheet" href="moodalbox.css" media="screen" />
<link type="text/css" rel="stylesheet" href="this_002.css"></link>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="iCarousel.js"></script>
<script type="text/javascript">
var ex6Carousel;
window.addEvent("domready", function() {
//new Accordion($$(".accordion_toggler"), $$(".accordion_content"));
dp.SyntaxHighlighter.HighlightAll("usage");
var ex6Carousel = new iCarousel("example_6_content", {
idPrevious: "example_6_previous",
idNext: "example_6_next",
idToggle: "undefined",
item: {
klass: "example_6_item",
size: 640
},
animation: {
type: "scroll",
duration: 1000,
amount: 1
}
});
$("thumb0").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(0)});
$("thumb1").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(1)});
$("thumb2").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(2)});
$("thumb3").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(3)});
$("thumb4").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(4)});
$("thumb5").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(5)});
$("thumb6").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(6)});
$("thumb99").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(4)});
});
function jump () {
ex6Carousel.goTo(4);
}
</script>
</head>
<body>
<div id="container">
<div id="container_hd"></div>
<div id="container_bd">
<!-- Dies hier funktioniert: -->
<br>Funktioniert: <a id="thumb99" href="#">Vierte Pos. anspringen (ver1)</a>
<!-- Dies jedoch nicht: -->
<br>Funktioniert nicht (warum?): <a href="javascript:jump();">Vierte Pos. anspringen (ver2)</a>
<form action="#">
<dl id="accordionExample" class="accordion">
<dt class="accordion_toggler">Example</dt>
<dd class="accordion_content">
<br />
<h3>VI. Horizontal images slider</h3>
<div id="example_6">
<ul id="example_6_content">
<li class="example_6_item"><a href="#"><img src="images/ex6_1.jpg" alt="slide 1" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_2.jpg" alt="slide 2" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_3.jpg" alt="slide 3" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_4.jpg" alt="slide 4" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_5.jpg" alt="slide 5" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_6.jpg" alt="slide 6" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_7.jpg" alt="slide 7" /></a></li>
</ul>
<div id="example_6_frame">
<ul>
<li><a href="#"><img id="thumb0" src="images/ex6_1t.jpg" alt="thumbnail 1" /></a></li>
<li><a href="#"><img id="thumb1" src="images/ex6_2t.jpg" alt="thumbnail 2" /></a></li>
<li><a href="#"><img id="thumb2" src="images/ex6_3t.jpg" alt="thumbnail 3" /></a></li>
<li><a href="#"><img id="thumb3" src="images/ex6_4t.jpg" alt="thumbnail 4" /></a></li>
<li><a href="#"><img id="thumb4" src="images/ex6_5t.jpg" alt="thumbnail 5" /></a></li>
<li><a href="#"><img id="thumb5" src="images/ex6_6t.jpg" alt="thumbnail 6" /></a></li>
<li><a href="#"><img id="thumb6" src="images/ex6_7t.jpg" alt="thumbnail 7" /></a></li>
</ul>
</div>
</div>
<br />
</dd>
</body>
</html>
|
Ein Klick auf "Vorwaerts2" liefert " 'ex6Carousel ist Null oder kein Objekt' ". Ich habe doch "ex6Carousel" global definiert... und da weiss ich jetzt mit meinen Learning-by-doing-Javascript-Kenntnissen einfach nicht mehr weiter.
Vielen dank schonmal für Eure Hilfe!
Anton
|
|
Anton Korduan
Threadersteller
Dabei seit: 16.12.2009
Ort: Buch am Erlbach
Alter: -
Geschlecht: -
|
Verfasst So 19.09.2010 16:56
Titel Erledigt und gelöst! |
|
|
Hab' die Lösung mittlerweile:
Es lag lediglich an der erneuten (und somit doppelten) Definition von "ex6Carousel" via "var".
Der Code bleibt gleich - bis auf diesen schnipsel:
| Code: |
var ex6Carousel;
window.addEvent("domready", function() {
//new Accordion($$(".accordion_toggler"), $$(".accordion_content"));
dp.SyntaxHighlighter.HighlightAll("usage");
ex6Carousel = new iCarousel("example_6_content", { |
Trotzdem Danke und Grüße
Anton
|
|
Willkommen auf dem Portal für Mediengestalter
