✔ Bild faden per Buttonklick

silence12121 · 25. Mai 2010

Hallo, ich hoffe hier kann mir geholfen werden... Ich bin javascript anfänger, hab mich aber doch schon ein bisschen mit beschäftigt.
Ich möchte eine Galerie entwerfen, welche beim bilder durchklicken das alte bild ausblendet und dann das nächste bild einblendet

Ich hab das jetzt so weit das der effekt beim klicken auf dem Button zusammen mit einem Bildwechsel ausgeführt wird. Aber leider wird das nächste Bild gleichzeitig ein und ausgeblendet. und das soll so nicht sein. Ich geh davon aus dass ich nur 1 Befehl oder so nicht hab, aber weiß net was. Bin dankbar für jede art von hilfe

Danke schon mal fürs reingucken. bei mir sitzt wirklich n riesen elefant auf der leitung...

Code:

HTML:

<html>
<head>
<script type="text/javascript">
var nr=0;                                        // legt Variable nr fest (Bildnummer)
var mein_bild = new Image();                    // Legt Variable für ein Bild an
mein_bild.src = "bild0.jpg";                    // Legt in Variable Pfad für erstes Bild (ggf. Bildnamen + Pfad aktualisieren)
mein_bild.onclick = bei_click;                    // ruft beim Anklicken Funktion bei_click auf
var max_anzahl=5;                                // maximale Anzahl der Bilder ( WICHTIG  Immer aktualisieren)

function init_bildwechsel()                        // Initialisiert den Bildwechsel beim Seitenaufruf
    {
    document.getElementById("bildwechsler").appendChild(mein_bild);    
    }                                            // legt in das Objekt mit dem Namen "Bildwechsler" das 
                                                // Bild was in der Variablen mein_bild gespeichert ist

function bildwechsel(max_nr)                    // Funktion Bildwechsel aufwärts
    {
    hidden();                                    // aktuelle Bild ausblenden
    nr++;                                        // nr + 1 (Bildnummer +1)
    if (nr > max_anzahl) nr=0;                    // Wenn Bildnummer größer ist als Max. Anzahl der Bilder, setze Bildnummer zurück
    mein_bild.src = 'bild' + nr + '.jpg';        // setzt Quellenangabe aus Bildname, Bildnummer (nr), und Bildtyp zusammen
    showbild();                                    // neue Bild einblenden
    }
    
function bildwechselmin(min_nr)                    // Funktion Bildwechsel abwärts
    {
    hidden();
    nr--;                                        // nr -1 (Bildnummer - 1)
    if (nr < min_nr) nr=max_anzahl;                // Wenn Bildnummer kleiner ist als 0, setze Bildnummer auf maximale Anzahl der Bilder
    mein_bild.src = 'bild' + nr + '.jpg';        // setzt Quellenangabe aus Bildname, Bildnummer (nr), und Bildtyp zusammen
    showbild();
    }

function bei_click()                            // Wenn das Bild angeklickt wird, dann 
    {
    document.close();                            // rufe das Bild mit gr_ und dem derzeitigen angezeigten Bildnamen auf
    window.location.href = 'gr_' + this.src.match(/[^\/]+$/);
    }    
    
function hidden()
    {
        bild=document.getElementById('bildwechsler');
        for(i = 0;i <= 100;i++)
        window.setTimeout('bild.style.filter = "Alpha(opacity=' + (100 - i) + ')"; bild.style.MozOpacity = ' + (1 - i / 100) + '; bild.style.opacity = ' + (1 - i / 100) + ';', i * 5);
            // Von 0 bis 100 (Prozent)
            // Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht
    }
        
function showbild()
    {
        for(i = 0;i <= 100;i++)
        window.setTimeout('mein_bild.style.filter = "Alpha(opacity=' + i + ')"; mein_bild.style.MozOpacity = ' + i / 100 + '; mein_bild.style.opacity = ' +  i / 100 + ';', i * 5);
            // Hier das selbe wie bei hideImage
    }
</script>
    <style>   img {border:none;}  </style>
</head>
<body onLoad="init_bildwechsel();">
<div id="bildwechsler">
</div>
<a href="javascript:bildwechselmin(0)"><img src="b1.png"></a>
<a href="javascript:bildwechsel()"><img src="b2.png"></a>
</body>
</html>

Sven Mintel · 26. Mai 2010

Moin,

das Problem, mal anhand von bildwechsel()

Code:

function bildwechsel(max_nr)                    // Funktion Bildwechsel aufwärts
    {
    hidden();                                    // aktuelle Bild ausblenden
    nr++;                                        // nr + 1 (Bildnummer +1)
    if (nr > max_anzahl) nr=0;                    // Wenn Bildnummer größer ist als Max. Anzahl der Bilder, setze Bildnummer zurück
    mein_bild.src = 'bild' + nr + '.jpg';        // setzt Quellenangabe aus Bildname, Bildnummer (nr), und Bildtyp zusammen
    showbild();                                    // neue Bild einblenden
    }

Alle 5 Anweisungen, die du in der Funktion stehen hast, werden direkt nacheinander ausgeführt.
Die Funktion wartet also nicht, bis das faden in der Funktion hidden() abgeschlossen ist, sondern führt die nachfolgenden Anweisungen sofort aus.

Was du tun müsstest:
du müsstest in der Anweisung, die du in hidden() per setTimeout initiierst, prüfen, wie weit gefadet wurde, und erst, wenn das Bild bis zum gewünschten Wert gefadet wurde, die restlichen Anweisungen aus bildwechsel() vornehmen.

Recht bequem, falls es dir nicht darauf ankommt, es selbst zu schreiben, geht soetwas mit JS-Frameworks, bspw. den jQuery-Methoden fadeIn()/fadeOut()

silence12121 · 28. Juni 2010

Hi, ich bins nochmal.
Hatte jetzt wieder zeit mich darum zu kümmern. Hatte prüfungsstress und so...

Ich habs jetzt mal mit dem fadeIn() und fadeOut() probiert.

Es hat auch funktioniert. Und jetzt net mehr und ich weiß net warum!!

Ich hab hier noch mal das Script... Kann mir jemand sagen ob da n fehler drin is den ich net sehe? Bitte!
Bin auch ewig dafür dankbar.. Hätt ich net mit eigenen Augen gesehen, dass es funktioniert hat, würd ich es ja auch net glauben aber es ging
Und ich hab hinter nix verändert

Code:

<html>
<head>
<script src="jquery.js" type="text/javascript">
var nr=0;										// legt Variable nr fest (Bildnummer)
var mein_bild = new Image();					// Legt Variable für ein Bild an
mein_bild.src = "bild0.jpg";					// Legt in Variable Pfad für erstes Bild (ggf. Bildnamen + Pfad aktualisieren)
mein_bild.onclick = bei_click;					// ruft beim Anklicken Funktion bei_click auf
var max_anzahl=5;								// maximale Anzahl der Bilder ( WICHTIG  Immer aktualisieren)
function init_bildwechsel()						// Initialisiert den Bildwechsel beim Seitenaufruf
	{
	document.getElementById("bildwechsler").appendChild(mein_bild);	
	}											// legt in das Objekt mit dem Namen "bildwechsler" das 
$(document).ready(function() 
	{
		$("#weiter").click(function() 
			{
				$("#bildwechsler").fadeOut("slow", function() 
					{
						nr++;										// nr + 1 (Bildnummer +1)
						if (nr > max_anzahl) nr=0;					// Wenn Bildnummer größer ist als Max. Anzahl der Bilder, setze Bildnummer zurück
						mein_bild.src = 'bild' + nr + '.jpg';	
						
						$("#bildwechsler").fadeIn("slow", function(){};);	
					});
			});
		$("#zurueck").click(function() 
			{
				$("#bildwechsler").fadeOut("slow", function() 
					{
						nr--;										// nr -1 (Bildnummer - 1)
						if (nr < min_nr) nr=max_anzahl;				// Wenn Bildnummer kleiner ist als 0, setze Bildnummer auf maximale Anzahl der Bilder
						mein_bild.src = 'bild' + nr + '.jpg';
						
						$("#bildwechsler").fadeIn("slow", function(){};);	
					});
			});
	});
function bei_click()							// Wenn das Bild angeklickt wird, dann 
	{
	document.close();							// rufe das Bild mit gr_ und dem derzeitigen angezeigten Bildnamen auf
	window.location.href = 'gr_' + this.src.match(/[^\/]+$/);
	}	

</script>
<style>
	img {border:none;}
	#bildwechsler {height:200px; width:200px; }
</style>
</head>
<body onLoad="init_bildwechsel();">
<div id="bildwechsler">  </div>
    <input id="zurueck" type="button" value="Zurück">
    <input id="weiter" type="button" value="weiter">
</body>
</html>

Bitte, bitte!

LG Silence

Maik · 28. Juni 2010

Hi,

hier muß zumindest dein Script-Bereich in zwei <script>-Elemente aufgeteilt werden:

Code:

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var nr=0;										// legt Variable nr fest (Bildnummer)
var mein_bild = new Image();					// Legt Variable für ein Bild an
mein_bild.src = "bild0.jpg";					// Legt in Variable Pfad für erstes Bild (ggf. Bildnamen + Pfad aktualisieren)
mein_bild.onclick = bei_click;					// ruft beim Anklicken Funktion bei_click auf
var max_anzahl=5;								// maximale Anzahl der Bilder ( WICHTIG  Immer aktualisieren)
function init_bildwechsel()						// Initialisiert den Bildwechsel beim Seitenaufruf
	{
	document.getElementById("bildwechsler").appendChild(mein_bild);	
	}											// legt in das Objekt mit dem Namen "bildwechsler" das 
$(document).ready(function() 
	{
		$("#weiter").click(function() 
			{
				$("#bildwechsler").fadeOut("slow", function() 
					{
						nr++;										// nr + 1 (Bildnummer +1)
						if (nr > max_anzahl) nr=0;					// Wenn Bildnummer größer ist als Max. Anzahl der Bilder, setze Bildnummer zurück
						mein_bild.src = 'bild' + nr + '.jpg';	
						
						$("#bildwechsler").fadeIn("slow", function(){};);	
					});
			});
		$("#zurueck").click(function() 
			{
				$("#bildwechsler").fadeOut("slow", function() 
					{
						nr--;										// nr -1 (Bildnummer - 1)
						if (nr < min_nr) nr=max_anzahl;				// Wenn Bildnummer kleiner ist als 0, setze Bildnummer auf maximale Anzahl der Bilder
						mein_bild.src = 'bild' + nr + '.jpg';
						
						$("#bildwechsler").fadeIn("slow", function(){};);	
					});
			});
	});
function bei_click()							// Wenn das Bild angeklickt wird, dann 
	{
	document.close();							// rufe das Bild mit gr_ und dem derzeitigen angezeigten Bildnamen auf
	window.location.href = 'gr_' + this.src.match(/[^\/]+$/);
	}	

</script>

mfg Maik

silence12121 · 28. Juni 2010

Danke, hab ich gemacht, geht aber trotzdem nicht....

Sonst noch einen kleinen Tipp?

LG Silence

Maik · 28. Juni 2010

Schau mal in die Fehlerkonsole deines genutzten Browsers, welche weiteren Fehler sie in deinem Script zu beanstanden hat.

mfg Maik

silence12121 · 29. Juni 2010

Danke Maik, für deinen Tipp zur Selbsthilfe. Damit hab ichs hinbekommen. Hab an die Fehlerkonsole einfach nicht mehr gedacht.
War simpler fehler bei den abschließenden semikolons...:-(

Ist gar nicht so einfach dieses JAvaScript, aber ich denke ich werde immer wieder drauf stoßen und von daher muss ich mich notgedrungen damit auseinander setzten. Aber ironischer Weise macht mir das sogar spass, bis alles total schief läuft.

Ma sehn vielleicht mach ich noch n tutorial draus, weil von dieser sorte gibt es viel zu wenig.

Danke nochmal.

Liebe Grüße

Silence

sight011 · 30. Juni 2010

Das mit dem Tutorial klingt Mega super - bitte Bescheid sagen, wenn Du es wirklich bewerkstelligst

mfg
schlaflos-sight

✔ Bild faden per Buttonklick

silence12121

Grünschnabel

Sven Mintel

Mitglied

silence12121

Grünschnabel

Maik

silence12121

Grünschnabel

Maik

silence12121

Grünschnabel

sight011

Erfahrenes Mitglied

Neue Beiträge