So kannst du das ganze auch noch generisch machen:
Code:
// JS
var animationData = [{
pic: 'images/newsbox/pharao.png',
link: 'spielstaetten_pharao.html'
}, {
pic: 'images/newsbox/fact.png',
link: 'spielstaetten_fact.html'
}, {
pic: 'images/newsbox/leclou.png',
link: 'spielstaetten_leclou.html'
}];
var animation = function () {
var $bild = $("#bild"), $link = $("#link");
if (animationData && animationData.length) {
for (var i = 0; i < animationData.length; i++) {
// Hier wird eine var definiert, die als argument an die anonyme Funktion
// weitergegeben wird (in closure), da var _aniD immer den letzten Wert hätte:
var _aniD = animationData[i];
$bild
.fadeOut(400,
(function (aniD) {
return function () {
$bild.attr('src', aniD.pic);
$link.attr('href', aniD.link);
};
})(_aniD)) // closure für aniD
.fadeIn(1800);
}
$bild.queue(function (next) {
animation();
if (next) next(); // jquery higher 1.4
else $(this).dequeue(); // jquery higher 1.2
});
}
};
$(animation);
Nun kannst du mit PHP den Array in animationData erstellen. Der Array [ ] besteht aus einzelnen anonymen Objekten { pic: 'url', link: 'url' }, die du in PHP durch Kommas getrennt echo'en kannst:
Code:
<? // PHP
$animationData = array(array(
"pic" => "images/newsbox/pharao.png",
"link" => "spielstaetten_pharao.html"
), array(
"pic" => "images/newsbox/fact.png",
"link" => "spielstaetten_fact.html"
), array(
"pic" => "images/newsbox/leclou.png",
"link" => "spielstaetten_leclou.html"
));
?> // JS
var animationData = [
<? // PHP
for ($i = 0, $l = count($animationData); $i < $l; $i++) {
if ($i > 0) echo (",\r\n");
$aniD = $animationData[$i];
echo ("{ pic: '" . $aniD["pic"] . "', link: '" . $aniD["link"] . "' }");
}
?> // JS
];
// var animation = function () { ...
Eigentlich sind sich PHP und javaScript gar nicht so unähnlich, muss man bei PHP jedoch viel mehr $, ->, den ungewöhnlichen . und globale Funktionen verwenden, was die Sache meiner Meinung nach schwerer lesbar macht. Aber es sind (oder waren) ja auch zwei völlig verschiedene Welten, die Server und die Client-Welt, so hat PHP einige Tricks, die javaScript nicht hat und wahrscheinlich auch nicht braucht.
Viel Spaß beim Studieren
Übrigens ist Firefox super, was HTML und CSS betrifft, so kannst du in der Quelltext-Anzeige an rot gefärbten Tags sofort erkennen, dass sich ein HTML-Syntaxfehler eingeschlichen hat.
IE9 ist dagegen echte (VS-)Klasse, was javaScript Debugging und Tracing betrifft.
Chrome ist ein wahres Multitalent und nur durch seine Symbolik ungleich zu VS oder anderen IDEs.
Gruß
UPDATE: Um jQuery richtig zur Geltung zu bringen, möchte ich noch die return closure und for i++ Konstrukte eliminieren und den pure JS / vanilla jS code von oben anpassen, ohne diesen für falsch zu erklären (jQuery changes the way you write jS
):
Mit jQuery entfallen auch diverse if not && .length:
Code:
// JS
var animationData = [{
pic: 'images/newsbox/pharao.png',
link: 'spielstaetten_pharao.html'
}, {
pic: 'images/newsbox/fact.png',
link: 'spielstaetten_fact.html'
}, {
pic: 'images/newsbox/leclou.png',
link: 'spielstaetten_leclou.html'
}];
// jQuery(document).ready(animation)
var animation; $(animation = function () {
var $bild = $("#bild"), $link = $("#link");
$(animationData).each(function aniD_each () { // using jQuery.each
var aniD = this; // und that = this
$bild.fadeOut(400, function bldFadeOut() { // weil in closure this === $bild[0]
$bild.attr('src', aniD.pic);
$link.attr('href', aniD.link);
}) // end bldFadeOut
.fadeIn(1800);
}); // end aniD_each
$bild.queue(function (nxt) {
animation();
if (nxt) nxt(); // jquery higher 1.4
else $(this).dequeue(); // jquery higher 1.2
});
});
Live: jsfiddle.net/metadings/SzYay/
