Foto openen midden vd pagina

Goedemiddag allemaal!

Ik ben momenteel bezig met een foto pagina.. Lukt allemaal aardig alleen...

Ik wil graag dat als je op een foto klikt om uit te vergroten dat de foto in het midden van de pagina verschijnt. Nu word de foto groter op de plek waar de foto staat..

Wie kan me helpen?

Hier het script:
http://codeviewer.org/view/code:1e0b

Alvast bedankt!

Gr. Ruben

31-08-2011 14:45

Dit topic is 170 keer bekeken door 27 verschillende leden

Reacties op: "Foto openen midden vd pagina"

zwpgangster

world-of-maffia.nl

Berichten: 744

Dit is een lightbox

Bekijk de onderstaande website en donwload het.
(filmpjes, tekst, afbeeldingen en flash bestanden)

http://fancybox.net/

Als je het gedownload hebt, instructie:

	Code \| Selecteer Alles


<html>
<head>
<title>Websitenaam</title>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
</head>
<body>
<script type="text/javascript"> 
$(document).ready(function() {
    
    $("a#single_image").fancybox();    
    $("a#inline").fancybox({
        'hideOnContentClick': true
    });    
    $("a.group").fancybox({
        'transitionIn'    :    'elastic',
        'transitionOut'    :    'elastic',
        'speedIn'        :    600, 
        'speedOut'        :    200, 
        'overlayShow'    :    false
    });
    
});
</script>

<!-- 
Wil je inplaats van 1 afbeelding een gallerij? verander hier boven dan: $("a.group").fancybox({ in $("a.grouped_elements").fancybox({
-->




<!-- 1 afbeelding -->
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
<!-- Einde 1 afbeelding -->


<!-- Afbeelding gallerij-->
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>     
<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 
<!-- Afbeelding gallerij-->
</body>
</html>