Javascript for .jpg display?

[JVRudnick]

Hello all...
wondering the following. I've created an ASP handler that will poll a folder, find the names of all the .jpgs therein, then display same in a photo gallery, no problems so far.

the thing is, now, I want to make those little thumbnails open up at a set size in a new window, once selected by the user.

here's the code I'm using....


<%@ LANGUAGE ="VBSCRIPT" %>
<% Option Explicit %>
<%Response.Buffer = True%>

<!-- NEW JAVASCRIPT WINDOWS FUNCTION HERE -------------- -->
<script language=Javascript type="text/Javascript">

function newWindow(fishStory) {

fishWindow = window.open(fishStory, 'fishWin', 'toolbar=no, location=no, scrollbars=no, width=300, height=220, top=80, left=120')
fishWindow.focus()
}
</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


%>
<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>
<%
For each f1 in fc
' loop thru contents of whole folder...

fileName = (f1.name)
' get the name of each .jpg in that folder
%>
<tr><td>

<a href="javascript:newWindow('<%=fileName%>')">

<img src="images/pix/<%=fileName%>" width="80" border="0">

</a>

</td></tr>
<%
Next
SET f1 = Nothing
' housekeeping here

%>
</table>
</div>



what happens is that the new window does open -- but without the .jpg inside....

I suspect that my function is not correct --- that is, it requires that I use an .html page that will fill the new window...but I dont' want to do that (create a sep html page for each of the dang .jpgs)

what I want is just to show the .jpg in that window.

so the question is, can someone here look at my javascript window function and point out what I've got to do to accomplish that?

Jim

[beetle]

A url is a url. Doesn't matter if it's a JPG or HTML or DOC or XLS or PDF or whatever. However, common to all these filetypes, a url has to be accurate. If you aren't passing a valid url then it obviously won't work. Make sure your path is correct or use an absolute URL. From the looks of it, you are just sending the filename with no path information. This would work if all your images were in the same directory as the ASP page, but I doubt that's the case.

[arnyinc]

function newWindow(fishStory) {
imagepath='images/pix/';
fishWindow = window.open(imagepath+fishStory, 'fishWin', 'toolbar=no, location=no, scrollbars=no, width=300, height=220, top=80, left=120')
fishWindow.focus()
}

[JVRudnick]

thanks, arnyinc...

it works fine now.

to finetune same tho, I note that the window has a border around the .jpg

is there a way to open up that .jpg FULLY so that there will be no border at all around it?

I know, aesthetics...but hey, ya gotta ask, right?

Jim

[beetle]

Originally posted by JVRudnick
is there a way to open up that .jpg FULLY so that there will be no border at all around it?

I know, aesthetics...but hey, ya gotta ask, right?

Jim Try this (http://www.codingforums.com/showthread.php?s=&threadid=9836)

[JVRudnick]

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