SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 39
  1. #1
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize a Popup to Fit an Image's Size

    These comments are in regards to the SitePoint.com article 'Resize a Popup to Fit an Image's Size'.

    quite an interesting little article, but my main gripe would be that the whole technique solely relies on javascript in order to work. now, based on the "perfect popup" (which uses javascript to do fancy things, but falls back to traditional methods in its absence...see Ian Lloyd's quite exhaustive article http://www.webmasterbase.com/article/955 ), here's what i would propose as an accessible alternative...provided that we have PHP (or any similar server-side processing language) available.

    firstly, let's look at the gallery page's code

    PHP Code:
    <HTML>
      <
    HEAD>
        <
    TITLE>The Image Gallery</TITLE>
        <
    script language="Javascript">
        function 
    PopupPic(sPicURL) {
          
    window.open"popup.htm?"+sPicURL""
          
    "resizable=1,HEIGHT=200,WIDTH=200");
        }
        
    </script>
      </HEAD>
    <BODY bgcolor="#FFFFFF">
        <a href="javascript:PopupPic('Image1.gif')">Image 1</a><br>
        <a href="javascript:PopupPic('Image2.gif')">Image 2</a><br>
        <a href="javascript:PopupPic('Image3.gif')">Image 3</a><br>
    </BODY>
    </HTML> 
    and make it more accessible (same technique as the perfect popup)

    PHP Code:
    <HTML>
      <
    HEAD>
        <
    TITLE>The Image Gallery</TITLE>
        <
    script language="Javascript">
        function 
    PopupPic(sPicURL) {
          
    newWin=window.opensPicURL'newWin'
          
    'resizable=1,HEIGHT=200,WIDTH=200');
          
    newWin.focus();
        }
        
    </script>
      </HEAD>
    <BODY bgcolor="#FFFFFF">
        <a href="popup.php?image=Image1.gif" onclick="PopupPic(this.href); return false;" target="_blank">Image 1</a><br>
        <a href="popup.php?image=Image2.gif" onclick="PopupPic(this.href); return false;" target="_blank">Image 2</a><br>
        <a href="popup.php?image=Image2.gif" onclick="PopupPic(this.href); return false;" target="_blank">Image 3</a><br>
    </BODY>
    </HTML> 
    the links will now work as before if javascript is enabled (the function PopupPic will be called...notice how this has been changed as well). if javascript is not enabled, then a standard target="_blank" window will be openend by the browser (and, failing that, it will open like any link in the same browser window for browsers which don't support the spawning of new windows).

    next, let's tackle popup.html

    PHP Code:
    <HTML>
    <
    HEAD>
      <
    TITLE>Fit the Pic Script</TITLE>
      <
    script language='javascript'>
        var 
    arrTemp=self.location.href.split("?");
        var 
    picUrl = (arrTemp.length>1)?arrTemp[1]:"";
        var 
    NS = (navigator.appName=="Netscape")?true:false;


    function 
    FitPic() {
    iWidth = (NS)?window.innerWidth:document.body.clientWidth;
    iHeight = (NS)?window.innerHeight:document.body.clientHeight;
    iWidth document.images[0].width iWidth;
    iHeight document.images[0].height iHeight;
    window.resizeBy(iWidthiHeight);
    self.focus();
    };
    </script>
    </HEAD>
    <BODY bgcolor="#000000" onload='FitPic();' topmargin="0"
    marginheight="0" leftmargin="0" marginwidth="0">
    <script language='javascript'>
    document.write( "<img src='" + picUrl + "' border=0>" );
    </script>
    </BODY>
    </HTML> 
    this page relies entirely on javascript, even to actually write the image tag. users without javascript would only see an empty page...
    if we shift at least the "tag-writing" functionality server-side, using PHP (but this can easily be done in any other language), we end up with something like this...


    PHP Code:
    <HTML>
    <HEAD>
      <TITLE>Fit the Pic Script</TITLE>
      <script language='javascript'>
        var NS = (navigator.appName=="Netscape")?true:false;


    function FitPic() {
    iWidth = (NS)?window.innerWidth:document.body.clientWidth;
    iHeight = (NS)?window.innerHeight:document.body.clientHeight;
    iWidth = document.images[0].width - iWidth;
    iHeight = document.images[0].height - iHeight;
    window.resizeBy(iWidth, iHeight);
    self.focus();
    };
    </script>
    </HEAD>
    <BODY bgcolor="#000000" onload='FitPic();' topmargin="0"
    marginheight="0" leftmargin="0" marginwidth="0">
    <img src='<?php echo $_GET['image'];?>' border='0' alt=''>
    </BODY>
    </HTML>
    and voila'...this should make it possible to offer this kind of popup gallery functionality for almost all browsers, regardless of javascript or no javascript...

    there are still some improvements that could be made (e.g. passing ALT information to the popup.php script as well), and it's probably possible to shift more of the javascript functionality server-side, but it would be beyond the scope of this comment, which mainly wants to show that little changes in the code can result in a good step towards accessibility and cross-browser functionality...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just been asked by PM how this would work in ASP...
    although it's trivially simple, here it is:

    my previous code remains mostly the same, just change the gallery page links from

    PHP Code:
    <a href="popup.php?image=Image1.gif" onclick="PopupPic(this.href); return false;" target="_blank">Image 1</a><br
    to

    PHP Code:
    <a href="popup.asp?image=Image1.gif" onclick="PopupPic(this.href); return false;" target="_blank">Image 1</a><br
    and change popup.asp (formerly known as popup.php) from

    PHP Code:
    <img src='<?php echo $_GET['image'];?>' border='0' alt=''>
    to

    PHP Code:
    <img src='<%
    dim image_name
    image_name=Request.QueryString("image")
    Response.Write(image_name)
    %>' 
    border='0' alt=''
    caveat: i'm not an ASP person, and don't have a system to test it on...but it does make sense at first glance...there's probably a more concise way of doing this, but hey...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    redux,

    Your code works, I'm just optimizing a little
    Code:
    <%
    dim image_name
    image_name=Request.QueryString("image")
    %>
    <img src="<%=image_name%>" border="0" alt="">

  4. #4
    Anonymous
    SitePoint Community Guest
    This RULEZ! thx a lot, i been searching longtime for such a script. Zillion

  5. #5
    Anonymous
    SitePoint Community Guest
    this is a really cool script. often we pop up images, but arent really sure what the image size is and users might have to scroll or the window is too big for the image.

    Neat.

  6. #6
    Anonymous
    SitePoint Community Guest
    neat article...really handy

  7. #7
    Anonymous
    SitePoint Community Guest
    Excellent script. One very small problem. It doesn't work in Opera 6 and only works in Opera 7 if the images are in the same folder as the html files (PC).

  8. #8
    Anonymous
    SitePoint Community Guest
    good idea. no go in IE5 mac, however.

  9. #9
    Anonymous
    SitePoint Community Guest
    Ok, very nice.

    But what's about a script, that centers the popup automatically on the screen?

    Ok, ok, I'm searching around this website. Somewhere I will find it! ;-)

  10. #10
    Anonymous
    SitePoint Community Guest
    Excellent tutorial on a common problem that plagues photo image galleries and overcomes the ugly method of a picture in the corner of a blank HTML page.

  11. #11
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah, this code works. Thanks redux, for the code & the guide.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  12. #12
    Anonymous
    SitePoint Community Guest
    This Script is HARDCORE!!

  13. #13
    Anonymous
    SitePoint Community Guest
    Thanks! This was most helpful on the Greenpeace Australia Pacific website.

    -Sunil Raman
    Web Administrator
    www.greenpeace.org.au

  14. #14
    Anonymous
    SitePoint Community Guest
    doesn't work with mozilla 1.6b....

  15. #15
    Anonymous
    SitePoint Community Guest
    .1% of people use mozilla 1.6b...

    Great script!

  16. #16
    Anonymous
    SitePoint Community Guest
    Great script. It does not work with Macintosh browsers.

  17. #17
    Anonymous
    SitePoint Community Guest
    Excellent, effective and to the point

  18. #18
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A comment:

    If it was possible to do the resize (and any repositioning it entails) invisibly - would anyone arrange to do it onscreen? I find that resize less than aesthetic. IE at least allows it to be accomplished offscreen, typical security glitch. What about something like this?
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>~~~~ PXWin [ !project ] ~~~~</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    html {
    	margin: 0;
    }
    body {
    	margin-top: 6px;
    	background: url(http&#58;//www.grsites.com/textures/metal/metal031.jpg);
    }
    a:link, a:visited, a:hover, a:active {
    	display: block;
    	width: 120px;
    	margin: 2em .2em;
    	padding: 2px 4px;
    	font: 10pt "comic sans ms";
    	text-align: right;
    	text-decoration: none;
    	color: #fff;
    	border: 2px #fff outset;
    }
    a:hover, a:active {
    	text-align: left;
    	color: #ffccd0;
    	border-color: #bfb #ff0 #bdf #fff;
    	border-style: inset;
    }
    
    </style>
    <script type="text/javascript">
    
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    
    var PXpix =			/* [image url + '@' + image title] */
    [
    
    	"http://www.tu-dresden.de/phfikm/Kunstgeschichtefinal/gaughin.jpg@GAUGHIN" , 
    	"http://www.bartleby.com/124/nixon.gif@DICK" , 
    	"http://www.dieselonly.com/images/discography/cheeseburgerdeluxe.jpg@CHEESEBURGIE" , 
    	"http://www.azimut2001.com/images/sfondi/genova/cinque_terre.jpg@CINQUE-TERRE" , 
    	"http://www.movie-winners.com/posters/pix/casablanca.jpg@Here's lookin' at you, Kid..." ,
    	"http://www.millvalley94941.com/1929-fire-1.jpg@MILL VALLEY FIRE, 1929" ,
    	"http://www.flyingember.com/pcjr/motherboard.jpg@MOTHER" ,
    	"http://www.cmp.ucr.edu/exhibitions/ocean-view/adams/adams_pier.jpg@Scripps Pier / Ansel Adams" ,
    	"http://www.thailandtourismus.de/multimedia/pictures/fruit-800x600.jpg@~ fruit ~" ,
    	"http://www.weirdpicturearchive.com/img/tricks-drunksmokingcat.jpg@ Fluffy " ,
    	"http://www.spysupply007.com/Celebrity_Pics/Beatles/BEATLES.JPG@Beatles !!!"
    
    ];
    
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    
    function PXWin(oPXW_array, sPXW_background, bPXW_sticky, bPXW_clickclose)
    {
    	this.picarray = oPXW_array;
    	this.picobjs = new Object;
    	var sPicurl, sPictitle, iArraylength = oPXW_array.length, iLoop = 0;
    	for (; iLoop < iArraylength; ++iLoop)
    	{
    		oData = this.picarray[iLoop].split('@');
    		sPicurl = oData[0];
    		sPictitle = oData[1];
    		this.picobjs[sPicurl] = new Image();
    		this.picobjs[sPicurl].onload = function() {this.loaded = true};
    		this.picobjs[sPicurl].title = sPictitle;
    		this.picobjs[sPicurl].src = sPicurl;
    	}
    
    	this.background = sPXW_background;
    	this.sticky = bPXW_sticky;
    	this.clickclose = bPXW_clickclose;
    	this.PXWin = null;
    
    	this.open = function(urlkey)
    	{
    		var picobj = this.picobjs[urlkey];
    		if (!picobj.loaded)
    			return false;
    		if (this.PXWin && !this.PXWin.closed)
    		{
    			if (this.PXWin.document.images[0].src == picobj.src)
    			{
    				this.PXWin.focus();
    				return false;
    			}
    			else this.PXWin.close();
    		}
    		var w = picobj.width;
    		var h = picobj.height;
    		var title = picobj.title;
    		var src = picobj.src;
    		var l = (screen.availWidth - w) / 2;
    		var t = (screen.availHeight - h) / 2;
    
    		PXWin.sHTML = '';
    		PXWin.sHTML += '<html><head><title>' + title + '</title></head>';
    		PXWin.sHTML += '<body style="margin:0;background:#000;overflow:hidden;"';
    		PXWin.sHTML += (this.sticky) ? ' onblur="setTimeout(function(){self.focus()},200)"' : '';
    		PXWin.sHTML += (this.clickclose) ? ' onclick="self.close()"' : '';
    		PXWin.sHTML += '><img width="' + w + '" height="' + h + '" ';
    		PXWin.sHTML += 'style="border-width:0;cursor:pointer;"';
    		PXWin.sHTML += (this.clickclose) ? ' title="click to close"' : '';
    		PXWin.sHTML += ' src="' + src + '"></a></body></html>';
    
    		this.PXWin = open('javascript&#58;opener.PXWin.sHTML', 'PXWin', 'width='+w+',height='+h+',left='+l+',top='+t+',status=0');
    		if (this.PXWin && !this.PXWin.closed)
    			this.PXWin.focus();
    		return false;
    	}
    }
    
    var PXW = { open: function() {return false;} } //dummy
    onload = function()
    {
    	PXW = new PXWin(PXpix, '#000', true, true);
    }
    
    </script>
    </head>
    <body>
    <a href="http://www.tu-dresden.de/phfikm/Kunstgeschichtefinal/gaughin.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">gaughin</a>
    <a href="http://www.bartleby.com/124/nixon.gif" target="PXWin" 
    onclick="return PXW.open(this.href)">dick</a>
    <a href="http://www.dieselonly.com/images/discography/cheeseburgerdeluxe.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">cheeseburger</a>
    <a href="http://www.azimut2001.com/images/sfondi/genova/cinque_terre.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">Cinque Terre</a>
    <a href="http://www.movie-winners.com/posters/pix/casablanca.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">casablanca</a>
    <a href="http://www.millvalley94941.com/1929-fire-1.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">fire, 1929</a>
    <a href="http://www.flyingember.com/pcjr/motherboard.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">mobo</a>
    <a href="http://www.cmp.ucr.edu/exhibitions/ocean-view/adams/adams_pier.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">Scripps Pier</a>
    <a href="http://www.thailandtourismus.de/multimedia/pictures/fruit-800x600.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">fruits</a>
    <a href="http://www.weirdpicturearchive.com/img/tricks-drunksmokingcat.jpg" target="PXWin" 
    onclick="return PXW.open(this.href)">Fluffy</a>
    <a href="http://www.spysupply007.com/Celebrity_Pics/Beatles/BEATLES.JPG" target="PXWin" 
    onclick="return PXW.open(this.href)">Fab Four</a>
    </div>
    </body>
    </html>
    
    Last edited by adios; Mar 16, 2004 at 21:42.
    ::: certified wild guess :::

  19. #19
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ••• ! no es un bumpo ¡ •••

    Honestly... I just thought almost everyone was hell-bent on opening some more windows with pictures in them.

    Maybe not.
    ::: certified wild guess :::

  20. #20
    Anonymous
    SitePoint Community Guest
    Awesome script works perfectly!!!

  21. #21
    Anonymous
    SitePoint Community Guest
    Where's the functional with Firefox or other gecko-browsers?

  22. #22
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ?
    ------------>
    -------------> ...what's the frequency Kenneth?
    ------------->
    ------------->
    ::: certified wild guess :::

  23. #23
    SitePoint Zealot jammo's Avatar
    Join Date
    Dec 2003
    Location
    el paso tx
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to add scroll bars?

    how can i set my popup window to be resizable?
    Code:
    	<script language="Javascript"> 
    	//-- Resize a Popup to Fit an Image's Size
    	function PopupPic(sPicURL) { 
        window.open( "popup.php?"+sPicURL, "",  
        "resizable=0,HEIGHT=200,WIDTH=200");
    	}
    	</script>
    i have changed resizable=0 to = other numbers and nothing makes my images resizeable.
    some of my images are bigger than 1000 X 1000
    yet, the window that popups up only raches the edge of my monitor, and does not show any scrollbars for larger images.

    how can this be fixed?

  24. #24
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  25. #25
    SitePoint Zealot jammo's Avatar
    Join Date
    Dec 2003
    Location
    el paso tx
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    thanks.

    testing it out.


Bookmarks

Posting Permissions

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