javascript pup-op

k heb op een site een aantal kleine thumbnails staan van illustraties e.d., maar nu wil ik dat als je daarop klikt, er een popupje verschijnt met daarin een vergroting.

volgens mij kan je dit doen met javascript?

wie kan mij vertellen hoe dit werkt of een linkje naar een tutorial ed…

bedankt alvast,

[url=http://www.mijnhomepage.nl/javascript/popup-maken.php]KLIK[/url]

[url=http://www.pcurtis.com/popup_advanced.htm]Dit misschien?[/url]

En in mijn ogen is het een pop-up en geen pup-op :wink:

http://www.huddletogether.com/projects/lightbox2/ dit is een beter oplossing denk ik:)

bedankt, kga even kijken of het lukt en wat het beste werkt

Of een misschien is een [url=http://www.wandawanders.com/content/view/100/80/]CSS gallerij[/url] iets

[quote:85a7e82179="mr.greenish"]http://www.huddletogether.com/projects/lightbox2/ dit is een beter oplossing denk ik:)[/quote:85a7e82179]d

Nee! Die wordt echt te vaak gebruikt… (Ik gebruik het zelf ook omdat het simpel is… Daar niet van, maar wil eerst iets nieuws maken (d.m.v. Flash ofzo))

Waarom is het een slechte oplossing omdat het vaak gebruikt wordt? Als je het op de correcte manier gebruikt, dan kan het een erg handige tool zijn. Vele tools worden zoveel gebruikt, gebruik het gewoon niet om de "heb".

Ik zou zeggen, maak je eigen template ervoor, en dan heb je wat je wil. Je hoeft niet telkens het wiel opnieuw uit te vinden, en het biedt wat voordelen mbt popups etc.

De javascript:

[code:1:ec61606401]
function upm_pop_img(src, w, h, name, title)
{
ww = w ;
wh = h;

 if (ww < 175)

{
ww = 175;
}

if (wh < 100)
{
wh = 100;
}

if (!title)
{
title = name;
}

t = (screen.height) ? (screen.height - wh) / 2 : 0;
l = (screen.width) ? (screen.width - ww) / 2 : 0;

var upm_pop_win = window.open(’’, ‘upm_pop_win’, ‘top=’+t+’, left=’+l+’, width=’+ww+’, height=’+wh+’, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, copyhistory=no, resizable=yes’);

upm_pop_win.document.open();

    upm_pop_win.document.writeln&#40;'&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http&#58;//www.w3.org/TR/html4/strict.dtd&quot;&gt;'&#41;;

upm_pop_win.document.writeln(’<html>’);
upm_pop_win.document.writeln(’<html>’);
upm_pop_win.document.writeln(’<head>’);
upm_pop_win.document.writeln(’<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>’);
upm_pop_win.document.writeln(’<meta http-equiv=“imagetoolbar” content=“no”>’);
upm_pop_win.document.writeln(’<title>’+title+’</title>’);
upm_pop_win.document.writeln(’<style type=“text/css”>’);
upm_pop_win.document.writeln(’<!–’);
upm_pop_win.document.writeln(‘body {’);
upm_pop_win.document.writeln(‘margin: 0;’);
upm_pop_win.document.writeln(‘padding: 0;’);
upm_pop_win.document.writeln(‘color: #000;’);
upm_pop_win.document.writeln(‘background-color: #fff;’);
upm_pop_win.document.writeln(‘text-align: center;’);
upm_pop_win.document.writeln(‘overflow: hidden;’);
upm_pop_win.document.writeln(’}’);

    upm_pop_win.document.writeln&#40;''&#41;;

upm_pop_win.document.writeln(‘img {’);
upm_pop_win.document.writeln(‘margin: 0;’);
upm_pop_win.document.writeln(‘padding: 0;’);
upm_pop_win.document.writeln(‘border: none;’);

if &#40;wh == 100&#41;
    &#123;
         upm_pop_win.document.writeln&#40;'margin-top&#58; '+Math.floor&#40;50-&#40;h/2&#41;&#41;+'px'&#41;;

}

upm_pop_win.document.writeln(’}’);

    upm_pop_win.document.writeln&#40;'--&gt;'&#41;;
    upm_pop_win.document.writeln&#40;'&lt;/style&gt;'&#41;;

upm_pop_win.document.writeln(’</head>’);
upm_pop_win.document.writeln(’<body>’);
upm_pop_win.document.writeln(’<div id=“upm-image-view”>’);
upm_pop_win.document.writeln(’<img src="’+src+’" width="’+w+’" height="’+h+’" alt="">’);
upm_pop_win.document.writeln(’</div>’);
upm_pop_win.document.writeln(’</body>’);
upm_pop_win.document.write(’</html>’);

upm_pop_win.document.close&#40;&#41;;

   upm_pop_win.focus&#40;&#41;;

}
[/code:1:ec61606401]

Gebruik:

[code:1:ec61606401]
<a href=“images/fotos/groot/P1010003.jpg” onclick=“upm_pop_img(this.href, ‘600’, ‘450’, ‘’, this.title); return false;”>
<img src=“images/fotos/klein/P1010003.jpg” alt="" /></a>

[/code:1:ec61606401]

Ik gebruik het op www.sinkin.be en dan collecties.

harstikke bedankt voor jullie antwoorden.

ik heb alleen nog 1 vraagje… is lightbox vrij in gebruik?

Ja. je mag het alleen niet verkopen.

neej oke, maar ik bedoel als je een website maakt voor een klant mag je het dan ook toepassen?

Ja

oke

kan ik dat stukje code nu in een lege pagina steken en iedere keer require of include doen daarnaar?