1. #1
    Rutger's Avatar
    Registered
    12/06/03
    Location
    Turnhout
    Posts
    212
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Javascript : Foto in ware grootte

    Iemand javascriptje bij het klikken op een verkleinde foto dat hij dan in een apart venster op ware grootte wordt getoond?

    Grtz Rutger
    no votes  

  2. #2

    Registered
    22/09/04
    Posts
    45
    iTrader
    0
    Mentioned
    0 Post(s)
    <html>
    <head>
    <title>Untitled</title>

    <script language="Javascript" type="text/javascript">
    imagename='';
    function vergroot(beeldnaam)
    {
    OpenWin = this.open("","GrootVenster","toolbar=no,menubar=no ,location=no,scrollbars=no,resizable=no,status=no, width=320,height=275,left=241,top=200");
    imagename = beeldnaam;
    setTimeout('update()',500)
    }
    function update()
    {
    doc = OpenWin.document;
    doc.write('<HTML><HEAD><TITLE>Groot beeld popup<\/TITLE><\/HEAD><BODY bgcolor="#0000CC" onBlur="self.focus()">');
    doc.write('<center><IMG SRC="' + imagename + '">');
    doc.write('<form><input type="button" value="Gelieve dit venster hier te sluiten."onClick="window.close()"><\/form><\/center><\/BODY><\/HTML>');
    doc.close();
    }
    </script>

    </head>
    <body>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>


    </body>
    </html>




    deze, maar bij mij geeft ie de melding dat er dan een fout optreedt,
    misschien kan iemand ze hier verbeteren, wel niet op de img src letten
    no votes  

  3. #3
    Rutger's Avatar
    Registered
    12/06/03
    Location
    Turnhout
    Posts
    212
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Is idd al goed, maar moet eiglijk nen autostretch gebeure he, want der zijn wel fotos breder dan 320 pixels en hoger dan 275 pixels.. Of zitk ernaast?

    Quote Originally Posted by sir argeh
    This quote is hidden because you are ignoring this member. Show
    <html>
    <head>
    <title>Untitled</title>

    <script language="Javascript" type="text/javascript">
    imagename='';
    function vergroot(beeldnaam)
    {
    OpenWin = this.open("","GrootVenster","toolbar=no,menubar=no ,location=no,scrollbars=no,resizable=no,status=no, width=320,height=275,left=241,top=200");
    imagename = beeldnaam;
    setTimeout('update()',500)
    }
    function update()
    {
    doc = OpenWin.document;
    doc.write('<HTML><HEAD><TITLE>Groot beeld popup<\/TITLE><\/HEAD><BODY bgcolor="#0000CC" onBlur="self.focus()">');
    doc.write('<center><IMG SRC="' + imagename + '">');
    doc.write('<form><input type="button" value="Gelieve dit venster hier te sluiten."onClick="window.close()"><\/form><\/center><\/BODY><\/HTML>');
    doc.close();
    }
    </script>

    </head>
    <body>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

    <a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>


    </body>
    </html>




    deze, maar bij mij geeft ie de melding dat er dan een fout optreedt,
    misschien kan iemand ze hier verbeteren, wel niet op de img src letten
    no votes  

  4. #4
    S3cT0r's Avatar
    Registered
    09/03/03
    Location
    Kruibeke
    Posts
    111
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ik heb voor mijn site www.sp00fed.dk een stukje javascript gemaakt dat als je er op klikt dat het img dan in ware grootte wordt vertoond:
    Code:
    function win(id) {
    imgSelf = id.getAttribute('src')
    tempImg = new Image()
    tempImg.src = imgSelf
    iWidth = tempImg.width + 16, iHeight = tempImg.height + 16
    parameters = "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, "
    parameters += "width="+iWidth+", height="+iHeight
    window.open(imgSelf ,'screenshot', parameters)
    }
    voorbeeldtag
    Code:
    <a href="images/wow1.jpg" rel="external" onclick="win(this.firstChild); return false;"><img src="images/wow1.jpg" height="155px" width="185px" alt="Screenshot01" /></a>
    no votes  

  5. #5
    Lashknife's Avatar
    Registered
    17/07/02
    Location
    Boechout
    Posts
    3,081
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    <a href="image.jpg" target="_blank"><img src="image.jpg" ... /></a>

    Of heb je per se nood aan een fancy windowke met borders aan? dan moet je scripten...
    Visit www.holysh1t.net and http://tv.holysh1t.net and join #qlpickup.eu for Quake Live CTF (and TDM) pickup!
    no votes  

  6. #6
    Rutger's Avatar
    Registered
    12/06/03
    Location
    Turnhout
    Posts
    212
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    En stel, ge hebt allemaal kleine images, en ge maakt daarnaast een groter img die leeg is, als ge dan op 1 van die thumbs klikt, hoe laadt ge dat dan in in die grote <img> ???
    no votes  

  7. #7
    Lashknife's Avatar
    Registered
    17/07/02
    Location
    Boechout
    Posts
    3,081
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    euh, jouw vraag is nogal beperkt dan eh!

    je vroeg, hoe kan ik als ik op een verkleinde foto klik, dat die foto dan realsize in een ander window geopend wordt...

    niet: ik wil een script dat random images in een array kan doorlopen met prev/next buttons en waarvan ik het lijstje dynamisch genereer in een apart window met html opmaak laten openen.

    maw: gewoon een link naar zichzelf, en dan opent de browser die image op zich (en da's default real size (behalve IE die clientside die instelling hebben om auto image resize te doen met da icoontje met oranje pijltjes)

    dus veronderstel ik dat gij manueel intypt: <a href="image.jpg" target="_blank">link naar image in new window</a> en ik vervang de tussentekst met diezelfde image, maar dan met width en height attributes, alles manueel ingetypt, maar die vereiste heb jij niet gevraagd.... (maar zoals ik dan ook zei: als je fancy stuff wil, moet je scripten)

    Visit www.holysh1t.net and http://tv.holysh1t.net and join #qlpickup.eu for Quake Live CTF (and TDM) pickup!
    no votes  

  8. #8
    Rutger's Avatar
    Registered
    12/06/03
    Location
    Turnhout
    Posts
    212
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ja, of zoiets met pijltjes met Previous en Next is ook goed. Het probleem is dat het eerste script dat hierop stond, zoiets dat ik dus zocht niet werkt met mijn Asp.Net applicatie (gaat niet in combinatie met de quotes) Blame MS daarvoor...

    Ik werk in men projectje met een DataRepeater. Kan ik dan zo een soort van albummeke maken met Vorige en Volgende knop? Iemand met ervaring daarover?

    Grtz
    no votes  

  9. #9
    RpR's Avatar
    Registered
    26/03/03
    Location
    Dendermonde
    Posts
    5,472
    iTrader
    28 (100%)
    Mentioned
    0 Post(s)
    Reputation
    1/8
    Quote Originally Posted by Rutger
    This quote is hidden because you are ignoring this member. Show
    Ja, of zoiets met pijltjes met Previous en Next is ook goed. Het probleem is dat het eerste script dat hierop stond, zoiets dat ik dus zocht niet werkt met mijn Asp.Net applicatie (gaat niet in combinatie met de quotes) Blame MS daarvoor...

    Ik werk in men projectje met een DataRepeater. Kan ik dan zo een soort van albummeke maken met Vorige en Volgende knop? Iemand met ervaring daarover?

    Grtz
    use double quotes "" = "
    no votes  

  10. #10
    Boddah's Avatar
    Registered
    25/11/03
    Location
    Antwerpen
    Posts
    2,757
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/3
    het tonen van verkleinde foto's als thumbs is niet echt aan te raden, want dit betekend dat alle foto's op ware grootte worden gedownload, zelfs wanneer deze niet op ware grootte worden getoond.
    bv: 10 foto's van 640*480 van 100kb elk, betekend dus 1mb om enkel het album overzicht te tonen. beter is om van die foto's 10 thumbs te maken, die 20, 30 keer minder opslag vragen waardoor de pagina sneller laadt.
    Free online cycling manager
    no votes  

  11. #11
    Lashknife's Avatar
    Registered
    17/07/02
    Location
    Boechout
    Posts
    3,081
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    kweet wel boddah, maar kging er van uit dat dat wel normaal zou zijn
    maar ik kan het niet meer editten...

    <a href="realsizeimage.jpg" target="_blank"><img src="thumbimage.jpg" ........ /></a>
    Visit www.holysh1t.net and http://tv.holysh1t.net and join #qlpickup.eu for Quake Live CTF (and TDM) pickup!
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in