Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Automatically resize pop-up window to fit jpg

    Hello,

    I would like to create a pop-up window that will automatically resize the window to match the size of the jpg.

    For example if the jpg is 500x400 pixels then when you click on the link the pop-up windows will be just the size to fit it neatly.

    I would like this with only javascript (no cgi) and as simple as possible. Also if it could work on older browsers that would be great.

    Is this possible and thanks for your help.

  • #2
    New Coder
    Join Date
    Dec 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To resize a window use:

    window.self.resizeTo

    So, try something like this (this code is untested)

    function calc()
    {
    //find the height of the internal page
    var the_height=document.scrollHeight;
    var the_width=document.scrollWidth;
    window.self.resizeTo(the_width,the_height);
    }

  • #3
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Mark:

    This code has been tested, but please, test it AS IS. Don't try to cut and paste portions of it in to another document prior to getting this COMPLETE document working.

    It automatically displays a centered pop-up, the exact size of the subject image, when the user clicks "thumbnail" image.

    Pay attention to the image path, if any.

    Code:
    <HTML>
    <Head>
    <Script type="text/javascript">
    
    	var largerView = "";
    	var winToggle = false;
    
    	function openFullSize(Pix,isDesc){
    		
    		if (winToggle){largerView.close()}
    		document.getElementById('nullIMG').src = Pix;
    		var wStr = document.getElementById('nullIMG').width;
    		var offsetW = wStr;
    		wStr = wStr+20;
    		wStr = "width="+wStr;
    		var hStr = document.getElementById('nullIMG').height;
    		var offsetH = hStr;
    		hStr = hStr+20;
    		hStr = "height="+hStr;
    		var lStr = (screen.width-50-offsetW)/2;
    		lStr = "left="+lStr;
    		var tStr = (screen.availHeight-50-offsetH)/2;
    		tStr = "top="+tStr;
    		largerView = window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+"");
    		largerView.document.title = isDesc;
    		winToggle = true;
    	}
    
    	function buildSupport(){
    
    		var styleStr = "<style>.thumb{cursor:pointer;border:solid blue 2px}</style>"
    		var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG ID='nullIMG'>&nbsp</Div>"
    		document.write(divStr);
    		document.write(styleStr);
    	}
    	
    	buildSupport();
    
    	window.onunload=function(){
    
    		if (winToggle && !largerView.closed){largerView.close()}
    	}
    </Script>
    </Head>
    <Body>
    <Img Src='1/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'>
    <Img Src='1/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'>
    <!-- The following line must be the LAST line in the Body -->
    <Script> document.getElementById('nullIMG').src = document.images[1].src </Script>
    </Body>
    </HTML>

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow thanks Ancora,

    Actually I need a link to make the image pop-up not a thumbnail.

    Is there an easy way to get all this into an existing website?

  • #5
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Mark:

    This is the only way I could get it to reliably work with "links," in FF an IE6.

    Again, test it AS IS. It's a completely different document.

    You know, incorporating it "easily" in to your existing code is your responsibility.

    I wouldn't have responded if not for your prior courtesy, but I know that you didn't come here expecting to rely upon others to complete your project.

    Code:
    <HTML>
    <Head>
    <Script type="text/javascript">
    
    	var largerView = "";
    	var winToggle = false;
    
    	function openFullSize(Pix){
    		
    		if (winToggle){largerView.close()}
    		document.getElementById('nullIMG').src = Pix;
    		var wStr = document.getElementById('nullIMG').width;
    		var offsetW = wStr;
    		wStr = wStr+20;
    		wStr = "width="+wStr;
    		var hStr = document.getElementById('nullIMG').height;
    		var offsetH = hStr;
    		hStr = hStr+20;
    		hStr = "height="+hStr;
    		var lStr = (screen.width-50-offsetW)/2;
    		lStr = "left="+lStr;
    		var tStr = (screen.availHeight-50-offsetH)/2;
    		tStr = "top="+tStr;
    		largerView = 
    
    window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+"");
    		winToggle = true;
    	}
    
    	function buildSupport(){
    
    		var styleStr = 
    
    "<style>.thumb{display:none}.mimic{color:blue;cursor:pointer}</style>"
    		var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG 
    
    ID='nullIMG'>&nbsp</Div>"
    		document.write(divStr);
    		document.write(styleStr);
    	}
    	
    	buildSupport();
    
    	window.onunload=function(){
    
    		if (winToggle && !largerView.closed){largerView.close()}
    	}
    </Script>
    </Head>
    <Body>
    <Img Src='1/Any.jpg' class='thumb' id='img1'> 
    <span class='mimic' onclick="openFullSize(document.getElementById('img1').src)"> Any </span>
    <br>
    <Img Src='1/Some.jpg' class='thumb' id='img2'>
    <span class='mimic' onclick="openFullSize(document.getElementById('img2').src)"> Some </span>
    
    <!-- The following line must be the LAST line in the Body -->
    <Script type="text/javascript"> document.getElementById('nullIMG').src = document.images[1].src </Script>
    </Body>
    </HTML>
    Last edited by Ancora; 12-28-2005 at 10:35 PM.

  • #6
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Ancora
    Mark:

    This is the only way I could get it to reliably work with "links," in FF an IE6.

    Again, test it AS IS. It's a completely different document.

    You know, incorporating it "easily" in to your existing code is your responsibility.

    I wouldn't have responded if not for your prior courtesy, but I know that you didn't come here expecting to rely upon others to complete your project.

    Thanks again. I wasn't asking anyone to do the work for me but I am not an advanced user and appreciate any help. I was confused by your "As is" comment thinking it wouldn't work (or wasn't allowed) to use it if I chopped it up.

  • #7
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Mark:

    No, it's just that many times, I post working code, a complete document, and then the author of the thread responds: "That don't work at all, can someone else help me?" It's because he or she either fails or refuses to test the complete document, AS IS, before moving along.

    Chop it up, just get it to work first AS IS.

    And, forgive me, but the last line of code in the document should contain a [1] and not [0], for the .src.

    I've changed it in my post, be sure to correct it in your code.


  •  

    Posting Permissions

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