✔ Javascript mit Bilderwechsel

Y

YStadler

Mitglied
Hallo,
ich habe vor soetwas ähnliches wie eine Loghtbox zu machen.
Das ganze nur stark vereinfacht und kleiner.
Ich habe ein ToggleScript, welcher mir einen Div-Container öffnet
und dort soll dann das entsprechende Bild hineingesetzt werden mit Javascript.
Hoffe das ist einigermaßen verständlich erklärt.
Habe leider nur wenig/keine Erfahrung in Javascript :/
Das ganze muss dann hier irgendwie rein und funktioniert mit getElementById, aber wie das geht
weiß ich leider nicht. Hoffe ihr könnt mir helfen.
Code: 
function newsgallery(id, img) {
	if (document.getElementById(id).style.display == 'none') {
		document.getElementById(id).style.display = "";
	} else {
		document.getElementById(id).style.display = "none";
	}
}
Code: 
<div id="news_foto_big_show" style="display:none;">
	<div id="news_foto_big_show1">
		<img src="" alt="" width="450px" name="news_picture" alt="Bild" />
		<p align="right"><a onclick="toggle('news_foto_big_show', this); return false;">Schließen</a></p>
	</div>
</div>

Danke schonmal für Hilfe.

LG
 
Hi,

soll hierbei das vorhandene Grafikelement gegen ein neues getauscht werden?

Und was hat es mit der Funktion toggle('news_foto_big_show', this) auf sich, sprich: wo ist sie definiert, wo stammt sie her?

Irgendwie hab ich ja den Eindruck, dass die beiden Codeschnipsel eigentlich garnicht zusammengehören ;-)

mfg Maik
 
Edit:
Erklär doch mal ein bisschen genauer, was du jetzt eigentlich haben möchtest.
Ist denn schon sicher, welches Bild eingefügt werden soll, oder soll ein Zufallsbild eingesetzt werden?
das Div-toggle geht doch, wenn du den <p>-Tag außerhalb des ausgeblendeten <div>-Tags einfügst.


also Erstmal müsstest du die Funktion toggle() irgendwo anlegen/füllen(mir fehlt grad das Wort...), sonst bekommst du einen Fehler.
Du weißt ja auch nicht, was du machen sollst, wenn ich zu dir "back' mir einen Holunderbeer-Bananen-Kuchen" sage, ohne dir ein Rezept in die Hand zu drücken :)

Code: 
<script type="text/javascript">
function toggle(id, img) {    //jetzt wird toggle() definiert
	if (document.getElementById(id).style.display == 'none') {
		document.getElementById(id).style.display = "";
	} else {
		document.getElementById(id).style.display = "none";
	}
}
</script>

<div id="news_foto_big_show" style="display:none;">
	<div id="news_foto_big_show1">
		<img src="" alt="" width="450px" name="news_picture" alt="Bild" />
	</div>
</div>
<p align="right"><a onclick="toggle('news_foto_big_show', this); return false;">Schließen</a></p>

so Funktioniert's... zumindest wird der das Div jetzt eingeblendet/ausgeblendet.
Der <p>-Tag sollte natürlich schon außerhalb des ausgeblendeten <div>-Tags stehen, sonst hast du ja nichts zum klicken :)
 
Zuletzt bearbeitet:
Hallo,
Maik, doch doch die gehören zusammen ;)
Mit dem Toggle wird im Moment ein Div ein/ausgeblendet.
Das funktioniert auch super.
Das das schließen in dem Div ist hängt damit zusammen, das man woanders das Div einblenden kann und bei schließen wieder ausblendet.

Das Bild innen ist die Originalgröße und davor sind Thumbnails.
Das ganze Mal etwas verbildlicht (oder eher verstrichlicht? ;) ):
_________________
|......___________......|
|......|........................|......|
|......|.......BILD........|......|
|......|...........1..........|......|
|......|__________|......|
|.....................................|
|________________|


Bild 1 -- Bild 2 -- Bild 3

Hoffe das hilft, ansonsten mach ich nochmal ein Bild.

LG
 
Hi,

ich hab halt diesen Eindruck gewonnen, da die Funktion toggle() im vorgestellten JS-Code überhaupt nicht aufgeführt ist, dort nicht definiert wird, und der JS-Code steht da auch irgendwie für sich alleine, wenn man nicht sieht, wo die Funktion newsgallery(id, img) aufgerufen wird.

Und da du auf meine Frage nicht eingegangen bist, ob das in der Box #news_foto_big_show1 enthaltende Grafikelement gegen eine andere Grafik ausgetauscht werden soll, bin ich jetzt genauso schlau, wie vor sechs Stunden.

Wenn ich mir dann deine "Skizze" mit den Thumbnails so betrachte, könnte eventuell das Thema JavaScript-basierte Bildergalerie für dich interessant sein, wo beim Klick auf solche "Thumbnails" in einer Box die Exemplare mit der größeren Auflösung angezeigt werden.

Wenn diese JS-Anwendung deinen Vorstellungen nicht zusagt, möchte ich dich bitten, dein Anliegen etwas präziser vorzutragen, und uns hier nicht mit losen Codeschnippseln zu beglücken, die auf den ersten Blick keinen Kontext bilden.

mfg Maik

P.S. Was ist denn eigentlich die "Loghtbox"? Oder hast du dich lediglich auf der Tastatur im Buchstaben vergriffen, und du meinst die "Lightbox"?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück