einsteiger: window.addEvent aufrufen

Beitrag lesen

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">&lt;&lt; Zurueck</span>  
  <span id="stop6">Stop</span>  
  <span id="play6">Play &gt;</span>  
  <span id="next6">Vor &gt;&gt;</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.