Slideshow mit javascript

supersass1

Hallo ihr,
ich habe folgenden Skript:

Code

<body style="color: black">
    <img id="one"/>
    <img id="two"/>
    <img id="three"/>
    <img id="four"/>




    <script>
        var images = ['a.png', 'b.png', 'c.png', 'd.png'];
        var index = 0;


        var fade_in = one;
        var fade_out = two;


        fade_in.src = images[0];
        fade_out.src = images[images.length - 1];


        var fade = function () {
            fade_in.src = images[index];
            index = (index + 1) % images.length;


            fade_in.className = 'fade-out';
            fade_out.className = 'fade-in';


            var fade_tmp = fade_in;
            fade_in = fade_out;
            fade_out = fade_tmp;


            setTimeout(fade, 10000);
        };


        fade();
    </script>
</body>

Alles anzeigen

Dieser zeigt die eingebenen Bilder 10 Sekunden an, danach folgt ein Übergang zum nächsten Bild. diese Skript funktioniert aber nur mit zwei Bilder, bei vier funktioniert es nicht ganz richtig, was ist falsch?
Kann man die Bilder auch in einer zufälligen Reihenfolge anzeigen lassen?

Vielen Dank

synaptic

also 'one' ist schomma nich definiert, ebenso 'two'..

ich frag mich wie das ganze ding funktioniert haben soll...

supersass1

das Ganze ist ein Skript für das iPhone, ein Theme also. Dort funktioniert es auch, allerdings zeigt er das letzte Bild viel zu kurz an und fängt dann wieder mit dem Ersten an..

synaptic

ja dann bin ich raus, hab keinerlei erfahrungen mit dem ding

supersass1

ja vielleicht siehst du ja trotzdem, warumes mit zwei Bilder klappt, also

Code

var images = ['a.png', 'b.png'];

aber nicht mit vier:

Code

var images = ['a.png', 'b.png', 'c.png', 'd.png'];

Dodo

versuch mal:

Code

var images = new array('a.png', 'b.png', 'c.png', 'd.png');

ich habe deine notation noch nie gesehen.

Tobse

Ist aber leider valide ;).
Wenns denn aufm iPhone klappt, warum muss es dann afm PC gehn?
Aber mim iPhone habich noch nich gearbeitet nur mim iPod Touch.
Ich würde des so machen:

Code

imgs=new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg");
images=new Array();
for (i=0;i<imgs.length;i++) {
    images[i]=new Image();
    images[i].src=imgs[i];
}
i=0;
function next() {
    i= i==(imgs.length-1) ? 0 : i;
    document.getElementById("bild_tag_id")=images[i];
    i++;
}
window.setInterval("nex();", 10000);

Alles anzeigen

Pion

Tobse probier doch mal vorher deine genialen Lösungen aus bevor du sie postest

@Dein Script ist ja auch nur für 2 ausgelegt, du müsstest alles umschreiben damit es mit mehr geht

Sprich erstellt ein eigenes

supersass1

Tobse: ich hab es nun ausprobiert, bei mir geht das Skript leider gar nicht.. weder mit vier noch mit zwei Bilder. Evtl. hast du ja noch einen weiteren Vorschlag,

Liebe Grüße

//EDIT:
ich habe es nun geschafft, falls es jemanden interessiert, folgende Links sollten helfen:
http://iszene.com/thread-32286.html
http://www.iphone-notes.de/2009/02/21/sau…-fur-copyright/

eine Sache noch:
Das Skript sieht nun ungefähr so aus:

Code

<script type="text/javascript">
    window.onload = function() { myShow = new Slideshow('Bild1', {hu: 'PNG/', images: ['1.png','2.png','3.png','4.png','5.png','6.png']})}
</script>
</head>
<body>
<div id="Bild1" style="border: 0px solid red; margin: 0px 0px 0px 0px;"><img src="PNG/1.png" alt="" /></div>


</body>

Lassen sich die Bilder auch nach Zufallsprinzip anzeigen?

Tobse

Dann müsstest dus wieder so änlich machen wie ich, hier das funktionierende:

Code

imgs=new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg");
images=new Array();
for (i=0;i<imgs.length;i++) {
    images[i]=new Image();
    images[i].src=imgs[i];
}
i=0;
function next() {
    i = i==(imgs.length-1) ? 0 : i;
    document.getElementById("bild").src=images[i].src;
    i++;
}
window.setInterval("next();", 10000);

Alles anzeigen

nur eben das Bild nicht, wie hier mit i, sondern mit Math.random() bestimmen.

Code

imgs=new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg");
images=new Array();
for (i=0;i<imgs.length;i++) {
    images[i]=new Image();
    images[i].src=imgs[i];
}
function next() {
    zahl=Math.random()*images.length;
    zahl=Math.round(zahl);
    document.getElementById("bild").src=images[zahl].src;
    i++;
}
window.setInterval("next();", 10000);

Alles anzeigen

supersass1

leider klappt das Skript bei mir nicht..
hier meine ganze LockBackground.html

HTML

<html><head>

<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

 <style>
     body {
        background-color: black;
         margin: 0;
         padding: 0px 0 0 0;
         height: 480px;
         width: 320px;
     }


    img {
        position: absolute;
         width: 320px;
         height: auto;
     }




    </style>



</head>
<body>
 <script type="text/javascript">
imgs=new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg");
images=new Array();
for (i=0;i<imgs.length;i++) {
    images[i]=new Image();
    images[i].src=imgs[i];
}
function next() {
    zahl=Math.random()*images.length;
    zahl=Math.round(zahl);
    document.getElementById("bild").src=images[zahl].src;
    i++;
}
window.setInterval("next();", 10000);
</script>




    


</body>


</html>

Alles anzeigen

Wo speicherst du denn deine Bilder? Im Ordner private oder in keinem Unterverzeichnis?

ich habe hier eine Random-Funktion gefunden:
http://www.hackthatphone.com/3x/themes_with…_section16.html

Nur leider ist das wieder mit dem FADEOUT, welches so viel Ressourcen benötigt, dass mein iPhone bei den Übergängen ruckelt.

Pion

Klappt nicht / Geht nicht ist eine schlechte Fehlder Diagnose...

Unter Extras "FEHLERKONSOLE" kann man die Probleme im FF vom Javascript abfangen, ihr solltet dies mal machen dann seht ihr warum es nicht klappt

mfg

synaptic

also am besten is du schreibst mal reelle anforderungen für dein script auf.
also umgebungsdaten, stylewünsche und wie das ding genau funzen soll...
veträgt dein handy auch jquery?

supersass1

Zitat von synaptic

also am besten is du schreibst mal reelle anforderungen für dein script auf.
also umgebungsdaten, stylewünsche und wie das ding genau funzen soll...
veträgt dein handy auch jquery?

Ich kenne mich leider überhaupt nicht mit Handy-Programmierung aus, deshalb kann ich dazu nichts sagen.
Ich weiß nur, dass mein erstes gepostetes Skript funktioniert, es gibt viele weitere zu finden:
http://iphonethemes.net/
http://www.mbtheme.com/

Da ich aber nur einen wechselnden hintergrund habe (ohne Übergang!) dachte ich, es wäre einfacher in diesem Forum danach zu suchen, schließlich sind das maximal 10 Zeilen Programmcode.

Liebe Grüße

synaptic

naja ich kenn mich damit auch nich aus.. aber machste das mit ner normalen html-seite und normalem javascript?
oder kannste auch bibliotheken einbinden, wie jquery?
und wie läuft das mit der datenhaltung der bilder?
und willste zwingend nen fade-effekt oder wär auch nen slide-effekt ok?

supersass1

Zitat von synaptic

naja ich kenn mich damit auch nich aus.. aber machste das mit ner normalen html-seite und normalem javascript?

im prinzip ja, es gibt einen Ordner und im Ordner eine Datei namens LockBackground.html, in der alles gespeichert ist. bilder können in einem Unterverzeichnis mittels .png oder .jpg gespeichert werden. Alles wichtige steht in der html.

Zitat

oder kannste auch bibliotheken einbinden, wie jquery?

das weiß ich nicht.

Zitat

und willste zwingend nen fade-effekt oder wär auch nen slide-effekt ok?

Gar nichts von beidem Ein bild soll nach dem anderen erscheinen, also ganz primitiv. Am besten zufällig, ansonsten der Reihenfolge nach.

Beispiel Theme im Anhang, welches mehrere Bilder nach einiger Zeit übereinanderfadet (sagt man das so?).

synaptic

oh hab jetzt erst gesehen dass du auch keine slides willst
hatte unterwegs in der bahn was gecodet..
siehe anhang

ohne effekte muss ich ma gucken.. evtl später oder die tage mal..

supersass1

ja das klappt wunderbar, er slidet die Bilder ovn unten nach oben.
Also verträgt mein Handy jquery

Nur leider ruckelt es etwas, das war beim Faden aber auch so, deshalb möchte ich lieber (ganz simpel) nur verschiedene Bilder erscheinen lassen.

synaptic

ja du kannst ja ggf die slide-effekte noch wat anpassen... (also speed-technisch)

ma sehen wie und ob ich das heute schaff mit der normalen galerie.. ggf wieder aufm heimweg, ich hab ja ca 25 minuten bahnfahrt inn hintertaunus..

edit: habs grad mal zwischen tee und brötchen gemacht..

Slideshow mit javascript

Tags

Benutzer online in diesem Thema