|
|||
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 |
Sponsored Links |
|
|||
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> |
Sponsored Links |
|
|||
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! |
|
|||
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> |
|
|||
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> 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) } |
|
||||
Wenn du auf den Fading-Effekt der Bilder verzichten kannst, würde ich dir eine reine CSS-Variante empfehlen
Photo Album |
|
|||
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 |
Sponsored Links |
|
|||
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 |
Sponsored Links |
Stichwörter |
bildergalerie, galerie mit textwechsel, textwechsel |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |