Foto in pop-up laden

Status
Niet open voor verdere reacties.
C

chrispool

Gebruiker
Lid geworden
22 mei 2007
Berichten
5
He mensen. Ik ben een leek op het gebied van PHP maar wil het graag leren. Ben bezig met een portfolio site. Ik heb nu een foto gedeelte gemaakt. waarbij ik eerst thumbnails laat zien, als je daar op klikt een grotere foto. Nu wil ik dat als ik op de iets grotere foto klik het orgineel in een pop-up krijg met daaronder de functie "sluit scherm"

dit is het PHP bestand gemaakt met behulp van veel googelen en een script die op phpfreakz.nl staat.

//fotografie.php

<?php

$i=1;
$dir = "includes/portfolio/foto/images/thumbs/";
$bigdir = "includes/portfolio/foto/images/full/";
$original = "includes/portfolio/foto/images/original/";

echo '<table>';

if ($handle = opendir($dir)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$i++;

if ($i%20=='1'){ echo '<tr><td>'; }else{ echo '<td> '; }

echo "<a href=\"index.php?item=portfolio&onderwerp=fotografie&file=$file\"><img src=\"$dir/$file\" border=\"1\"></a>";

if ($i%20=='1'){ echo '</td></tr>'; }else{ echo '</td>'; }
}
}
echo '</table>';
closedir($handle);
}
?>


</div>

<div id="foto">
<?
if (isset($_GET['file']))
{
$file = $_GET['file'];

$endpos = strlen($file) - 4;
$file = substr($file, 0, $endpos);

echo "<a href=\"$original$file.jpg\" target=\"_blank\"><img src=\"$bigdir$file.jpg\" border=\"1\" /></a>";
}
?>
<BR><BR>
klik op de foto voor een vergroting
</div>

Ik heb de regel die ik denk ik moet gebruiken rood gemaakt.

is a onClick="window.open een optie?
 
Als je veel informatie over webdesighn wil hebben kan je naar deze site gaan.
Er staan veel scripts op en nog meer handige tools voor websites.

www.anouksweb.nl

Laat maar een replay achter als je er wat aan hebt gehad.
Btw volgens mij is dit wat je zoekt:

Deze code moet tussen de headtag van je pagina:

<script language="JavaScript">
<!--
function MM_reloadPage(init) {
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
<script language="Javascript">
<!--
var linkerkant = 60;
var bovenkant = 60;
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=10,height=10,left='+linkerkant+',top='+bovenkant;
var optIE='scrollbars=no,width=10,height=10,left='+linkerkant+',top='+bovenkant;
function popFoto(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(100,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();
}}
function MM_callJS(jsStr) {
return eval(jsStr)
}
//-->
</script>

En deze code moet tussen de bodytags van je pagina:

<div align="center"><BR>
<BR>
<BR>
<div id="Layer1" style="position:absolute; width:327px; height:63px; z-index:1; left: 228px; top: 178px">
<img style=border-color:blue src="1.jpg" border="3" width="60" height="60" onMouseOver="MM_callJS('javascript:popFoto(\'1.jpg\',\'Wat een scheetje\')')">
<img style=border-color:yellow src="2.jpg" border="3" width="60" height="60" onMouseOver="MM_callJS('javascript:popFoto(\'2.jpg\',\'Ooooh wat lief !!\')')">
<img style=border-color:blue src="3.jpg" border="3" width="60" height="60" onMouseOver="MM_callJS('javascript:popFoto(\'3.jpg\',\'Sta even stil aub :-)\')')">
<img style=border-color:yellow src="4.jpg" border="3" width="60" height="60" onMouseOver="MM_callJS('javascript:popFoto(\'4.jpg\',\'Drivers seat !!\')')">
<img style=border-color:blue src="5.jpg" border="3" width="60" height="60" onMouseOver="MM_callJS('javascript:popFoto(\'5.jpg\',\'schatje he?\')')">
<img style=border-color:yellow src="1.jpg" border="3" width="60" height="60" onMouseOver="MM_callJS('javascript:popFoto(\'1.jpg\',\'Wat een scheetje!!\')')">
<img style=border-color:yellow src="2.jpg" border="3" width="60" height="60" onMouseOver="MM_callJS('javascript:popFoto(\'2.jpg\',\'goh wat lief !!\')')">
</div>


Ik zie dat je het smilie :P etc ziet tussen de code door.
De code staat op www.anouksweb.nl
Dan tools ---> Pop up ---> Foto Popper

Is dit wat je zocht?

Met vriendelijke groet,

Maikel
 
Laatst bewerkt:
he maikel, bedankt voor je reply dit is wel wat ik zoek idd. Alleen hij moet geen mouseover doen maar alleen als ik erop klik, maar dat kan ik aanpassen, dank je wel!
 
Dit is anders ook wel een aardig alternatief.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan