XHTMLforum - Bildergalerie mit Textwechsel

XHTMLforum (http://xhtmlforum.de/index.php)

- Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)

- - Bildergalerie mit Textwechsel (http://xhtmlforum.de/showthread.php?t=53589)

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

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.

Wie wäre es mit diesem Ansatz:

PHP-Code:


		
			
<html>

<head>



<script type="text/javascript">



function show(id)

{

    var arrEl, el, i;

    arrEl = document.getElementsByName('imagebox');

    for (i = 0; i < arrEl.length; i++)

    {

        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 :)

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>

Musst aber mit den ' und " aufpassen und es genauso übernehmen.

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)

}

In Mozilla/Firefox und Opera wird das erste grosse Bild gar nicht mehr angezeigt?????

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

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