JS Pop up foto

B1B1 · 2 mei 2007

Ik ben geen JS expert en gebruik onderstaand stukje js om foto's op een website als thumbs te showen en bij een muisklik in een nieuw window op groot formaat te tonen. Echter, de rechterkant valt er nu deels af en ik zie niet waar dat aan ligt... Waar kijk ik overheen?

//aan te passen
vanaf_links = 120;
vanaf_boven = 120;
grootste_breedte = 800+20;//afmetingen van het grootste beeld +20
grootste_hoogte = 800+20; //afmetingen van het grootste beeld +20
//hieronder niets wijzigen
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+grootste_breedte+',height='+grootste_hoogte+',left='+vanaf_links+',top='+vanaf_boven;
var optIE='scrollbars=yes,width=100,height=100,left='+vanaf_links+',top='+vanaf_boven;
function popBeeld(BeeldURL,BeeldTitel){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Bezig met inladen ...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function aanpassen_aan_beeldgrootte(){');writeln('if (isIE){');writeln('window.resizeTo(10,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["BeeldNaam"].width;');writeln('window.innerHeight=document.images["BeeldNaam"].height;}}');
writeln('function maak_titel(){document.title="'+BeeldTitel+'";}');writeln('</sc'+'ript>');
writeln('</head><body bgcolor=000000 scroll="no" onload="aanpassen_aan_beeldgrootte();maak_titel();self.focus()" onblur="self.close()">');
writeln('<img name="BeeldNaam" src='+BeeldURL+' style="display:block"></body></html>');
close();
}}

Egel · 3 mei 2007

B1B1 zei:
... om foto's op een website als thumbs te showen en bij een muisklik in een nieuw window op groot formaat te tonen.

PHP:

<html>
 <head>
  <title>PopUp venster | Egel 051018</title>

  <script language="JavaScript">
   <!-- PopUp venster | Egel 051018
    function show(photo,width,height,padding,color) {
     if (!padding) var padding = 0; padding = 2 * (padding + 2); // +2 => Fx!
     if (!color) var color = '#c0c0c0';
     var format = 'resizeable=no,width=' + (width + padding) + ',height=' + (height + padding);
     var title = photo.split('/'); title = title[title.length - 1]; title = title.split('.'); title = title[0];
     var console = open('','',format);
     function cw(text) { console.document.writeln(text);};
     console.document.open();
     cw('<html>');
     cw(' <head>');
     cw('  <title>' + title + '</title>');
     cw('  <style type="text/css">');
     cw('   body { margin: 0px; border: 0px; padding: 0px; background: ' + color + ';}');
     cw('   table { width: 100%; height:100%;');
     cw('  </style>');
     cw(' </head>');
     cw(' <body>');
     cw('  <table cellspacing="0" cellpadding="0"><tr><td align="center"><a href="javascript:window.close()"><img src="' + photo + '" border="0" title="Klik om dit venster te sluiten"></a></td></tr></table>');
     cw(' </body>');
     cw('</html>');
     console.document.close();
     return false;
     };
   // -->
  </script>

 </head>

 <body>
  <hr>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225)"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320)"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
  <hr>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225,10)"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320,10)"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
  <hr>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225,10,'black')"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320,10,'#000')"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
  <hr>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225,10,'white')"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320,10,'#fff')"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
  <hr>
 </body>

</html>

Zie bijlage! Daarin zit een werkend voorbeeld en een versie met een gelinkt javascript.

Vr.Gr. Egel.

Bij reactie #8 staat een verbetert script!

Stinuz · 5 mei 2007

Handig script, bedankt voor het delen

Ik zou alleen graag willen weten of het ook mogelijk is zo´n pop-up venster te openen als je op de thumbnail klikt, maar dat er dan een PHP bestand wordt weergeven ipv een foto.

Bijvoorbeeld het bestand foto1.php ? :thumb:

Egel · 6 mei 2007

Graag gedaan!

Ik weet niet of je dit precies bedoelt, maar het werkt wel mooi:

PHP:

<script type="text/javascript">
 // Egel 070506 ;)
 var console = {closed: true};
 function show(photo,width,height) {
  photo = 'photo.php?photo=' + photo;
  var format = 'resizeable=no,width=' + width + ',height=' + height;
  if (!console.closed) console.close();
  console = open(photo,'',format);
  return console.closed;
  };
</script>

<a href="128x512.jpg" target="_blank" onclick="return show('128x512.jpg',128,512);">128x512</a>
<a href="400x300.jpg" target="_blank" onclick="return show('400x300.jpg',400,300);">400x300</a>
<a href="512x128.jpg" target="_blank" onclick="return show('512x128.jpg',512,128);">512x128</a>

Een nieuw venster sluit indien nodig een vorige, zo is er telkens maar ééntje open.

Je roept er deze photo.php mee aan:

PHP:

<?php
 // Egel 070506 ;)
 $photo = $_GET['photo'];
 $title = split('\.',$photo);
 $click = 'Klik om dit venster te sluiten';
echo '<html>
 <head>
  <title>'.$title[0].'</title>
  <style type="text/css">
   body { margin: 0px; border: 0px; background: #c0c0c0; padding: 0px; overflow: hidden;}
   table { width: 100%; height: 100%;}
   img { border: 0px;}
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0">
   <tr>
    <td align="center"><a href="javascript:window.close()"><img src="'.$photo.'" title="'.$click.'"></a></td>
   </tr>
  </table>
 </body>
</html>
';
?>

photo.php?400x300.jpg (tweede link) geeft dan deze html:

PHP:

<html>
 <head>
  <title>400x300</title>
  <style type="text/css">
   body { margin: 0px; border: 0px; background: #c0c0c0; padding: 0px; overflow: hidden;}
   table { width: 100%; height: 100%;}
   img { border: 0px;}
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0">
   <tr>
    <td align="center"><a href="javascript:window.close()"><img src="400x300.jpg" title="Klik om dit venster te sluiten"></a></td>
   </tr>
  </table>
 </body>
</html>

Vr.Gr. Egel.

Stinuz · 6 mei 2007

Script werkt heel mooi maar is niet helemaal wat ik bedoel. Ik probeer het voor elkaar te krijgen de hele pagina (bijvoorbeeld memberlist.php) te weergeven in een javascript pop-up box.

Dus in plaats van dat hij een foto laat zien laat hij gewoon een hele pagina zien, snap je? :thumb:

Egel · 7 mei 2007

Tuurlijk!

PHP:

<html>
 <head>
  <title>openWindow</title>
  <script type="text/javascript">
   // Egel 070507 ;)
   function openWindow(url,width,height) {
    var format = 'scrollbars=yes,resizable=yes,' + (height ? 'width='+width+',height='+height : 'channelmode=yes');
    return window.open(url,'',format).closed;
    };
   function openUrl(url,width,height) {
    var format = 'scrollbars=no,resizable=no,width=' + width + ',height=' + height;
    return window.open(url,'',format).closed;
    };
  </script>
 </head>
 <body>
  <a href="memberlist.php" target="_blank" onclick="return openWindow('memberlist.php',640,480)">memberlist 640x480</a>
  <a href="memberlist.php" target="_blank" onclick="return openWindow('memberlist.php')">memberlist channelmode</a>
  <a href="memberlist.php" target="_blank" onclick="return openUrl('memberlist.php',640,480)">memberlist 640x480</a>
 </body>
</html>

channelmode (2e link) werkt wel mooi.

Vr.Gr. Egel.

B1B1 · 12 mei 2007

Dank voor antwoord & voorbeeld. Als ik het goed heb begrepen, verklein ik de plaatjes/foto's eerst, die toon ik als thumb en mbv js wordt dan de foto in groot formaat getoond?

Egel · 13 mei 2007

B1B1 zei:
Dank voor antwoord & voorbeeld. Als ik het goed heb begrepen, verklein ik de plaatjes/foto's eerst, die toon ik als thumb en mbv js wordt dan de foto in groot formaat getoond?

Precies!

Ik heb het script nog wat verbetert, als je de .zip bijlage download en uitpakt vindt je een voorbeeld met twee thumbs en grote foto's. index.html :

PHP:

<html>
 <head>
  <title>PopUp Photo | Egel 070507 ;)</title>
  <script type="text/javascript">
   <!-- PopUp Photo | Egel 070507 ;)
    var console = {closed: true};
    function show(photo,width,height) {
     var format = 'resizeable=no,width=' + width + ',height=' + height;
     var title = photo.substring(photo.lastIndexOf('/') + 1,photo.lastIndexOf('.'));
     var click = 'Klik om dit venster te sluiten';
     if (!console.closed) console.close();
     console = open('','',format);
     function cw(text) { console.document.writeln(text);};
     console.document.open();
     cw('<html>');
     cw(' <head>');
     cw('  <title>' + title + '</title>');
     cw('  <style type="text/css">');
     cw('   body { margin: 0px; border: 0px; background: #c0c0c0; padding: 0px; overflow: hidden;}');
     cw('   table { width: 100%; height: 100%;}');
     cw('   img { border: 0px;}');
     cw('  </style>');
     cw(' </head>');
     cw(' <body>');
     cw('  <table cellspacing="0" cellpadding="0">');
     cw('   <tr>');
     cw('    <td align="center"><a href="javascript:window.close()"><img src="' + photo + '" title="' + click + '"></a></td>');
     cw('   </tr>');
     cw('  </table>');
     cw(' </body>');
     cw('</html>');
     console.document.close();
     return console.closed;
     };
   // -->
  </script>
 </head>
 <body>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225)"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320)"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
 </body>
</html>

En de versie met een gelinkt javascript, index_js.html :

PHP:

<html>
 <head>
  <title>PopUp Photo | Egel 070507 ;)</title>
  <script type="text/javascript" src="popupphoto.js"></script>
 </head>
 <body>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225)"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320)"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
 </body>
</html>

popupphoto.js zet je dan in dezelfde map als je html.

Vr.Gr. Egel.

B1B1 · 20 mei 2007

OK, ik ga het proberen/testen, nogmaals dank.

JS Pop up foto

B1B1

Gebruiker

Egel

Terugkerende gebruiker

Bijlagen

Stinuz

Terugkerende gebruiker

Egel

Terugkerende gebruiker

Stinuz

Terugkerende gebruiker

Egel

Terugkerende gebruiker

B1B1

Gebruiker

Egel

Terugkerende gebruiker

Bijlagen

B1B1

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy