zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Bildergalerie mit Textwechsel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.09.2008, 10:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard Bildergalerie mit Textwechsel

Hallo,
muss gleich dazu sagen, dass ich absoluter Anfänger mit JS bin.
Habe eine Galerieseite gebastelt http://www.q-webspace.de/ref_print_02.html.
Über onclick auf das thumb wird das Bild in der Bildbox eingeblendet. So weit so gut.
So nun soll dazu noch ein Text zu jedem Bild im div "Content" erscheinen.
Mir ist nicht klar, wie ich das hinbekomme. Für den Bildwechsel lege ich eine neue class an und gebe dieser ein anderes Hintergrundbild, beim Text...?Ich kann doch den Text nicht in die class schreiben?
Wo muss der Text für die einzelnen Bilder dann hin?
Wie sieht hierfür der Code aus?

Braucht ihr dazu noch den Code oder reicht euch der Link?
Über eure Hilfe freu ich mich.
VG caja
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.09.2008, 17:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Ok, was du ganz einfach machen könntest, wäre das hier:

Code:
function KLasseAendern(test, test2)
{ 
	document.getElementById('content').innerHTML = test2;

	document.getElementById('bildbox').className="nothing";
	//document.getElementById('bildbox_galerie').style.display="none";
	document.getElementById('ausblenden').style.display="none";
	document.getElementById('bilder_bildbox').style.display="block"
	imageId = 'bilder_bildbox';
	image = document.getElementById(imageId);
	document.getElementById('bilder_bildbox').className=test;
	setOpacity(image, 20);
	image.style.display="block";
	fadeIn(imageId,20);

	/* deactivate active links */
	var x = document.getElementsByTagName('a');
	for(var i = 0; i < x.length; i++)
	{
		if(x[i].className == "active")
		{
			x[i].className = "weg";
		}
	}
}
Code:
			<ul>
				<li><a onclick="KLasseAendern('elka01','Dummdidumm')"><img src="http://www.q-webspace.de/img/elka01_th.jpg" alt="" title=""></a></li>
				<li><a onclick="KLasseAendern('elka02','Dummdidumm')"><img src="http://www.q-webspace.de/img/elka02_th.jpg" alt="" title=""></a></li>
				<li><a onclick="KLasseAendern('elka03','Dummdidumm')"><img src="http://www.q-webspace.de/img/elka03_th.jpg" alt="" title=""></a></li>
				<li><a onclick="KLasseAendern('elka04','Dummdidumm')"><img src="http://www.q-webspace.de/img/elka04_th.jpg" alt="" title=""></a></li>
			</ul>
Probier das mal aus, damit schreibst du den Text den du eingibst, in das div content.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.09.2008, 18:18
Benutzerbild von Curtains
(Schlafen||Programmieren)
XHTMLforum-Mitglied
 
Registriert seit: 27.08.2008
Beiträge: 206
Curtains befindet sich auf einem aufstrebenden Ast
Standard

Wie wäre es mit diesem Ansatz:

PHP-Code:
<html>
<
head>

<
script type="text/javascript">

function 
show(id)
{
    var 
arrEleli;
    
arrEl document.getElementsByName('imagebox');
    for (
0arrEl.lengthi++)
    {
        
el arrEl[i];
        if (
el.id == id)
        {
            
el.style.display 'block';
        } else
        {
            
el.style.display 'none';
        };
    };
}

</script>

</head>
<body>
<a href="javascript: void(0)" onClick="show('box01')">Bild 01</a>
<a href="javascript: void(0)" onClick="show('box02')">Bild 02</a>
<a href="javascript: void(0)" onClick="show('box03')">Bild 03</a>
<div name="imagebox" id="box01" style="display: none;">
    text 01
    <img src="img01.jpg" />
</div>
<div name="imagebox" id="box02" style="display: none;">
    text 02
    <img src="img02.jpg" />
</div>
<div name="imagebox" id="box03" style="display: none;">
    text 03
    <img src="img03.jpg" />
</div>
</body>
</html> 
Kurz und knapp
Mit Zitat antworten
  #4 (permalink)  
Alt 11.09.2008, 18:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard

DANKE!Danke! Danke!
Das ist der Hammer ,es geht) Juchuuuuuuuuuuuuuuuuuuuuuuuu
Sag mal, kann ich denn hier nun auch z.B. den Selektor h1 anwenden und z.B. einen teil des Textes verlinken?
Ich freu mich so!
Mit Zitat antworten
  #5 (permalink)  
Alt 11.09.2008, 19:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Das geht auch:

Code:
<a onclick='KLasseAendern("elka01","<h1>Dummdidumm</h1><a href=\"http://www.test.de\">Test</a>")'><img src="http://www.q-webspace.de/img/elka01_th.jpg" alt="" title=""></a>
Musst aber mit den ' und " aufpassen und es genauso übernehmen.
Mit Zitat antworten
  #6 (permalink)  
Alt 11.09.2008, 19:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard

hab hierbei das Problem, dass es mir dabei das Bild in der Bildbox nach oben verschiebt?
http://www.q-webspace.de/test/ref_print_02.html

Und seit der Eingabe des Textes werden die Bilder nur total langsam geladen?
Hab deshalb schon folgendes gemacht
Code:
</head>
<body onload="preload_start()">
<script type="text/javascript" src="/js/preloader.js"></script>
	<body>
eigefügt und die Bilder in die preloader.js aufgenommen. Ändert sich dadurch aber nichts. Ist hier ein Fehler dabei?
Code:
// Liste der Bilder
var preload_images =
[
"img/galerie/print/elka01.jpg",
"img/galerie/print/elka02.jpg",
"img/galerie/print/elka03.jpg",
"img/galerie/print/elka04.jpg",
]
// intern benoetigte Parameter
var load_next = 0 // Zeit in ms zwischen zwei Ladevorgaengen
var pos_array = 0
// Ladefunktion
function preload()
{
// Naechstes Bild laden
var new_image = new Image()
new_image.src = preload_images[pos_array]
// Noch Bilder zu laden?
pos_array++
if(pos_array < preload_images.length)
setTimeout('preload()', load_next)
}
// Start der Vorladefunktion
function preload_start()
{
// Bilder vorhanden?
if(preload_images.length == 0)
return
// Pruefroutine starten
setTimeout('preload()', load_next)
}
Mit Zitat antworten
  #7 (permalink)  
Alt 11.09.2008, 20:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard

In Mozilla/Firefox und Opera wird das erste grosse Bild gar nicht mehr angezeigt?????
Mit Zitat antworten
  #8 (permalink)  
Alt 11.09.2008, 20:49
Benutzerbild von Curtains
(Schlafen||Programmieren)
XHTMLforum-Mitglied
 
Registriert seit: 27.08.2008
Beiträge: 206
Curtains befindet sich auf einem aufstrebenden Ast
Standard

Wenn du auf den Fading-Effekt der Bilder verzichten kannst, würde ich dir eine reine CSS-Variante empfehlen
Photo Album
Mit Zitat antworten
  #9 (permalink)  
Alt 11.09.2008, 21:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard

Soetwas in der Art hab ich mir schon mal angeschaut und versucht auf meinen Fall umzuschreiben. Ich habe hierbei nur das Problem, dass bei mir das große Bild in einem anderen Div "Bildbox" aufgeht wie die Liste ist ("Galerie_thumbs"). Da bin ich nicht mit klar gekommen(eben noch anfänger)

Und jetzt bin ich ja schon fast am Ziel, hoffe ihr könnt mir helfen, die derzeitigen Problem auch noch zu klären.
Danke jedenfalls schon mal.
LG caja
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.09.2008, 22:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard

Das das Bild nicht korrekt angezeigt wurde lag daran, dass das bild beim hochladen wohl nicht vollständig hochgeladen war. Habs ausgetauscht jetzt paßt es.

Nur in Opera funktioniert es nicht????Hat jemand da noch eine Lösung?

Und dass mit den Ladezeiten der Bilder v.a im IE dauert noch zu lang. Hoffe noch auf eure Hilfe!
VG Caja
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bildergalerie, galerie mit textwechsel, textwechsel

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bildergalerie in Liste oder Div packen? schogette CSS 11 10.08.2009 13:39
Bildergalerie mit Textwechsel denyo256 Javascript & Ajax 4 12.06.2008 12:56
hasLayout Problem mit "Ulles" hover Bildergalerie regioprint CSS 7 17.03.2008 11:45
Probleme mit Bildergalerie Lili0312 Site- und Layoutcheck 3 03.03.2007 15:35
erstes bild direkt anzeigen --> bildergalerie las CSS 9 21.07.2006 16:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:28 Uhr.