Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

koehle12 · 18-11-2011, 09:16

hallo liebe community....
ich habe da ein kleines Problem, ich habe eine Image Slideshow, sie funktioniert einwandfrei. Zur Zeit wechseln die Bilder aber nur auf mausklick, ich hätte es gern das die bilder auch nach einer gewisse zeit automatisch wechseln.
ich füge den Quellcode mal hinzu, vielleicht kann mir ja jemand auf die Sprünge helfen.

PHP-Code:

  $(window).load(function(){
    
    
    
    var supportCanvas = 'getContext' in document.createElement('canvas');



    var slides = $('#slideshow li'),
        current = 0,
        slideshow = {width:0,height:0};

    setTimeout(function(){
        
        window.console && window.console.time && console.time('Generated In');
        
        if(supportCanvas){
            $('#slideshow img').each(function(){

                if(!slideshow.width){
                
                    slideshow.width = this.width;
                    slideshow.height = this.height;
                }
                
                
                createCanvasOverlay(this);
            });
        }
        
        window.console && window.console.timeEnd && console.timeEnd('Generated In');
        
        $('#slideshow .arrow').click(function(){
            var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;

            
            
            if($(this).hasClass('next')){
                nextIndex = current >= slides.length-1 ? 0 : current+1;
            }
            else {
                nextIndex = current <= 0 ? slides.length-1 : current-1;
            }

            var next = slides.eq(nextIndex);
            
            if(supportCanvas){

            

                canvas.fadeIn(function(){
                    
                
                    next.show();
                    current = nextIndex;
                    
                
                    li.fadeOut(function(){
                        li.removeClass('slideActive');
                        canvas.hide();
                        next.addClass('slideActive');
                    });
                });
            }
            else {
                
                
                
                current=nextIndex;
                next.addClass('slideActive').show();
                li.removeClass('slideActive').hide();
            }
        });
        
    },100);

    
    
    function createCanvasOverlay(image){

        var canvas            = document.createElement('canvas'),
            canvasContext    = canvas.getContext("2d");
        
    
        canvas.width = slideshow.width;
        canvas.height = slideshow.height;
        

        canvasContext.drawImage(image,0,0);
        

    
        var imageData    = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;
        
    
        
        for(var i = 0,z=data.length;i<z;i++){
            
    
            
            data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            
        
            ++i;
        }
        
    
        canvasContext.putImageData(imageData,0,0);
        
    
        image.parentNode.insertBefore(canvas,image);
    }
    
});

HTML-Code:

<div id="slideshow">

	<ul class="slides">

    	<li><img src="http://www.flashforum.de/forum/images/photos/1.jpg" width="560" height="380" alt="" /></li>
        <li><img src="http://www.flashforum.de/forum/images/photos/2.jpg" width="560" height="380" alt="" /></li>
        <li><img src="http://www.flashforum.de/forum/images/photos/3.jpg" width="560" height="380" alt="" /></li>

        <li><img src="http://www.flashforum.de/forum/images/photos/4.jpg" width="560" height="380" alt="" /></li>
        <li><img src="http://www.flashforum.de/forum/images/photos/5.jpg" width="560" height="380" alt="" /></li>
        <li><img src="http://www.flashforum.de/forum/images/photos/6.jpg" width="560" height="380" alt="" /></li>
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
			</div>

DANKE IM VORAUS
LG

Nightflyer · 18-11-2011, 10:01

Dein Script geht bei mir gar nicht

koehle12 · 18-11-2011, 10:07

hallo,
doch also bei mir läufts....es muss noch die jquery bibliothek eingefügt werden, habe jetzt nicht den ganzen html code eingefügt, mir geht es darum wo man in dem javascript code, die funktion einbaut das der wechsel automatisch läuft.
ich denke mal, dass das nicht will code sein kann, oder !?!

Nightflyer · 18-11-2011, 11:29

Nein viel Code ist es sicher nicht, aber um zu testen ob es reibungslos läuft muss ich ein funktionierendes Beispiel haben. Bei deinem Code fehlt noch irgend was, wenn ich das so in eine Testdatei mache dann erhalte ich eine Liste, aber bei der kann ich klicken wie ich will. Ich denke mal das liegt schlichtweg am fehlenden CSS...

koehle12 · 18-11-2011, 11:33

ok..
hier ist noch einmal der CSS code

Code:

#slideshow{
	height:400px;
	margin:auto 0;
	position:relative;
	width:595px;

}

#slideshow ul{
	height:400px;
	left:10px;
	list-style:none outside none;
	overflow:hidden;
	position:absolute;
	top:10px;
	width:595px;
}

#slideshow li{
	position:absolute;
	display:none;
	z-index:10;
}

#slideshow li:first-child{
	display:block;
	z-index:1000;
}

#slideshow .slideActive{
	z-index:1000;
}

#slideshow canvas{
	display:none;
	position:absolute;
	z-index:100;
}

#slideshow .arrow{
	height:102px;
	width:80px;
	position:absolute;
	background:url('arrows.png') no-repeat;
	top:50%;
	margin-top:-50px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{ background-position:left top;left:-15px;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}

und hier nochmal die einbindung der .js dateien

HTML-Code:

<script src="images/jquery.min.js"></script>
<script src="images/script.js"></script>

Nightflyer · 18-11-2011, 12:02

Weiss jetzt echt nicht was ich falsch mache :/ Bei mir geht gar nix

HTML-Code:

<!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" dir="ltr" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>


<style type="text/css">

#slideshow{
	height:400px;
	margin:auto 0;
	position:relative;
	width:595px;

}

#slideshow ul{
	height:400px;
	left:10px;
	list-style:none outside none;
	overflow:hidden;
	position:absolute;
	top:10px;
	width:595px;
}

#slideshow li{
	position:absolute;
	display:none;
	z-index:10;
}

#slideshow li:first-child{
	display:block;
	z-index:1000;
}

#slideshow .slideActive{
	z-index:1000;
}

#slideshow canvas{
	display:none;
	position:absolute;
	z-index:100;
}

#slideshow .arrow{
	height:102px;
	width:80px;
	position:absolute;
	background:url('arrows.png') no-repeat;
	top:50%;
	margin-top:-50px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{ background-position:left top;left:-15px;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}


</style>

<script type="text/javascript">

	
	$(window).load(function(){
    
    
    
    var supportCanvas = 'getContext' in document.createElement('canvas');



    var slides = $('#slideshow li'),
        current = 0,
        slideshow = {width:0,height:0};

    setTimeout(function(){
        
        window.console && window.console.time && console.time('Generated In');
        
        if(supportCanvas){
            $('#slideshow img').each(function(){

                if(!slideshow.width){
                
                    slideshow.width = this.width;
                    slideshow.height = this.height;
                }
                
                
                createCanvasOverlay(this);
            });
        }
        
        window.console && window.console.timeEnd && console.timeEnd('Generated In');
        
        $('#slideshow .arrow').click(function(){
            var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;

            
            
            if($(this).hasClass('next')){
                nextIndex = current >= slides.length-1 ? 0 : current+1;
            }
            else {
                nextIndex = current <= 0 ? slides.length-1 : current-1;
            }

            var next = slides.eq(nextIndex);
            
            if(supportCanvas){

            

                canvas.fadeIn(function(){
                    
                
                    next.show();
                    current = nextIndex;
                    
                
                    li.fadeOut(function(){
                        li.removeClass('slideActive');
                        canvas.hide();
                        next.addClass('slideActive');
                    });
                });
            }
            else {
                
                
                
                current=nextIndex;
                next.addClass('slideActive').show();
                li.removeClass('slideActive').hide();
            }
        });
        
    },100);

    
    
    function createCanvasOverlay(image){

        var canvas            = document.createElement('canvas'),
            canvasContext    = canvas.getContext("2d");
        
    
        canvas.width = slideshow.width;
        canvas.height = slideshow.height;
        

        canvasContext.drawImage(image,0,0);
        

    
        var imageData    = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;
        
    
        
        for(var i = 0,z=data.length;i<z;i++){
            
    
            
            data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            
        
            ++i;
        }
        
    
        canvasContext.putImageData(imageData,0,0);
        
    
        image.parentNode.insertBefore(canvas,image);
    }
    
}); 

</script>


</heady>
<body>

<div id="slideshow">

	<ul class="slides">

    	<li><img src="http://www.jpl.nasa.gov/images/jplimages/PIA12348_hires.jpg" width="560" height="380" alt="" /></li>
        <li><img src="http://www.jpl.nasa.gov/images/jplimages/PIA07137_hires.jpg" width="560" height="380" alt="" /></li>
        <li><img src="http://www.http://www.jpl.nasa.gov/images/jplimages/PIA14400_hires.jpg" width="560" height="380" alt="" /></li>

        <li><img src="http://www.jpl.nasa.gov/images/jplimages/PIA14417_hires.jpg" width="560" height="380" alt="" /></li>
        <li><img src="http://www.flashforum.de/forum/images/photos/5.jpg" width="560" height="380" alt="" /></li>
        <li><img src="http://www.flashforum.de/forum/images/photos/6.jpg" width="560" height="380" alt="" /></li>
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>


</body>
</html>

koehle12 · 18-11-2011, 12:15

stimmt, da gibt es noch ein problem, habe ich ganz vergessen, bei mir läuft das lokal auch nicht, nur auf einer server umgebung. echt komisch

pixelslave · 18-11-2011, 12:59

nicht komisch sondern logisch.

Das spuckt meine Console aus:

Failed to load resource
http://www.flashforum.de/forum/image...os/5.jpgFailed to load resource: the server responded with a status of 404 (Not Found)
http://www.flashforum.de/forum/image...os/6.jpgFailed to load resource: the server responded with a status of 404 (Not Found)
http://www.http//www.jpl.nasa.gov/im...ires.jpgFailed to load resource
test.html:166Uncaught Error: SECURITY_ERR: DOM Exception 18

Grüße

Martin

Nightflyer · 18-11-2011, 13:31

Nein wenn nicht alle Bilder geladen werden spielt das doch keine Rolle, ein Bild-Element wird ja trotzdem erzeugt.

pixelslave · 18-11-2011, 13:45

javascript - Uncaught Error: SECURITY_ERR: DOM Exception 18 - Stack Overflow

koehle12 · 18-11-2011, 15:22

vielen dank für eure hilfe!
habe jetzt die lösung.

Code:

var timer = window.setInterval(function () {
	$('#slideshow .arrow').filter('.next').trigger('click');
}, 6000);

dieser code kommt innerhalb des "setTimeout"

vielen dank

Nightflyer · 18-11-2011, 15:46

Wenn aber jemand trotzdem die Buttons klickt wechselt es zu schnell. Daher wird deine Lösung so nicht sauber funktionieren

koehle12 · 18-11-2011, 15:51

da hast du auf jedenfall recht

....ich brauch noch irgendwie die lösung, dass die zeit wieder von vorne anfängt nachdem man die buttons geklickt hat.

Nightflyer · 18-11-2011, 17:59

nimm setTimeout anstelle setInterval. Das Timout kannst du dann mittels clearTimeout bei Klick auf den Button löschen und wieder ein neues machen.

Nicmare · 18-11-2011, 22:56

was spricht denn eigentlich gegen ein fertiges plugin. zB cycle?? das ist sehr flexibel.

18-11-2011, 09:16	#1 (permalink)
koehle12 Neuer User Registriert seit: Nov 2011 Beiträge: 6	slideshow....automatischer bildwechsel hallo liebe community.... ich habe da ein kleines Problem, ich habe eine Image Slideshow, sie funktioniert einwandfrei. Zur Zeit wechseln die Bilder aber nur auf mausklick, ich hätte es gern das die bilder auch nach einer gewisse zeit automatisch wechseln. ich füge den Quellcode mal hinzu, vielleicht kann mir ja jemand auf die Sprünge helfen. PHP-Code: $(window).load(function(){ var supportCanvas = 'getContext' in document.createElement('canvas'); var slides = $('#slideshow li'), current = 0, slideshow = {width:0,height:0}; setTimeout(function(){ window.console && window.console.time && console.time('Generated In'); if(supportCanvas){ $('#slideshow img').each(function(){ if(!slideshow.width){ slideshow.width = this.width; slideshow.height = this.height; } createCanvasOverlay(this); }); } window.console && window.console.timeEnd && console.timeEnd('Generated In'); $('#slideshow .arrow').click(function(){ var li = slides.eq(current), canvas = li.find('canvas'), nextIndex = 0; if($(this).hasClass('next')){ nextIndex = current >= slides.length-1 ? 0 : current+1; } else { nextIndex = current <= 0 ? slides.length-1 : current-1; } var next = slides.eq(nextIndex); if(supportCanvas){ canvas.fadeIn(function(){ next.show(); current = nextIndex; li.fadeOut(function(){ li.removeClass('slideActive'); canvas.hide(); next.addClass('slideActive'); }); }); } else { current=nextIndex; next.addClass('slideActive').show(); li.removeClass('slideActive').hide(); } }); },100); function createCanvasOverlay(image){ var canvas = document.createElement('canvas'), canvasContext = canvas.getContext("2d"); canvas.width = slideshow.width; canvas.height = slideshow.height; canvasContext.drawImage(image,0,0); var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height), data = imageData.data; for(var i = 0,z=data.length;i<z;i++){ data[i] = ((data[i] < 128) ? (2data[i]data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); data[++i] = ((data[i] < 128) ? (2data[i]data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); data[++i] = ((data[i] < 128) ? (2data[i]data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); ++i; } canvasContext.putImageData(imageData,0,0); image.parentNode.insertBefore(canvas,image); } }); HTML-Code: <div id="slideshow"> <ul class="slides"> <li><img src="http://www.flashforum.de/forum/images/photos/1.jpg" width="560" height="380" alt="" /></li> <li><img src="http://www.flashforum.de/forum/images/photos/2.jpg" width="560" height="380" alt="" /></li> <li><img src="http://www.flashforum.de/forum/images/photos/3.jpg" width="560" height="380" alt="" /></li> <li><img src="http://www.flashforum.de/forum/images/photos/4.jpg" width="560" height="380" alt="" /></li> <li><img src="http://www.flashforum.de/forum/images/photos/5.jpg" width="560" height="380" alt="" /></li> <li><img src="http://www.flashforum.de/forum/images/photos/6.jpg" width="560" height="380" alt="" /></li> </ul> <span class="arrow previous"></span> <span class="arrow next"></span> </div> DANKE IM VORAUS LG Geändert von koehle12 (18-11-2011 um 09:24 Uhr)

18-11-2011, 10:01	#2 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Dein Script geht bei mir gar nicht __________________ (\__/) (='.'=) (")_(")

18-11-2011, 11:29	#4 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Nein viel Code ist es sicher nicht, aber um zu testen ob es reibungslos läuft muss ich ein funktionierendes Beispiel haben. Bei deinem Code fehlt noch irgend was, wenn ich das so in eine Testdatei mache dann erhalte ich eine Liste, aber bei der kann ich klicken wie ich will. Ich denke mal das liegt schlichtweg am fehlenden CSS... __________________ (\__/) (='.'=) (")_(")

18-11-2011, 12:59	#8 (permalink)
pixelslave i ate pixels Registriert seit: Mar 2004 Ort: Augsburg Beiträge: 528	nicht komisch sondern logisch. Das spuckt meine Console aus: Failed to load resource http://www.flashforum.de/forum/image...os/5.jpgFailed to load resource: the server responded with a status of 404 (Not Found) http://www.flashforum.de/forum/image...os/6.jpgFailed to load resource: the server responded with a status of 404 (Not Found) http://www.http//www.jpl.nasa.gov/im...ires.jpgFailed to load resource test.html:166Uncaught Error: SECURITY_ERR: DOM Exception 18 Grüße Martin __________________ GTA ähnliches Auto mit HTML, CSS3 + JavaScript Geändert von pixelslave (18-11-2011 um 13:01 Uhr)

18-11-2011, 13:31	#9 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Nein wenn nicht alle Bilder geladen werden spielt das doch keine Rolle, ein Bild-Element wird ja trotzdem erzeugt. __________________ (\__/) (='.'=) (")_(")

18-11-2011, 10:07	#3 (permalink)
koehle12 Neuer User Registriert seit: Nov 2011 Beiträge: 6	hallo, doch also bei mir läufts....es muss noch die jquery bibliothek eingefügt werden, habe jetzt nicht den ganzen html code eingefügt, mir geht es darum wo man in dem javascript code, die funktion einbaut das der wechsel automatisch läuft. ich denke mal, dass das nicht will code sein kann, oder !?!

18-11-2011, 12:15	#7 (permalink)
koehle12 Neuer User Registriert seit: Nov 2011 Beiträge: 6	stimmt, da gibt es noch ein problem, habe ich ganz vergessen, bei mir läuft das lokal auch nicht, nur auf einer server umgebung. echt komisch

18-11-2011, 13:45	#10 (permalink)
pixelslave i ate pixels Registriert seit: Mar 2004 Ort: Augsburg Beiträge: 528	javascript - Uncaught Error: SECURITY_ERR: DOM Exception 18 - Stack Overflow __________________ GTA ähnliches Auto mit HTML, CSS3 + JavaScript

18-11-2011, 15:22	#11 (permalink)
koehle12 Neuer User Registriert seit: Nov 2011 Beiträge: 6	vielen dank für eure hilfe! habe jetzt die lösung. Code: var timer = window.setInterval(function () { $('#slideshow .arrow').filter('.next').trigger('click'); }, 6000); dieser code kommt innerhalb des "setTimeout" vielen dank

18-11-2011, 15:46	#12 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Wenn aber jemand trotzdem die Buttons klickt wechselt es zu schnell. Daher wird deine Lösung so nicht sauber funktionieren __________________ (\__/) (='.'=) (")_(")

18-11-2011, 15:51	#13 (permalink)
koehle12 Neuer User Registriert seit: Nov 2011 Beiträge: 6	da hast du auf jedenfall recht ....ich brauch noch irgendwie die lösung, dass die zeit wieder von vorne anfängt nachdem man die buttons geklickt hat.

18-11-2011, 17:59	#14 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	nimm setTimeout anstelle setInterval. Das Timout kannst du dann mittels clearTimeout bei Klick auf den Button löschen und wieder ein neues machen. __________________ (\__/) (='.'=) (")_(")

18-11-2011, 22:56	#15 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	was spricht denn eigentlich gegen ein fertiges plugin. zB cycle?? das ist sehr flexibel. __________________ Dropbox 250MB mehr für dich/mich

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bildwechsel	Marcel.K.	ActionScript 2	0	20-10-2009 14:05
slideshow mit automatischer Bildzufuhr	kaycee7485	ActionScript 2	2	30-05-2007 16:29
Bildwechsel	Dyvor	Flash MX 2004	2	04-08-2005 09:49
Automatischer Bildwechsel	Michael Trost	Flash MX	4	20-10-2003 15:10
Slideshow mit automatischem Bildwechsel	Zack McCracken	Flash MX	1	16-05-2002 13:53