SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Age old

  1. #1
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Age old

    I'd like to have some thumbs open their bigger counterparts in a new window - sans scrollbars, and any toolbars I can lose. The problem is they are of varied sizes - is there any way of doing this with a function or do I need to code each picture by it's size?

    Cheers,
    H
    (PS, NOT my idea )
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  2. #2
    SitePoint Enthusiast nbaxley's Avatar
    Join Date
    Jan 2003
    Location
    Kansas
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could pass some reference to the image's ID to a function and then pull the height and width of the image from the image object. Then size your new window accordingly.
    Nate Baxley
    http://www.baxleys.org - no excusses, it is what it is.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Here ya go!
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <script language="javascript">
     //image preloading
     //fill in as many as you need.
     //is for the new image to open in the new window.
     var image1 = new Image;
     image1.src = "/images/MapleRidge-MA1.jpg"
    var win = null;
    function NewWindow(mypage,myname,w,h,scroll)
    {
    //fix the width, since we're taking in the image width, not
    //window width
    w += 20;
    h +=20;
    //positioning on screen
    	LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    	TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    	LeftPosition = LeftPosition / 1.01;
    	TopPosition = TopPosition / 1.08;
    	settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
    	win = window.open(mypage,myname,settings)
    }
    </script>
    </head>
    
    <title>Page title</title>
    </head>
    <body>
    <img src="/images/cnlway.jpg" onclick="NewWindow(image1.src, 'name', image1.width, image1.height, 'no');" />
    </body>
    </html>
    Last edited by vgarcia; Jan 16, 2003 at 13:13.

  4. #4
    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)
    These two scripts make popup images easy. You just call the popImg() function and pass one parameter: the source of the bigger image. The script takes care of the rest.
    Code:
    function popImg(imageURL) {
    	var imgWin = window.open('about :blank','imgWin','width=200, height=200, left=100, top=100');
    
    	with (imgWin.document) {
    		writeln('<html><head><title>Loading...</title>');
    		writeln('<style type="text/css"><!-- body { margin: 0px; } --></style></head>');
    		writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
    		close();		
    		}
    	var img = new Image();
            img.onload = function() { sizeImgWin(imgWin, img) };
    	img.src = imageURL;
    }
    	
    function sizeImgWin(win, img) {
       	var new_w = img.width;
    	var new_h = img.height;
    	var old_w = win.innerWidth || win.document.body.offsetWidth;
    	var old_h = win.innerHeight || win.document.body.offsetHeight;
    	if (!new_w) { new_w = old_w; }
    	if (!new_h) { new_h = old_h; }
    	new_w -= old_w; new_h -= old_h;
    	win.resizeBy(new_w,new_h);
    	win.document.title = img.src.substring(img.src.lastIndexOf("/")+1);
    	var pic = win.document.getElementById('pic');
    	pic.src = img.src;
    	pic.style.display = 'block';
    }
    Example
    Code:
    <img src="images/myPicSmall.jpg" onclick="popImg('images/myPicLarge.jpg');" />
    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





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
  •