"Weiterblättern" mit Javascript?

T

Takuto

Grünschnabel
hallöchen alle zusammen,

ich hab da n kleines Problem. Ich hab ne art Gallerie mit nem großen bild und mehreren Thumbnails. Wenn man auf n Thumbnail klickt wird das angeklickte bild in dem Großen div dargestellt. Das hab ich irgendwie alleine hinbekommen.

Jetzt hab ich noch neben dem großen Bild links und rechts nen Pfeil mit denen ich ein Bild weiter und ein bild zurück schalten möchte.. folgenden nicht funktionierenden code hab ich bis jetzt:

Script im head:
Code: 
<script type="text/javascript">
		var bildnr = 01;
		var bild = "showcase/fruehjahrsommer-2012/sommer2012_" + bildnr + "_big" + ".png";
		
		
		function hochzaehlen(){
		bildnr +=1;
		wechsel();
		}
		
		function runterzaehlen(){
		bildnr -=1;
		wechsel();
		}
		
		
		
		function wechsel(){
		document.getElementById('mainpic').src = bild;
		}
		</script>

Aufruf bei den Pfeilen( mainpic ist das große bild welches geändert werden soll ) :
Code: 
 <div id="pfeil"><a href="javascript:runterzaehlen();"><img src="http://www.tutorials.de/images/pfeil_l.png" width="100" height="60" alt="" /></a></div>
						  <div id="detail">
							<div id="bg_wrapper">
									<img id="mainpic" src="showcase/fruehjahrsommer-2012/sommer2012_01_big.png" width="326" height="350" onmouseover="TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer2012_01_big_z.png');" />
								</div>
							</div>
                            <div id="pfeil_r"><a href="javascript:hochzaehlen();"><img src="http://www.tutorials.de/images/pfeil_r.png" width="100" height="60" alt="" /></a></div>


kann mir da jemand weiterhelfen? Und wie kann ich einstellen das minimum die 01 und maximal die 46 ist?

Danke imd voraus

Lg
 
Zuletzt bearbeitet:
Ich würde die jeweilige Nummer als Parameter an die Funktion übergeben und den Bildnamen bzw. -pfad erst in der Funktion "wechsel" zusammensetzen.

Java: 
function wechsel(nr) {
if (nr > 46 ) {
    nr = 1;
} else if (nr < 1) {
    nr = 46;
}
document.getElementById('mainpic').src = "showcase/fruehjahrsommer-2012/sommer2012_" + nr + "_big" + ".png";
}
 
also so? :confused:

Code: 
<script type="text/javascript">
		var nr = 1;
		
		
		function hochzaehlen(){
		nr +=1;
		wechsel();
		}
		
		function runterzaehlen(){
		nr -=1;
		wechsel();
		}
		
		
		
		function wechsel(nr) {
		if (nr > 46 ) {
			nr = 1;
		} else if (nr < 1) {
			nr = 46;
		}
		document.getElementById('mainpic').src = "showcase/fruehjahrsommer-2012/sommer2012_" + nr + "_big" + ".png";
		}
		</script>



<div id="pfeil"><a href="javascript:runterzaehlen();"><img src="images/pfeil_l.png" width="100" height="60" alt="" /></a></div>
						  <div id="detail">
							<div id="bg_wrapper">
									<img id="mainpic" src="showcase/fruehjahrsommer-2012/sommer2012_1_big.png" width="326" height="350" onmouseover="TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer2012_01_big_z.png');" />
								</div>
							</div>
                            <div id="pfeil_r"><a href="javascript:hochzaehlen();"><img src="images/pfeil_r.png" width="100" height="60" alt="" /></a></div>
 
Java: 
<script type="text/javascript">
var nr = 0;

function hochzaehlen() {
	nr++;
	wechsel(nr);
}

function runterzaehlen() {
	nr--;
	wechsel(nr);
}

function wechsel() {
	if (nr < 1) {
		nr = 46;
	} else if (nr > 46) {
		nr = 1;
	}

	if (nr < 10) nr = "0" + nr;

	document.getElementById('mainpic').src = "showcase/fruehjahrsommer-2012/sommer2012_" + nr + "_big" + ".png";
}
</script>

Damit sollte es klappen.

In der Funktion "wechsel" wird geprüft welchen Wert die Variable "nr" hat und bei einem Wert kleiner 1 bzw. größer 46 wird der Wert entsprechend geändert.
Bei Werten zwischen 1 und 9 wird mit dem zweiten IF-Block die führende "0" vorgestellt.
 
vielen vielen dank tombe =) ich hab wieder was dazugelernt und funktionieren tut es auch...

noch ne frage kann man die var nr anstatt mit 0 zu definieren die aktuelle zahl des bildes nehmen?

sprich wenn ich jetzt auf ein thumbnail klicke welche bild 15 ist, dann befindet sich ja im großen bild 15_big.png und wenn ich da jetzt den pfeil nach rechts benutze dann springt er ja auf 02_big.png anstatt auf 16_big.png

gäbs dafür irgendeine Lösung? falls nicht kann ich auch mit dem aktuellen Stand leben.

Danke nochmals
 
Beim ersten Laden der Seite wird ja sicher immer ein bestimmtes Bild geladen. Den Wert dieses Bildes würde ich dann als Startwert nehmen.

Um die Bildnummer anhand eines Thumbnails zu ermitteln würde ich da einfach das onclick-Ereignis verwenden und dann

Java: 
function thumb(nummer) {
	nr = nummer;
	wechsel(nr);
}

HTML: 
<!-- die Thumbnails -->
<img src="thumb22.png" width="20" height="20" alt="Thumbnail 22" onclick="thumb(22);"/>
<br />
<img src="thumb23.png" width="20" height="20" alt="Thumbnail 23" onclick="thumb(23);"/>
<br />
<img src="thumb24.png" width="20" height="20" alt="Thumbnail 24" onclick="thumb(24);"/>
<br />
 
einfacher als ich erwartet habe... funktioniert einwandfrei danke.

eine frage hätt ich noch.. und zwar hat mein großes bild n Zoom script drinnen ( beim onmouseover ) :
Code: 
<img id="mainpic" src="showcase/fruehjahrsommer-2012/sommer2012_01_big.png" width="326" height="350" onmouseover="TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer2012_01_big_z.png');" />

dieses onmouseover würd ich auch gerne beim bildwechsel ändern... also in die aktuelle bild src mit _z.png dran... ich habs vorhin in die richtung bei beiden scripts versucht:
Code: 
document.getElementById('mainpic').onmouseover= "TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer2012_" + nr + "_big_z.png');"

klappt aber irgendwie nicht ganz x-x
 
Das sollte sich im Idealfall so lösen lassen:

HTML: 
<img id="mainpic" src="showcase/fruehjahrsommer-2012/sommer2012_01_big.png" width="326" height="350" onmouseover="TJPzoom(this, this.src);" />

Du hast bei dir als zweiten Parameter beim MouseOver-Funktionsaufruf den Namen des Bildes "hart" drin stehen. Durch die Angabe "this.src" sollte es immer der Namen des aktuellen Bildes sein.

Konnte ich bei mir jetzt nicht testen, ist also nur Theorie!
 
interessant. Also das this.src funktioniert so schonmal. Das problem ist wie ich jetzt bei dem mouseover das "_z" hinter die aktuelle bild src bekomme bzw. nach dem "_big" damit er das hochauflösende Bild für den Zoom läd.
 
Ah, sorry habe die Änderung am Dateinamen nicht bemerkt. Dadurch wird es wohl etwas schwieriger.

HTML: 
function zoom(t, nr) {
// t bekommt den Wert von this und nr ist naturlich die Nummer

    bild = "showcase/fruehjahrsommer-2012/sommer2012_" + nr + "_big_z" + ".png";

// Aufruf der Zoom-Funktion

    TJPzoom(t, bild);
}

<img id="mainpic" src="showcase/fruehjahrsommer-2012/sommer2012_01_big.png" width="326" height="350" onmouseover="zoom(this, nr);" />
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück