...

View Full Version : Popup image viewer



beetle
11-14-2002, 10:21 PM
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 :D
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...
<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 (http://www.codingforums.com/showthread.php?s=&threadid=8665) algorithm :D

Tested ok with IE6 and Moz 1.0

glenngv
11-15-2002, 12:43 PM
couple of errors :D
- 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:



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

beetle
11-16-2002, 05:02 PM
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....

beetle
11-16-2002, 11:06 PM
Here's the cool, sexy Mozilla version
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 :D

JVRudnick
02-04-2003, 07:59 PM
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)



<%@ 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

JVRudnick
02-04-2003, 08:02 PM
can anyone see my problem?

Jim

scroots
02-04-2003, 09:01 PM
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

beetle
02-04-2003, 09:19 PM
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?

JVRudnick
02-04-2003, 10:32 PM
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

JVRudnick
02-04-2003, 10:40 PM
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>

glenngv
02-05-2003, 02:44 AM
writeln('<body onload="self.focus();"><img id="pic" style="display:none" width="400" height="300" /></body></html>');

JVRudnick
02-05-2003, 04:30 PM
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

Skyzyx
02-22-2003, 02:35 AM
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.



/*******************************
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);
}

beetle
02-22-2003, 04:29 AM
Looks great Skyzyx! I never really optimized/tweaked it, no qualms here :D

scroots
06-10-2003, 08:50 PM
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

brothercake
06-12-2003, 12:14 AM
Originally posted by beetle
Here's the cool, sexy Mozilla
Oh yes ... that's very sexy :)

For avoiding the onclick - could you maybe iterate through getElementsByTagName('a') and bind an anonymous function to each one, based on ".jpg" in the src, or a classname, or something ..?

Or even better, a generic document onclick handler that reads the src or classname out of the event target ..?

beetle
06-12-2003, 02:35 AM
Or an XBL binding / DHTML behavior

I figured out that DHTML behaviors let you fake HTMLDOM prototyping


a {
behavior: url(popimg.htc)
}


popimg.htc


<public:component>

<public:attach event="oncontentready" onevent="prepare()"/>

<script language="JScript">

function prepare()
{
element.popImg = function()
{
// code here
}
}

</script>

</public:component>
Nice, eh? Maybe I'll sit down someday and code the whole thing

alidheli
02-21-2005, 09:34 PM
Bismillahir Rahman ir Rahim

After our discussion here http://www.codingforums.com/showthread.php?t=52643, I used the code from this thread and it worked great. UNTIL... I was ready to blow my head off, trying to get the layout of the thumbnail gallery right in CSS, and decided to use a table which fixed my layout problem 1-2-3, but now this popup code doesn't work properly anymore.

It works as long as you close the popup window each time, but if you click a link, then leave the popup open and click another link it opens the link in the thumbnail gallery window, as if it were a plain html link with no script. The only difference between when it was working and now is that the links are inside a table cell.

this is the page: http://www.naksibendi.org/photos.html

glenngv
02-23-2005, 02:11 AM
this is the page: http://www.naksibendi.org/photos.html
That seems to be the old version without the script in this thread.

alidheli
02-23-2005, 04:19 AM
Bismillahir Rahman ir Rahim

maybe cached? it's definitely this one. From source:

<script 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>

...

<a href="http://www.naksibendi.org/images/01gumushanevihz.jpg" onclick="popImg(this.href); return false;">
<img class="thumb" src="http://www.naksibendi.org/images/tn/tn_01gumushanevihz.jpg" alt="thumbnail"></a>

glenngv
02-28-2005, 05:58 AM
What browser are you using? There might be "Access denied" errors when opening "about:blank" page when the popup is already opened.

Try this:

var imgWin = window.open("",'imgWin','width=200, height=200, left=100, top=100');

Wolfmans55
03-10-2005, 11:59 PM
Could somone post all the code including html tags and everything so I can just copy and paste? I want to somehow Identify where to put the image URL, I thought I found two where I should but it hasn't done anything. I tried to copy and paste the code and put a style tag for javascript but it just isn't working. Help please!

entint
06-07-2005, 01:45 PM
Just curious if anyone has a crossbrowser version of this. Seems that all of these are browser specific, whereas I need something that will work for all browsers.

glenngv
06-07-2005, 02:11 PM
Skyzyx post and my modification to beetle's code (post#2) should work in IE and Firefox.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum