[JavaScript] Bilder Slideshow

Dieses Thema im Forum "Webentwicklung" wurde erstellt von [Bensen], 14. Februar 2011 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 14. Februar 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Bilder Slideshow

    Noch wer wach?

    Benutzte aktuell folgendes Script um mehrere Bilder von rechts nach links laufen zu lassen.

    No File | www.xup.in

    Reicht eigendlich auch vollkommen aus, nur der Haken an dem Script ist, das mit zunehmender Bildanzahl (80+) die CPU ziemlich in die Höhe schießt.

    Gibt's nen vergleichbares Script welches mit rund 80 Bildern (pro Bild im Schnitt: 4KB und 160x70px groß)

    Optimal wäre es wenn man noch mit nen + und - Button die Bilder selbst schneller oder eben langsamer laufen lassen kann.

    Gruß
     
  2. 15. Februar 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Bilder Slideshow

    Schau mal:
    die Slideshow an, find ich persönlich ganz nett.

    Wenn du dir die Doc anschaust, kann man per Option das ganze auf Autoplay stellen, die untere Leiste mit den Bildern kannst du ausschalten und den Speed kannst du auch einstellen. Wenn du ihn während dem laufen verstellen willst, müsste man sich da dann halt etwas basteln um den Speed mit einem Slider oder via plus und minus button oder so zu erhöhen.

    ----

    Wenn dir die Slideshow gefällt, ich hatte Langeweile und wollte mich eh mal in jQuery einlesen. Hab dir mal was ergänzt und einen Slider dazugebaut.

    Hier mal als Downloadpaket. Einfach entpacken und die index.html öffnen.
    Das standard Delay habe ich auf 5 Sekunden gesetzt, können wir bei Wunsch aber leicht ändern. Getestet mit 80 Bildern, läuft alles flüssig.
    Das gute dadran ist, dass die Bilder beim Seitenaufruf direkt geladen werden sozusagen ein Preloader. Wenn dir die Slideshow + mein Slider nicht zusagt, auch nicht schlimm, ich habs ja "nur" zum lernen benutzt.

    Edit:// Nochmal überarbeitet und paar Schönheitskorrekturen gemacht Slideshow
     
  3. 15. Februar 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Bilder Slideshow

    Erstmal ein Danke für deine Bemühungen.

    Das sieht soweit auch ganz gut aus, nur wird ja leider nur jeweils ein Bild angezeigt.

    Die Slideshow müsste am besten mehrere Bilder anzeigen, die dann von Rechts nach Links eingeblendet werden

    Beispielbild von der jetzigen Slideshow:

    Bild

    Wird sozusagen als Partner-Slideshow verwendet und bei 80+ Partner, wäre es halt nicht gerade vom Vorteil das immer nur ein Bild angezeigt wird.
     
  4. 16. Februar 2011
    AW: Bilder Slideshow

    Ahh okay so eine war das. Hatte jetzt keine Lust mich durch dein Script zu wursteln.
    Das Script würde besser laufen, wenn Javascript nicht unbedingt den HTML Teil auch übernimmt.

    Wieso die das als Slideshow benennen weiß ich nicht, aber sowas nennt man eigentlich "ticker"

    Zum Beispiel sowas oder sowas
     
  5. 16. Februar 2011
    AW: Bilder Slideshow

    hm, also das script das du derzeit verwendest macht ja nichts großartiges. ich denke die CPU-load bekommst du nicht wirklich reduziert, vorallem nicht mit nem komplexerem script die hacker5 ständig postet ^^
     
  6. 16. Februar 2011
    AW: Bilder Slideshow



    Ich hatte mir die Komplexität der Script nicht groß angeschaut. Sondern einfach nur Beispiele angezeigt, die man hätte durchtesten können. Unschuldig in Sinne der Anklage ^^
     
  7. 16. Februar 2011
    AW: Bilder Slideshow

    das problem liegt sicherlich am html-quelltext. wenn da ein element 4000px breit ist und der browser ständig alle bilder neu zeichnen muss braucht man sich nicht wundern ^^

    ich würde eher versuchen nur bilder zu laden die angezeigt werden sollen.
    praktisch 6 bilder laden, dann ein 7tes dazu und das erste nach links rausschieben (usw...)

    dazu mit pausen und nem defer damit sich die CPU-load erholen kann.

    mal eben programmiert: http://murdoc.eu/imgslider/
     
  8. 16. Februar 2011
    AW: Bilder Slideshow

    Stimmt, hatte das noch gar nicht ausgerechnet. Ein 4000px breites Element ist nicht ohne. Dein Vorschlag hab ich schonmal Ajax angefangen. Ich hatte die Bilderpfade in der Datenbank. Einzige Problem wo ich immer hängen geblieben bin war das Nachladen von den Bildern in der richtigen Reihenfolge. Gerade wenn man die Bilder per Button nach links oder nach rechts scrollen will.

    Aber wenns so eine Art "Karussell" wird ist das ganze ja recht simpel gestrikt. Nur sowas wirds nicht als Script zum Downloaden geben!? War damals auf der Suche nach soetwas um zu schauen wie ich mein Problem löse und bin nie fündig geworden.


    Edit:// Ah dein Edit nicht gesehen. Das sieht sauber echt sauber aus. Das schau ich mir später mal genauer an.
     
  9. 17. Februar 2011
    AW: Bilder Slideshow

    Sehr schön, werd noch eben mein Copyright drunter setzen dann isses perfekt.

    Ist halt blöd das die Karussell-Funktion weg ist, aber auf jeden Fall besser als wenn die CPU auf 60% ansteigt.

    Wie bekommt man es jetzt noch hin, das die Bilder verlinkt sind?

    HTML:
    [...]
    links = [ "http://accucheck.de", "http://aronal.de", "http://adentes.de" ];
     $(wrapper).insert('<p class="image"><a href ="' + links[i] + '" target="_blank"><img src="images/' + images[i] + '" alt="" /></a></p>');
    [...]
    
    Das klappt ja bei den ersten Bildern, aber sobald das nächste Bild kommt, klappt's natürlich nicht mehr.
     
  10. 17. Februar 2011
    AW: Bilder Slideshow

    das script war für mich nur ein proof-of-concept (CPU-load max. 6% mit ruhephasen).
    so wie es jetzt ist würde ich es nicht einsetzten, aber jetzt hast du ja nen ansatz und, wenn dein copyright drunter soll, kannst du es selber umsetzen wie du es brauchst.
     
  11. 17. Februar 2011
    AW: Bilder Slideshow

    Das mit dem Copyright war natürlich nur nen scherz

    Werd mich mal näher mit dem Thema befassen, wenn ichs dann nicht hinbekomme meld ich mich nohmal.
     
  12. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.