[JavaScript] suche tutorial für javascript pictureshow

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Patrone, 13. August 2007 .

Schlagworte:
  1. 13. August 2007
    suche tutorial für javascript pictureshow

    wie gesagt... und sie muss dynamisch sein... soll später mal ne facharbeit werden...
     
  2. 13. August 2007
    AW: suche tutorial für javascript pictureshow

    ist wohl eher webtechnik daher --> moved!

    Knusperkeks
     
  3. 13. August 2007
    AW: suche tutorial für javascript pictureshow

    Google gab mir sofort nen Link, der glaube nütlich ist.

    http://www.lutz-nelde.de/Fremdscripte/JavaScript-Archiv/scripte2/pictureshow.htm

    Quellcode kopieren (JS is opensource ) und dann bilder oben als array einfügen, ist glaube selbsterklärend....ansonsten guck dir die funktionen an, such bei google und du findest die erklärungen

    mfg
     
  4. 13. August 2007
    AW: suche tutorial für javascript pictureshow

    in wie fern dynamisch? ne bildergalerie kann man auch mit html machen.

    zu javascript greift man wenn: man die bilder vergrößern/kleinern möchte (o.ä, bzw.: uvm).
    zu php greift man wenn: man die bilder aus einer datenbank laden möchte (uvm).
    zu javascript::ajax greift man wenn: man die bilder aus einer xml-datei laden möchte (uvm).

    alle drei zusammen = unschlagbar

    was muss deine galerie können?

    zum topic: such nicht nach nem pictureshow kram, sondern nach nem javascript tutorial
     
  5. 13. August 2007
    AW: suche tutorial für javascript pictureshow

    es soll einfach nur bilder aus verschiedenen odnern laden, also wenn ich nen neuen ordner auf den sever lade solls dynamisch die bildershow erweitern. es soll eine bildvorschau geben, und bei klick solln sie groß werden.


    das wars schon. die soll ich in javascript schreiben.
     
  6. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    Seit wann kann man mit JavaScript 'n Ordner auslesen? Hab ich was verpasst?
     
  7. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    naja so habe ich das jedenfall verstanden... der lehrer fing auf die art sowas an. er sage wenn neue bilder kommen solln die sofort mit eingebunden werden können ohne aufwand. das is für mich dynamisch...
     
  8. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    javascript kann keine ordner auslesen.
    und wenn das ding sofort merken muss wenn neue bilder da sind würd ich eher an php denken als an javascript.
    frag deinen lehrer lieber nochmal.
     
  9. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    vll meinte er das ja auch anders... ich hab bloß keine möglichkeit mehr ihn zu fragen nach den ferien muss ich abgeben...^^ vll soll das bloß so unkompliziert wie möglich sein wenn neue bilder kommen.
     
  10. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    und du bist auch ganz alleine in der klasse und kannst niemanden fragen?
    -.-
     
  11. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    bei uns kann leider keiner aus der klasse javascript... ich bin der einzigste der javascript als facharbeit angenommen hat...
     
  12. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    wieso ? javascript ist doch super!
    naja was solls, ich schau mal wie weit ich sowas hinbekomme mit javascript, denn brauchbar is es allemal.

    was du versuchen kannst ist mit ajax zu arbeiten und die bilder aus einer xmldatei zu holen, denn anders kann ich mir nicht vorstellen die bilder zu 'erfassen'. dazu musst du aber die bilder in die xml-datein eintragen, was aber nicht sehr schwer ist.
     
  13. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    Wobei man dann ja auch gleich die Bilder als Array direkt in JS eintragen könnte.
     
  14. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    sicher, aber von der bedienbarkeit ist ein arbeiten mit xml daten besser, immerhin musst man bei dir dann jedes mal im quelltext das array suchen und ewig erweitern, so hab ich eine xml-datei für: "bilder von hier und da", "bilder von urlaub blablabla" und wenn ich neue bilder hab, leg ich ne neue xmldatei an und kann zusätzlich noch nen kommentar, ein datum, wasauchimmer dazuspeichern.
     
  15. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    das klingt ganz gut, das wäre vll schon mal ne recht gute lösung... allerdings hab ich noch genauso wenig mit xml dateien gearbeitet. bin da kompletter neuling. kann html und gaaanz wenig javascript...
     
  16. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    also ich hab mich da jetzt drangesetzt und das erste ergebnis fertig, evt kannst du das ja weiter ausbauen, ansonsten sag bescheid dann schau ma weiter, a bissl was leisten sollst du auch

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    <!--
     //config
     var cols = 5; //wie viele bilder sollen nebeneinander angezeigt werden bis eine neue zeile beginnt
     
     function isInt(value) {
     if(!isNaN(value)) {
     value = String(value);
     var t = value.split('.');
     if(typeof t[1] != 'undefined') return false;
     else return true;
     }
     else return false;
     }
     
     // image-slideshow ajax object (xml request)
     function ajax() {
     var request;
     
     this.open = function() {
     request = false;
     if (window.XMLHttpRequest) {
     request = new XMLHttpRequest();
     if (request.overrideMimeType) request.overrideMimeType('text/xml'); //ja wir brauchen eine valide xml
     }
     else if (window.ActiveXObject) {
     try {
     request = new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e) {
     try {
     request = new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e) {}
     }
     }
     
     if(request == false) alert('error, can not start a xmlrequest! maybe your browser dont support this or the coder (i) was coding some crap!');
     }
     
     this.getxml = function(xmlnum) {
     if(typeof request != 'object') alert('error, need a xmlobject!');
     else {
     document.getElementById('img_content').innerHTML = 'Lade Bilder, bitte warten...';
     try {
     if(request.open('GET', './pics/bilder_'+xmlnum+'.xml', true) == false) alert('error, can not open xml!');
     else {
     request.send(null);
     request.onreadystatechange = this.handle;
     }
     }
     catch(e) { alert('error, page not found (404)!'); }
     }
     }
     
     this.handle = function() {
     if (request.readyState == 4) {
     if (request.status == 200) {
     var element = document.getElementById('img_content');
     var xmldat = request.responseXML;
     var img_names = xmldat.getElementsByTagName('bildname');
     var img_elements = xmldat.getElementsByTagName('bildlink');
     var img_comments = xmldat.getElementsByTagName('kommentar');
     var img_dates = xmldat.getElementsByTagName('datum');
     var output = '<table cellpadding="4" cellspacing="4" width="100%"><tr>';
     for(var i=0; i<img_elements.length; i++) {
     var picname = img_names.item(i).firstChild.data;
     var picsrc = img_elements.item(i).firstChild.data;
     var piccom = img_comments.item(i).firstChild.data;
     var picdate = img_dates.item(i).firstChild.data; 
     
     if(isInt(i/cols)) output += '</tr><tr>';
     output += '<td align="center"><b>'+picname+'</b><br/><img src="'+picsrc+'" alt="'+picname+'" /><br/><b>Kommentar: </b>'+piccom+'<br/><b>Eingetragen am: </b>'+picdate+'</td>';
     }
     
     output += '</tr></table>';
     element.innerHTML = output;
     }
     }
     }
     }
     
     var ajax = new ajax();
    //-->
    </script>
    </head>
    <body onload="ajax.open();">
     <h1>Meine Javascriptbildergalerie</h1><br/>
     <div id="img_content">Keine Gallerie geladen</div>
     <p align="center">
     <noscript>Du musst Javascript einschalten, sonst kann die Gallerie nicht funkionieren!</b><br/></noscript>
     <b>Meine Gallerien</b>
     <a href="#" onclick="ajax.getxml('1'); return false;">Test</a>
     </p>
    </body>
    </html>
    das ganze muss auf nem webserver laufen und du musst einen ordner anlegen names "pics" und da drinnen deine xml-sachen speichern mit namen "bilder_*.xml"
    * = fortlaufende nummer

    xmldatei beispiel:

    HTML:
    <?xml version="1.0" encoding="UTF-8"?>
    <root>
    <!-- bild 1 -->
     <bildname>test</bildname>
     <bildlink>http://board.raidrush.ws/customavatars/avatar18622_5.gif</bildlink>
     <kommentar>test test</kommentar>
     <datum>14.09.2007</datum>
    <!-- /bild 1 -->
    
    <!-- bild 2 -->
    <!-- [...] -->
    <!-- /bild 2-->
    </root>
    läuft im übrigen auf anhieb im mozilla und ie, was mich doch sehr verwundert hatte
     
  17. 14. August 2007
    AW: suche tutorial für javascript pictureshow

    ehy geil, vielen dank ehy! das schau ich mir jetzt in ruhe an schreib in paar erklärungen und baus vll noch in bisschen aus.

    VIELEN DANK!!! BW Habt ihr alle!
     
  18. 15. August 2007
    AW: suche tutorial für javascript pictureshow

    hier ein wenig erweitert:

    Spoiler
    jeder, außer der threadstarter, kann mir ne pn schicken und bekommt den source

    updates:
    - einzelansicht
    - bild verkleinern bei übersicht

    beim ie hatte ich zu anfangs keine probleme, aber mit der zeit verweigerte der immer mehr den dienst. anfangs dacht ich der kommt mit mehrern anfragen ned zurecht (deswegen die variable 'stop' die nochmaligens anfordern von xml-datein unterbindet solange er noch läd, aber daran lags nicht) naja, wenn jemand lust hat kann ers erweitern umbaun was auch immer, wär doch mal ne idee so ein gemeinschafts projekt.
     
  19. 15. August 2007
    AW: suche tutorial für javascript pictureshow

    wieso ich nicht? würde auch gern mal die neuere version sehen.
     
  20. 15. August 2007
    AW: suche tutorial für javascript pictureshow


    Wahrscheinlich weil's deine Facharbeit/Hausaufgabe ist und du das selber lösen sollst.
     
  21. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.