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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Popup image viewer

    Well, I've long since wanted this, and finally have the JS knowledge to put it together. Basically, its a function-set that allows you to pass a single parameter (a valid URI to an image file) that opens a popup window that sizes to that image and places the image filename in the TITLE. No need for passing size-dimensions like so many scripts of this nature do. Plus, for those on slower connections, a nice "Loading..." title lets them know what's going on
    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.src = imageURL;
    	img.onload = function() { sizeImgWin(imgWin, img) };
    	}
    	
    function sizeImgWin(win, img) {
       	var new_w = img.width;
    	var new_h = img.height;
    	var old_w = self.innerWidth || document.body.offsetWidth;
    	var old_h = self.innerHeight || 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.document.title = img.src.substring(img.src.lastIndexOf("/")+1);
    	var pic = win.document.getElementById('pic');
    	pic.src = img.src;
    	pic.style.display = 'block';
    	}
    Below are a couple examples of use...
    Code:
    <a href="images/7.jpg" onclick="popImg(this.href); return false;">Pic 7</a>
    <input type="button" value="Image 9" onClick="popImg('images/9/jpg');" />
    Thanks to joh6nn for the inner resize algorithm

    Tested ok with IE6 and Moz 1.0
    Last edited by beetle; 11-14-2002 at 09:23 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    couple of errors
    - you used self instead of win in sizeImgWin(win, img) function
    - you forgot the resizeBy method
    - img.onload should be set first before setting img.src (If otherwise, it causes the same image not to load (img.onload does not fire) on 2nd call, at least in Mozilla 1.0, not in NS6.2 and IE5.5)
    - Access denied error in IE5.5 if the window is already opened and the image is clicked again. (don't know why this happens)

    here's the modified code:

    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';
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! To be honest, I didn't test this but on 3 or 4 pictures...and I can't recall if I remember that error in Moz or not....
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the cool, sexy Mozilla version
    Code:
    HTMLAnchorElement.prototype.popImg = function() {
    	var imgWin = window.open('about :blank','imgWin','width=200, height=200, left=100, top=100');
    	var d = imgWin.document;
    
    	d.writeln('<html><head><title>Loading...</title>');
    	d.writeln('<style type="text/css"><!-- body { margin: 0px; } --></style></head>');
    	d.writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
    	d.close();
    
    	var newImg = new Image();
    	newImg.onload = function() {
    		var new_w = this.width;
    		var new_h = this.height;
    		var old_w = imgWin.innerWidth || imgWin.document.body.offsetWidth;
    		var old_h = imgWin.innerHeight || imgWin.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;
    		imgWin.resizeBy(new_w,new_h);
    		imgWin.document.title = this.src.substring(this.src.lastIndexOf("/")+1);
    		var pic = imgWin.document.getElementById('pic');
    		pic.src = this.src;
    		pic.style.display = 'block';
    		};
    	newImg.src = this.href;
    	return false;
    	}
    
    <a href="someImage.jpg" onClick="return this.popImg">try it</a>
    I tried replacing the default onClick event so I wouldn't have to attach one, but I'm not knowledgable enough to get that done....yet
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nope...not working?

    thanks for the lead to the "auto" resizer...

    but it's not working. I've tried glenns code, then beetles, and while both pop up a box, it's empty?

    here's the current code (beetles one)

    Code:
    <%@ LANGUAGE ="VBSCRIPT" %>
    <% Option Explicit %>
    <%Response.Buffer = True%>
    
    <!-- NEW JAVASCRIPT WINDOWS FUNCTION HERE ---------------------------------------------------------------------------- -->
    <script language=Javascript type="text/Javascript">
    
    	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';
    }
    
    	</script>
    
    
    
    <%
    '-----------------------------------------------------------------------------------------------------
    '------- handler to find the # of pix in a folder, then display them in a table and provide
    '------- a javascript handler to pop up a new window holding the selected photo -------
    
    Dim fs, f, fc, f1, fileName, filePath, name, rowCount
    
    rowCount = 0
    
    %>
    <DIV style="position:absolute;left:20;top:50;width:500;height:1000;z-index:3;visibility:visible;">
    
    <%
    
    name = "images/pix"
    ' name and path to the photo folder...
    
    filePath = server.mappath(name)
    ' must find the file and it's path for following routine...
    
    set fs = CreateObject("Scripting.FileSystemObject")
    set f = fs.GetFolder(filePath)
    set fc= f.files
    ' create the object to grab the pix....
    %>
    <table>
    <tr>
    <%
    For each f1 in fc
    ' loop thru contents of whole folder...
    
    	fileName = (f1.name)
    	' get the name of each .jpg in that folder
    	%>
    <td>
    
    <a href="<%=fileName%>" onclick="popImg(this.href); return false;">
    
    <img src="images/pix/<%=fileName%>" width="80" border="0">
    
    </a>
    
    
    
    <%
    	rowCount = rowCount + 1
    
    	' response.write rowCount
    
    
    
    	if rowCount = 5 then
    
    		rowCount = 0
    
    		Response.write("</td></tr><tr>")
    	Else
    
    		Response.Write("</td>")
    	
    	End if
    Next
     
    SET f1 = Nothing 
    ' housekeeping here
    
    
    %>
    </tr>
    </table>
    
    </div>
    Jim

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what isn't working?

    can anyone see my problem?

    Jim

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i once made one of these and you could pass text to it to go under the image in the popup.
    i might post it if it is considerd aproriate/good enough.


    scroots
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I said id before and I'll say it again

    <a href="<%=fileName%>" onclick="popImg(this.href); return false;">

    Whatever is in the VB variable "fileName" must be the full path to the image. If it's not, then you need to add it

    <a href="path/to/image/<%=fileName%>" onclick="popImg(this.href); return false;">

    Is there a basic understanding of how URLs work that you're missing here?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #9
    New Coder
    Join Date
    Jul 2002
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks beetle...

    thanks! that works fine...

    and no, I do understand how to add the path to the fileName, it's just that I thought that this was ALREADY a part of the var...when it's not! dumb!

    now, I see the pix in all their glory...great!

    thanks all...and beetle especially!


    Jim

  • #10
    New Coder
    Join Date
    Jul 2002
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts

    You're all gonna kill me!!!

    Hi...
    <sheepish tone on>

    okay. this works fine....but some of the pix are still full size from the camera...

    is there a way that I can 'modify' the code to make each and every pix open up in a uniformly sized window? ie say something like 400 x 300 no matter what size they are?

    I ask because the client will give me these pix from a variety of cameras and they'll be in a variety of sizes too...

    I've poured over the js and I can't find a way to alter the var new_w or new_h to allow me to put in a wired number???

    Jim

    PS <sheepish tone off>

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    writeln('<body onload="self.focus();"><img id="pic" style="display:none" width="400" height="300" /></body></html>');
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    New Coder
    Join Date
    Jul 2002
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Perfect!

    Perfect, fellas..thanks one and all!

    Your help has been very much appreciated! If ever you've a vbScript problem in ASP, email me direct! I owe ya...

    Jim

  • #13
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    beetle...

    I've made some slight modifications to your code:

    1) Downlevel browsers simply use window.open() instead. This includes Opera 6 and 7.
    2) After the image resizes, it then gets centered on the screen. (Actually, it's centered horizontally, but vertically it's centered, and then moved up 10% of the distance between the top of the screen and the top of the image... just because it looks a smidge nicer...)
    3) I've named it "ImagePOP", 'cause I think it sounds like a cool product name. I hope you concur.

    Code:
    /*******************************
    IMAGEPOP
    (c) 2003, Peter Bailey, http://www.peterbailey.net
    Modified by Skyzyx Genesis, http://www.skyzyx.com
    
    - Works in IE5+, Gecko 0.94+ (maybe earlier?)
    - Downlevel for Opera.
    - Probably works in KHTML browsers
    *******************************/
    
    function imgPop(imageURL)
    {
    	if (document.getElementById && navigator.userAgent.toLowerCase().indexOf('opera') == -1)
    	{
    		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;
    	}
    	else window.open(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';
    
    	sw=screen.width;
    	sh=screen.height;
    
    	var leftPos=((sw-new_w)/2)-100; // Exactly centered.
    	var topPos=((sh-new_h)/2)-(100+(((sh-new_h)/2)*0.1)); // Centered, then moved up 10%
    	win.moveTo(leftPos, topPos);
    }

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks great Skyzyx! I never really optimized/tweaked it, no qualms here
    Last edited by beetle; 02-22-2003 at 03:48 AM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I might combine some of the code in this thread with my popup image script and post the results.

    As the code posted hear is really good.
    Something to do after the exams.

    scroots
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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