login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Popup Foto

Offline TekRequest - 19/01/2005 19:04
Avatar van TekRequestNieuw lid Wie heeft een deftig popup script dat toelaat een foto te openen waarbij de afmeting van de foto dezelfde is als die van de popup, er mag geen wit meer te zien zijn dus,

dit is echter het geval bij het popupscript van deze site!
Er moeten er betere zijn!!

Hou er rekening mee dat niet elke foto dezelfde afmetingen heeft en aldus zou het handig zijn om zoeiets als een auto functie in het script verwrekt te zitten als dat bestaat, of moet alles wel degelijk manueel ingesteld worden dan??

MVG

10 antwoorden

Gesponsorde links
Offline Squirrel - 19/01/2005 19:13 (laatste wijziging 19/01/2005 19:14)
Avatar van Squirrel HTML interesse # uitleg #
##########

positionx = positie t.o.v. X
positiony = positie t.o.v. y

defaultwidth / height = zet dit 20 pixels groter dan de grootste afbeelding; nodig voor Netscape

var Autoclose = true: automatisch sluiten; false: niet automatisch sluiten

voor de rest niets veranderen!


# HEAD #
########

<script>

PositionX = 0;
PositionY = 0;

defaultWidth = 500;
defaultHeight = 500;

var AutoClose = true;

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='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Bestanden aan het laden...</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 reSizeToImage(){');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["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('<META HTTP-EQUIV="imagetoolbar" CONTENT="no"></head><body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('<META HTTP-EQUIV="imagetoolbar" CONTENT="no"></head><body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block">');
writeln('</body></html>');
close();
}}

</script>



# BODY #
########


Voor gewone link >> <a href="javascript:popImage('link/naar/afbeelding.gif','Titel nieuw venster')">Naam link</a>

Voor link dmv afbeelding >> <a href="javascript:popImage('link/naar/afbeelding.gif','Titel foto')"><img border="0" align="left" hspace="5" vspace="5" src="/link/naar/afbeelding/klein.gif"></a>

Rest >> <img src="link/naar/afbeelding.gif" hspace="3" vspace="3" border="0">

[EDIT]
Die dus niet hé, is een dubbelbe punt met een p achter.... verander ff moet dus popImage zijn!
Offline TekRequest - 19/01/2005 19:26
Avatar van TekRequest Nieuw lid mmm ca ne marche pas 
Offline Thomas - 19/01/2005 19:48 (laatste wijziging 19/01/2005 19:49)
Avatar van Thomas Moderator Maak een php-bestandje img.php:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>picture</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. <!--
  8. body {margin: 0;
  9.       padding: 0;}
  10. //-->
  11. </style>
  12. </head>
  13.  
  14. <body>
  15. <div align="center">
  16. <?php
  17. if(file_exists($_GET['src']) && isset($_GET['h']) && isset($_GET['w'])) {
  18. ?>
  19. <img src="<?= $_GET['src'] ?>" height="<?= $_GET['h'] ?>" width="<?= $_GET['w'] ?>" alt="" border="0" /><br />
  20. <?php
  21. }
  22. ?>
  23. </div>
  24. </body>
  25. </html>


En open plaatjes in deze img.php met JavaScript.

Declaratie:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  3. var raam = null;
  4.  
  5. function wopen(breedte, hoogte, bron, titel) {
  6. 	var links = Math.round(screen.width/2 - breedte/2);
  7. 	var boven = Math.round(screen.height/2 - hoogte/2);
  8. 	if(raam != null) raam.close();
  9. 	raam = window.open("img.php?src="+bron+"&h="+hoogte+"&w="+breedte, titel, "width="+breedte+",height="+hoogte+",top="+boven+",left="+links+",scrollbars=no,resizable=no,menubar=no");
  10. }
  11. //-->
  12. </script>


Aanroep:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="javascript:void(wopen(771, 237, 'img/20021025.gif', 'picture'));">plaatje</a>


Voorbeeld:
klik
Offline TekRequest - 19/01/2005 19:51
Avatar van TekRequest Nieuw lid Deze is echt goed !
...Maar spijtig genoeg ondersteung skynet geen php ! vertoemen!!!
Offline BladiN - 19/01/2005 20:00
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde
Citaat:
<head>
<script type="text/javascript">
function PrevFoto(img){
foto1= new Image();
foto1.src=(img);
Controle(img);
}
function Controle(img){
if((foto1.width!=0)&&(foto1.height!=0)){
viewFoto(img);
}
else{
functie="Controle('"+img+"')";
interval=setTimeout(functie,20);
}
}
function viewFoto(img){
breed=foto1.width+0;
hoog=foto1.height+0;
string="width="+breed+", height="+hoog+", screenX=" + ((screen.width - breed) / 2) +", screenY=" + ((screen.height - hoog) / 2) +", top=" + ((screen.height - hoog) / 2) +", left=" + ((screen.width - breed) / 2) +"";
venster=window.open(img,"",string);
venster.document.write('<HTML><head><title>Feest</title></head><BODY topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">');
venster.document.write('<img src="' + img + '" alt="" border="0" width="' + breed + '" height="' + hoog + '">');
venster.document.write('</BODY></HTML>');
}
</script>

</head>


<a href="javascript:PrevFoto('urlvdfoto.jpg');">Foto</a>
Offline Thomas - 19/01/2005 20:02 (laatste wijziging 19/01/2005 20:02)
Avatar van Thomas Moderator Hmm...
Je kon ook met raam.document.write() HTML naar je popup schrijven (dus daarin moet ongeveer de code komen te staan die in img.php staat), maar volgens mij blijft dan die popup op een of andere manier laden (of iets anders vreemds?), maar dat zal in ieder geval werken.

EDIT: Dus wat BladiN voorstelt 
Offline Squirrel - 19/01/2005 22:06 (laatste wijziging 19/01/2005 22:07)
Avatar van Squirrel HTML interesse :cool: zeg kerel, ik gebruik dat scriptje wat ik postte altijd al.... dus werkt zeker! enfin ja..

En is nog handig.. niet rechts klikken, geen image balkje in windows xp erbij, en als je erlangs klikt flipt het weg!

grtz,
Kris
Offline TekRequest - 20/01/2005 10:42
Avatar van TekRequest Nieuw lid hehe je bent wel bedankt om het te posten tis niet van dat, maar er zit nogal lelijke witruimte tussen :-s en dan geeft em nog een error ook als ik uw script gebruik strange
Offline Dekin - 20/03/2005 21:06 (laatste wijziging 20/03/2005 21:06)
Avatar van Dekin Nieuw lid Head
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="Javascript" type="text/javascript" >
  2. //aan te passen
  3. vanaf_links = 100;
  4. vanaf_boven = 100;
  5. grootste_breedte  = 500+20;//afmetingen van het grootste beeld +20
  6. grootste_hoogte = 500+20;  //afmetingen van het grootste beeld +20
  7. //hieronder niets wijzigen
  8. if (parseInt(navigator.appVersion.charAt(0))>=4){
  9. var isNN=(navigator.appName=="Netscape")?1:0;
  10. var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
  11. var optNN='scrollbars=no,width='+grootste_breedte+',height='+grootste_hoogte+',left='+vanaf_links+',top='+vanaf_boven;
  12. var optIE='scrollbars=no,width=150,height=100,left='+vanaf_links+',top='+vanaf_boven;
  13. function popBeeld(BeeldURL,BeeldTitel){
  14. if (isNN){imgWin=window.open('about:blank','',optNN);}
  15. if (isIE){imgWin=window.open('about:blank','',optIE);}
  16. with (imgWin.document){
  17. writeln('<html><head><title>Bezig met inladen ...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
  18. writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
  19. writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
  20. writeln('function aanpassen_aan_beeldgrootte(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
  21. writeln('width=100-(document.body.clientWidth-document.images[0].width);');
  22. writeln('height=100-(document.body.clientHeight-document.images[0].height);');
  23. writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
  24. writeln('window.innerWidth=document.images["BeeldNaam"].width;');writeln('window.innerHeight=document.images["BeeldNaam"].height;}}');
  25. writeln('function maak_titel(){document.title="'+BeeldTitel+'";}');writeln('</sc'+'ript>');
  26. writeln('</head><body bgcolor=000000 scroll="no" onload="aanpassen_aan_beeldgrootte();maak_titel();self.focus()" onblur="self.close()">');
  27. writeln('<img name="BeeldNaam" src='+BeeldURL+' style="display:block"></body></html>');
  28. close();		
  29. }}
  30. </script>

Body
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="javascript:popBeeld('foto1.jpg','titel')">
  2. <img src="foto1.jpg" height=30 width=40 border="0" alt="klik voor de foto op originele grootte"></a>
Bedoel je dat:?:  
Offline ikkedikke - 20/03/2005 21:41
Avatar van ikkedikke PHP expert <img src='foto' id='foto' onclick=win(this) width=200 height=200>
<script>
function win(obj)
{
myWin = open(obj.src, 'winin','toolbar=0,menubar=0,scrollbars=0,status=0,resiza
ble=no,width='+obj.width+',height='+obj.height);
}
</script>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.278s