Also in dem Quellcode sehe ich keine ausgelagerte Funktion. Aber egal.
Vollkommen korrekt, hier nochmal der Code nach deinem Vorschlag geändert:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>noobSlide - mootools</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="mootools-1.2-core.js"></script>
<script type="text/javascript" src="_class.noobSlide.packed.js"></script>
<script type="text/javascript">
//VARIABLE FOR THE NUMBER OF PICTURES -- TO BE CHANGED!!!
var numberOfPictures = 30;
function thumbnails(){
for(var i = 11; i <= 20; i++){
var newImgHelper = document.createElement('div');
newImgHelper.id = 'img_helper';
var image = document.createElement('img');
image.setAttribute('src', 'img' + i + '.jpg');
image.setAttribute('alt', 'Photo Thumb');
var showIt = document.getElementById("thumbnails");
newImgHelper.appendChild(image);
showIt.appendChild(newImgHelper);
}
}
function handle(){
var nOPA = []; //NUMBER OF PICTURES IN AN ARRAY
//FILL THE ARRAY FOR THE SLIDESHOW
for(var i = 1; i < numberOfPictures; i++){
nOPA[i] = "{title: " + i+"}";
}
var info6 = $('box6').getNext().set('opacity',0.5);
var nS6 = new noobSlide({
mode: 'vertical',
startItem: 0,
box: $('box6'),
items: nOPA, //items: sampleObjectItems,
size: 180, //HIGHT OF THE MAIN PICTURES
handles: $$('#thumbnails div'), //for adding new picture divs ".extend($$('#handles6_3 div'))"
handle_event: 'click', //default - mouseenter
addButtons: {
previous: $('prev6'),
play: $('play6'),
stop: $('stop6'),
next: $('next6')
},
button_event: 'click',
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Back.easeIn,
wait: false
},
onWalk: function(currentItem,currentHandle){
info6.empty();
this.handles.set('opacity',0.6);
currentHandle.set('opacity',1);
}
}
window.addEvent('domready',handle);
//walk to next item
nS6.next();
});
</script>
</head>
<body>
<div id="cont">
<!-- SAMPLE 6 -->
<h2>Sample 6</h2>
<div class="sample sample6">
<div class="mask6">
<div id="box6">
<script type="text/javascript">
for(var i = 1; i <= numberOfPictures; i++){
var newImgHelper = document.createElement('span');
newImgHelper.id = 'galleryPics';
var image = document.createElement('img');
image.setAttribute('src', 'img' + i + '.jpg');
image.setAttribute('alt', 'Photo');
var showIt = document.getElementById("box6");
newImgHelper.appendChild(image);
showIt.appendChild(newImgHelper);
}
</script>
</div>
<div class="info"></div>
</div>
<div class="thumbs" id="thumbnails">
<script type="text/javascript">
for(var i = 1; i <= numberOfPictures; i++){
var newImgHelper = document.createElement('div');
newImgHelper.id = 'img_helper';
var image = document.createElement('img');
image.setAttribute('src', 'img' + i + '.jpg');
image.setAttribute('alt', 'Photo Thumb');
var showIt = document.getElementById("thumbnails");
newImgHelper.appendChild(image);
showIt.appendChild(newImgHelper);
}
</script>
</div>
<div class="thumbs" id="thumbnails2"></div>
<p class="buttons">
<span id="prev6"><< Zurueck</span>
<span id="stop6">Stop</span>
<span id="play6">Play ></span>
<span id="next6">Vor >></span>
<span><a href="javascript:thumbnails()">klick mich</a>
</p>
</div>
</div>
</body>
</html>
»»Doch wie gesagt solltest du die Datei einfach .html nennen und dann sollte kein Browser das Dokument überhaupt als XML verarbeiten.
Es handelt sich um eine einfache HTML-Datei.