[JS] next/prev image

[Verwijderd]

Ik wil een soort image viewer hebben, die als ik op een pijltje druk de volgende afbeelding laadt.
Onderstaande code werkt gedeeltelijk.

Als ik op het volgende pijltje druk, wordt teaser2.jpg wel geladen, maar verdwijnen m'n pijltjes en mn overlay (waar dus de 'Bijpassende tekst' staat). Hoe kan dit? En hoe kan ik ervoor zorgen dat er bij elke afbeelding andere tekst komt?

code:

        <!-- Content midden -->
        <div id="midden">
    <script language='Javascript' type='text/javascript'>
        <!--
        var CurrentImage = 1;
        var TotalImages = 3; //Vervang de '?' door het aantal afbeeldingen voor je deze code gebruikt!

        function NextImage()
        {
            if(CurrentImage == TotalImages)
            {
                CurrentImage = 1;
            }
            else
            {
                CurrentImage += 1;
            }
            document.getElementById('teaser').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";
        }

        function RandImage()
        {
            CurrentImage = Math.ceil(Math.random()*TotalImages);
        document.getElementById('teaser').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";
        }

        function PrevImage()
        {
            if(CurrentImage == 1)
            {
                CurrentImage = TotalImages;
            }
            else
            {
                CurrentImage -= 1;
            }
            document.getElementById('teaser').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";
        }
    //-->
    </script> 

            <!-- Teaser -->
            <div id="teaser">
            
                <img src="./images/teaser1.jpg" alt="" />
                <a href="#" id="arrow_left" onClick="PrevImage()"></a><a href="#" id="arrow_right" onClick="NextImage()"></a>
                <div id="overlay">
                
                    <p>Bijpassende tekst</p>
 
                </div>


            </div>

[Noork]

Omdat je de innerhtml van teaser veranderd zodat alleen de afbeelding er nog in staat.

deze regel:
document.getElementById('teaser').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";

Ik zou de afbeelding in een aparte div zetten (zonder de pijltjes) en die een ander id meegeven.

[WeeJeWel]

<img id="foto" src="" alt="" />

document.getElementById('foto').src lijkt me logischer

[Verwijderd]

Noork schreef op dinsdag 05 augustus 2008 @ 13:46:
Omdat je de innerhtml van teaser veranderd zodat alleen de afbeelding er nog in staat.

deze regel:
document.getElementById('teaser').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";

Ik zou de afbeelding in een aparte div zetten (zonder de pijltjes) en die een ander id meegeven.

Heel erg bedankt! Ik heb precies gedaan zoals je zei en het werkt perfect.

Nu vraag ik me nog af hoe ik in de overlay-div een stukje tekst aan een plaatje kan toevoegen.
Dus iets als:

code:

if(teaser1.jpg wordt afgebeeld){
                <div id="overlay">
                
                    <p>Tekst bij teaser1.jpg</p>
 
                </div>
}
else if(teaser2.jpg wordt afgebeeld){
                <div id="overlay">
                
                    <p>Tekst bij teaser2.jpg</p>
 
                </div>
}

Kan dat m.b.v. javascript oid?

[disjfa]

Verwijderd schreef op dinsdag 05 augustus 2008 @ 14:04:
[...]
Kan dat m.b.v. javascript oid?

Je zet je plaatje toch ook in je container Dan zou je toch ook gewoon tekst kunnen plakken.

[Noork]

Dit kun je toch ook gewoon met innerHTML doen?

Doordat je 'overlay' als naam gebruikt voor de div ben ik wel wat in de war. Ik neem aan dat dit niet iets zoals thickbox o.i.d. betreft?

[Verwijderd]

Bij de div overlay hoort gewoon wat css (background img, positie enzo), maar het is geen thickbox/lightbox oid.

Ik geloof dat ik nu snap hoe ik het moet doen, dus ik ga het even proberen

[Verwijderd]

Ik heb dit ervan kunnen maken, maar dat werkt niet. (alleen de tekst wordt veranderd, het plaatje niet)

code:

        <!-- Content midden -->
        <div id="midden">
    <script language='Javascript' type='text/javascript'>
        <!--
        var CurrentImage = 1;
        var TotalImages = 3; //Vervang de '?' door het aantal afbeeldingen voor je deze code gebruikt!

        function NextImage()
        {
            if(CurrentImage == TotalImages)
            {
                CurrentImage = 1;
            }
            else
            {
                CurrentImage += 1;
            }
            document.getElementById('Overlay').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";
        }

        function RandImage()
        {
            CurrentImage = Math.ceil(Math.random()*TotalImages);
            document.getElementById('Teaser').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";
        }

        function PrevImage()
        {
            if(CurrentImage == 1)
            {
                CurrentImage = TotalImages;
            }
            else
            {
                CurrentImage -= 1;
            }
            document.getElementById('Teaser').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";
        }

        function Overlay()
        {

            if(CurrentImage == 1)
            {
                document.getElementById('Overlay').innerHTML = "<p>Plaatje 1</p>";
            }                       
            if(CurrentImage == 2)
            {
                document.getElementById('Overlay').innerHTML = "<p>Plaatje 2</p>";
            }
            if(CurrentImage == 3)
            {
                document.getElementById('Overlay').innerHTML = "<p>Plaatje 3</p>";
            }
        }

        //-->
    </script> 

            <!-- Teaser -->
            <div id="teaser">
                    <div id="Teaser">
                    <img src="./images/teaser1.jpg" alt="" />
        </div>
            <a href="#" id="arrow_left" onClick="PrevImage(), Overlay()"></a><a href="#" id="arrow_right" onClick="NextImage(), Overlay()"></a>
                <div id="overlay">
                    <div id="Overlay">
                    <p>Plaatje 1</p>
        </div>
                </div>


            </div>

[Noork]

Moet je functies in de onclick niet scheiden d.m.v. een puntcomma i.p.v. een comma? Daarnaast lijkt het me handiger om er 1 functie van te maken.

[Verwijderd]

Hm, ik zou eigenlijk niet weten hoe ik er 1 functie van kan maken.

Ik heb de onclick gescheiden door een puntcomma. Als ik nu op het previouspijltje druk, werkt het prima.. maar als ik op next druk werkt het niet. Hij laat dan alleen de tekst veranderen.

[sky-]

Verander

code:

<img src="./images/teaser1.jpg" alt="" />

naar :

code:

<img src="./images/teaser1.jpg" alt="" id="plaatje" />

Daarna, verander je :

code:

document.getElementById('Teaser').innerHTML = "<img src='./images/teaser"+CurrentImage+".jpg'>";

In

code:

document.getElementById('plaatje').src = "./images/teaser"+CurrentImage+".jpg";

En klaar is Mindreaper

[ Voor 10% gewijzigd door sky- op 05-08-2008 14:51 ]

[Verwijderd]

Wowzers!
Het werkt perfect!

Noork en sky-, ik ben jullie eeuwig dankbaar!