10 berichten aan het bekijken - 1 tot 10 (van in totaal 10)
  • Q:
    Bijdrager
    kie_ken
    30 juli 2006 om 16:30

    [CSS] Mini-gallerij (opgelost)

    Ik ben bezig met het ontwikkelen van een “mini-gallerij” maar ik ben nog maar een leek op css-vlak en dergelijk.
    Het is de bedoeling dat de gebruiker keuze heeft tussen enkele afbeeldingen en met een muisbeweging de gekozen afbeelding kan vergroten. Het “vergroten” heb ik ondertussen al gevonden maar ik zoek nog naar een oplossing om te wisselen tussen de afbeeldingen.

    Hier (link verwijderd) zie je min of meer wat ik bedoel. Je kan (normaal gezien) de afbeelding vergroten door er met de muis op te staan. De cijfers eronder zouden links moeten zijn om te wisselen tussen de afbeeldingen. Als je op “2” klikt bijvoorbeeld dan zou deze afbeelding ipv de vorige moeten komen en deze zou je weer moeten kunnen vergroten …

    Ik hoop dat ik duidelijk genoeg ben en me iemand wil helpen of al op weg kan steken.

    gracias :innocent:

    Bijdrager
    freshface
    30 juli 2006 om 16:35

    Het is zeer duidelijk.
    JavaScript is het antwoord.

    Op de knoppen zet je dit;
    [code:1:bff2783e45]<a onclick="return swapImage(this)" href="test1.jpg">1</a>
    <a onclick="return swapImage(this)" href="test2.jpg">2</a>
    <a onclick="return swapImage(this)" href="test3.jpg">3</a>
    <a onclick="return swapImage(this)" href="test4.jpg">4</a>[/code:1:bff2783e45]

    Javascript:

    [code:1:bff2783e45]function swapImage (wich) {
    if (document.getElementById) {
    document.getElementById(’imageHolder’).src = wich.href;
    return false;
    }
    }
    [/code:1:bff2783e45]

    Om alles te tonen

    [code:1:bff2783e45]<img id="imageHolder" src="test1.jpg" />[/code:1:bff2783e45]

    Bijdrager
    kie_ken
    30 juli 2006 om 16:44

    mercie, het werkt… al gedeeltelijk.

    Als je de afbeelding vergroot (zie voorbeeld online – link verwijderd) dan blijft dit nog de eerste.

    Bijdrager
    kie_ken
    30 juli 2006 om 16:56

    found it

    [code:1:e2a86697bf]document.getElementById(’imageHolderBig’).src = wich.href;[/code:1:e2a86697bf]
    Heb dit nog eens bij de javascript gevoegd… en een id bij die vergrote afbeelding.

    Bijdrager
    freshface
    30 juli 2006 om 17:03

    Nice.
    Dan kan ik al je code eens kopieren;)

    Bijdrager
    kie_ken
    30 juli 2006 om 17:11

    k zal het dan nog eventjes online laten staan:) … u heeft 2min de tijd

    Bijdrager
    DEform
    30 juli 2006 om 19:38

    Waarom worden de links verwijderd?
    Nu kan ik niet volgen

    Bijdrager
    kie_ken
    30 juli 2006 om 20:16

    omdat ze anders op mijn webspace maar blijven rondslingeren (als je de oplossing wil dan stuur je maar een pm)

    Bijdrager
    hansenonline
    30 juli 2006 om 20:47

    kan je de code niet gewoon in dit topic plaatsen?

    Bijdrager
    kie_ken
    30 juli 2006 om 20:52

    dat is inderdaad ook nog een idee :mrgreen:

    [code:1:09d7e1fcf7]<html>
    <head>
    <title>Mini Gallery</title>
    <script language="javascript">
    function swapImage (wich) {
    if (document.getElementById) {
    document.getElementById(’imageSmall’).src = wich.href;
    document.getElementById(’imageLarge’).src = wich.href;
    return false;
    }
    }
    </script>
    <style type="text/css">
    #image {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}
    #image a.p1, #image a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
    #image a img {border:0;}
    #image a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
    #image a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
    #image a.p1:hover .large {display:block; position:absolute; top:-60px; left:150px; width:300px; height:300px; border:10px solid #fff;}
    </style>
    </head>
    <body>
    <div id="image">
    <a class="p1" href="#nourl" title="thumbnail image"><img id="imageSmall" src="small1.jpg" title="Thumbnail image" alt="Thumbnail image" /><img id="imageLarge" class="large" src="small1.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a><br />
    <a onclick="return swapImage(this)" href="small1.jpg">1</a> <a onclick="return swapImage(this)" href="small2.jpg">2</a> <a onclick="return swapImage(this)" href="small3.jpg">3</a>
    </div>
    </body>
    </html>[/code:1:09d7e1fcf7]

10 berichten aan het bekijken - 1 tot 10 (van in totaal 10)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.