XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)
-   -   Zufallsgenerator für Bilder? (http://xhtmlforum.de/showthread.php?t=72539)

Zakato 09.12.2015 22:58

Zufallsgenerator für Bilder?
 
Hallo zusammen,
Ich heiße Luca und bin 16 Jahre alt.
Ich suche einen Zufallsgenerator der auf einer Website 2 Bilder erscheinen lässt
und sobald ich die Bilder anklicke soll der Generator neu geladen werden und 2 Neue Bilder sollen erscheinen ;)
Da ich mich erst seit 1nem Monat nebenbei mit html und css beschäftige kann ich noch nicht so viel machen aber die Website also Design und Aufbau ist alles fertig ich muss jetzt nur noch den Zufallsgenerator haben der die Beispielbilder durch die "Anklickbaren" Bilder ersetzt die den Generator erneut betätigen ?
Könnte mir da eventuell jemand helfen?
Ich suche außerdem auch nach einem ""Lehrer"" bzw. nach jemandem der mir bei solchen Problemen direkt per Skype oder Ts helfen kann und mir auch die Hintergründe der Funktionen/Scripte näher bringt (Das natürlich gegen Bezahlung)
Mfg Luca
Vielen Dank ! :)

protonenbeschleuniger 10.12.2015 08:30

Was hat deine Frage mit dem von dir ausgesuchten Thema zu tun?

Zakato 10.12.2015 15:46

Da dieses Thema wie ich glaube über Javascript läuft waren html und css nicht die richtigen Themen dafür und Freie Webentwicklung ist glaube ich das bessere Thema :)
Wenn das aber in ein anderes Thema gehört können sie mir das gerne sagen.

cloned 10.12.2015 16:18

Barrierefreiheit hat nichts mit freier Webentwicklung zu tun. Barrierefrei heißt, dass es zugänglich für Leute mit Behinderungen ist. Gemeindeämter etc. müssen zum Beispiel auch barrierefrei sein.

Dein Post würde in den Bereich Javascript (oder PHP) fallen. Wie willst du den Zufallsgenerator denn haben. Reicht eine vordefinierte Liste aus Bildern, von denen jeweils immer zwei genommen werden?

Zakato 10.12.2015 18:21

Hey Was Barrierefreiheit heißt weiß ich ich dachte aber ihr würdet das hier als Begriff für was anderes benutzen :D Naja man lernt nie aus :)
Zum Generator er muss nur 2 Bilder aus einer Liste auf der Seite erscheinen lassen die man Anklicken kann und durch den klick sollen wieder 2 neue "generiert" werden :)
Und vielen Dank für deine Hilfe :)

protonenbeschleuniger 10.12.2015 22:00

Die Frage wäre jetzt, was du von uns konkret möchtest?

Wir sind hier im übrigen gerne bereit dir die einzelnen Schritte zu zeigen und auch mit Erklärungen die Hintergründe zu erläutern. Aber dazu brauchen wir "Futter" - also konkrete Fragen.


Hier mal ein Grundgerüst für dein Vorhaben:
Code:

<div id="gallery"></div>

<script type="text/javascript">
function Gallery(container, pics){
    if(!container) throw 'container is empty!';
    if(!pics || !pics.length) throw 'picture array is empty!';
   
    var img = container.appendChild(create('img'));
    var text = container.appendChild(create('div', 'background-color:#fff;'));
    var counter = 0;
    var isLoading = false;

    addEvent(img, 'click', nextPic);
    addEvent(img, 'load', function() {isLoading = false;text.style.border = '1px solid green';});
    showPic();

    function nextPic() {
        if(isLoading) {
            alert('Warte bis Bild fertig geladen ist');
            return;
        }
        if(++counter === pics.length) counter = 0;
        showPic();
    }
    function showPic() {
        isLoading = true;
        img.src = pics[counter] + '?'+ Math.random();
        text.innerHTML = counter + ' (src='+ img.src + ')';
        text.style.border = '1px solid red';
    }
    function create(tag, style) {
        var el = document.createElement(tag);
        if(style) el.style.cssText = style;
        return el;
    }
    function addEvent(el, evt, f) {
        if(el.addEventListener) el.addEventListener(evt, f, false);
        else throw 'Browser is too old!';
    }
}
var myPics = [ 'http://lorempixel.com/800/400/', 'http://lorempixel.com/800/400/'];

 try{
    Gallery(document.getElementById('gallery'), myPics);
 }catch(e){
    alert(e);
 }

Da sind natürlich schon eine Reihe von Konzepten drinne, die nicht so leicht für einen absoluten Anfänger sind. Ich hab mal keine Kommentare rein geschrieben sonst tippe ich mir hier die Finger fusselig, aber vielleicht kannst du damit ein paar Fragen formulieren.

Zakato 10.12.2015 22:20

Erstmal vielen dank :)
Ich schicke dir hier mal einen Screenshot von der Vorlagen Seite.
Die 2 Bilder unter dem Titel sind die die Zufallsgeneriert werden sollen :)



Index of /

Könnten sie mir vielleicht noch kurz erklären wo ich das Script einfügen muss bzw. ob ich es noch verlinken oder Speziell behandeln muss :)
Mfg :)

protonenbeschleuniger 11.12.2015 08:34

OK, mein Fehler. Da gehört noch ein schliessendes script Tag in den Code. Aber dein HTML Code ist sowieso nicht so prickelnd https://validator.w3.org/check?verbo...%2Findex1.html

Grundsätzlich ist der fehlende DOCTYPE ein grosses Problem. Dann kannst du z.b. auch mal in der Quelltextansicht des Firefox den HTML Code anschauen, dort siehst du gravierende Fehler sofort, da Firefox diese dunkelrot und fett darstellt.

Zakato 11.12.2015 19:11

Vielen Dank für die Hilfe :D
Ich werde das mal machen ich bin jetzt übers Wochenende weg also kann ich nichts schreiben
Ich melde mich am Sonntag Abend wieder :)
Mfg Luca

Zakato 16.12.2015 00:12

Hallo ich bin wieder da :)
Ich habe das mit Firefox versucht und auch auf der Verlinkten Seite vorbei geschaut habe die Fehler aber nicht verbessern können :(
Könnten wir uns vielleicht über Facebook oder eine Chatseite unterhalten da es dann wesentlich einfacher wäre und nicht immer so ein großer Zeitabschnitt zwischen den Nachrichten liegen würde :)
Leider funktioniert die Seite noch nicht weil ich noch nicht ganz mit dem Generator klar komme.
Mir wird z.B. ein Text unter den Bildern angezeigt und es wird nur 1 Generiert.
Mfg Luca

Vielen Dank nochmal :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:50 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020