SW
|
| Posted: 04/28/2003, 3:29 AM |
|
Hi,
I am looking for a way to resize images on the fly for an ecommerce application, I want the user to only have to upload one image but be able to show a thumbnail of it until they go to the detail page. As the pictures are likely to be various different sizes I do not want the images to be a fixed size, which would be easy, but maybe a percentage, for example 50% of the original size.
What is the best way of going about this? (CCS2 with ASP), I may look at creating actual thumbnails, if there is a way of doing it without using external components as I want it to be component free so it can work on various different hosts easily.
Thanks in advance
Simon Wall
|
|
|
 |
No Name
|
| Posted: 04/28/2003, 7:41 AM |
|
We all would like a component free solution for this!
|
|
|
|
Simon
|
| Posted: 04/29/2003, 5:29 AM |
|
I am not really looking to make actual thumbnails, but to just resize the image, I can quite easily make the pictures say 100x100 but I want them to be say 50% of the original size.
I have ASPJPEG or something along the lines of that (can't think of the name) installed on my server, but I would prefer not to use that as I want the application to be used on various different servers etc.
Is ASPJPEG (or whatever it is called) a quite widely used component? I have only ever used one host so I'm not really sure!
Also, if I was to use this, how do I do that? I mean, I can read up on using the component itself but I have the image names pulled from a DB and then displayed so how do I go about doing this? Is it fairly straightfoward?
If anyone knows of a way of resizing images to a percentage of the original without use of a component please let me know. I have seen a few gallery apps that do just this, but I cannot find the code that actually DOES the resizing etc.
Thanks
Simon
|
|
|
|
Mike Singleton
|
| Posted: 04/29/2003, 8:06 AM |
|
ASP Code
====== begin ====
<HTML>
<HEAD>
<TITLE>Portofolio</TITLE>
<LINK REL=STYLESHEET HREF="./style.css" TYPE="text/css">
<%
' ***************************************************************************************
' This function is used to replace a word by an other one.
' Parameters are those ones:
' vstrOrigCharacters -> word/charact to be changed
' vstrReplaceCharacters -> word/charact to be inserted
' vstrString -> string in which the change will be made
' ***************************************************************************************
Function Replace(ByVal vstrOrigCharacters, ByVal vstrReplaceCharacters, ByVal vstrString)
Dim strResult
Dim intIndex
Dim intOldIndex
strResult = ""
intIndex = 1
Do
intOldIndex = intIndex
intIndex = InStr(intIndex, vstrString, vstrOrigCharacters)
If (intIndex > 0) Then
strResult = strResult & Mid(vstrString, intOldIndex, intIndex - intOldIndex)
strResult = strResult & vstrReplaceCharacters
intIndex = intIndex + Len(vstrOrigCharacters)
Else
strResult = strResult & Mid(vstrString, intOldIndex)
Exit Do
End If
Loop
Replace = strResult
End Function
' ***************************************************************************************
' This function will define if the file is a picture
' The test is made on the file's extension
' bmp, gif, jpg -> u can add all the extension u want
' ***************************************************************************************
Function isPicture(fileName)
Dim found
Dim extension
found = False
extension = LCase(right(fileName, 4))
if (extension=".bmp" or extension=".jpg" or extension=".gif") then
found = True
End If
isPicture = found
End Function
' ***************************************************************************************
' This function will be used to build the portofolio
' Parameters are those ones:
' Path -> path on the server use to create the menu C:\inetpub\wwwroot\...
' nbColumn-> Number of the columns for the table
' widthPx -> Width of the Pictures in pixels ( 0 mean width of the picture )
' heigthPx-> Heigth of the Pictures in pixels ( 0 mean heigth of the picture )
' widthPx and heightPx msut be the value for the little picture to be shown in the thumbnail
' The window to display it in full size is 300x300. You can change those value.
' look at this part of the code "javascript:affImg(300,300,..."
' ***************************************************************************************
sub portofolio(Path, nbColumn, widthPx, heightPx )
Dim fso, root, folder, files, folders, file
Dim name, aff, link
Dim cpt
Dim pourcent
pourcent = 100/nbColumn
cpt = 1
Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set root = fso.GetFolder(Path)
Set files = root.files
' ***************************************************************************************
' Lines above will create the table with pictures
' ***************************************************************************************
for Each file in files
name = file.Name
if (isPicture(name)) Then
link = Replace("\","/",file.Path)
link = LCase(link)
' ***************************************************************************************
' Don't Forget to insert your website address
' ***************************************************************************************
link = Replace("c:/inetpub/wwwroot","http://your_url",link)
Response.Write "<td width='"+CStr(pourcent)+"%'>" %>
<a href="#" onClick="window.focus();showPict(300,300,'<% Response.Write link%>');">
<%
Response.Write "<img border='0' src='"+link+"' "
if widthPx > 0 then
Response.Write " width='"+CStr(widthPx)+"' "
end if
if heightPx > 0 then
Response.Write " height='"+CStr(heightPx)+"'"
end if
Response.Write " ></a>"
Response.Write "</td>"
cpt = cpt + 1
if cpt>nbColumn then
Response.write "</tr><tr>"
cpt = 1
End If
End If
Next
End Sub
%>
<SCRIPT LANGUAGE = "JavaScript" src="showPicture.js"></SCRIPT>
</HEAD>
<BODY onLoad="cacheOff()">
<!-- BEGINNING OF THE SCRIPT -->
<STYLE TYPE="text/css">
<!--
#cache {
position:absolute; left=10; top:10px; z-index:10; visibility:hidden;
}
-->
</STYLE>
<!--
Lines above are creating a layer which show a message
displaying the 'PLEASE WAIT ... IMAGES ARE LOADING' message
-->
<SCRIPT LANGUAGE="JavaScript">
ver = navigator.appVersion.substring(0,1)
if (ver >= 4)
{
document.write('<DIV ID="cache"><TABLE WIDTH=400 BGCOLOR=#000000 BORDER=0 CELLPADDING=2 CELLSPACING=0><TR><TD ALIGN=center VALIGN=middle><TABLE WIDTH=100% BGCOLOR=#FFFFFF BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD ALIGN=center VALIGN=middle><FONT FACE="Arial, Verdana" SIZE=4><B><BR>PLEASE WAIT ... IMAGES ARE LOADING<BR><BR></B></FONT></TD> </TR></TABLE></TD> </TR></TABLE></DIV>');
var navi = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
var HIDDEN = (navi) ? 'hide' : 'hidden';
var VISIBLE = (navi) ? 'show' : 'visible';
var cache = (navi) ? document.cache : document.all.cache.style;
largeur = screen.width;
cache.left = Math.round(100);
cache.visibility = VISIBLE;
}
function cacheOff()
{
if (ver >= 4)
{
cache.visibility = HIDDEN;
}
}
</SCRIPT>
<!--
When the page will be fully loaded, the message will be hidden
-->
<!-- END OF THE SCRIPT -->
<br>
<table width="95%" BORDER="0">
<tr>
<%
' The first parameter must be the path of the directory in which the pictures are
portofolio "c:\inetpub\wwwroot\images",2,0,0
%>
</tr>
</table>
</BODY>
</HTML>
'
==== end asp code ====
==== begin showpicture.js===
function showPict(larg, haut, pathPict)
{
chemin = pathPict;
var t = "";
var theWindow;
theWindow = window.open("","top","bar=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width="+larg+",height="+haut+",screenX=0,left=0,screenY=0,top=0");
t += "<HTML>\n";
t += "<HEAD>\n";
t += "<TITLE>ZOOM</TITLE>\n";
t += "</HEAD>\n";
t += " <BODY BGCOLOR=\"black\">\n";
t += " <TABLE BORDER=\"0\" CELLPADDING=\"0\" CELLSPACING=\"0\" WIDTH=\"100%\" HEIGHT=\"100%\"BGCOLOR=\"white\">\n";
t += " <TR>\n";
t += " <TD ALIGN=\"CENTER\" VALIGN=\"MIDDLE\">";
t += " <TABLE BORDER=\"0\" CELLPADDING=\"5\" CELLSPACING=\"0\" BGCOLOR=\"white\">\n";
t += " <TR>\n";
t += " <TD>\n";
t += " <P ALIGN=\"center\"><A HREF=\"javascript:self.close()\" onmouseover=\"window.status='close\; return true\">\n";
t += " <IMG SRC=\"" + chemin + "\" BORDER=0 TITLE=\"Clic on the picture to close the window.\"></A></TD>\n";
t += " </TR>\n";
t += " </TABLE>\n";
t += " </TD>\n";
t += " </TR>\n";
t += " </TABLE>\n";
t += " </BODY>\n";
t += "</HTML>\n";
theWindow.document.clear();
theWindow.document.write(t);
}
==== end showpicture.js =====
|
|
|
|
Aaron
|
| Posted: 04/29/2003, 9:12 PM |
|
I use AutoImageSize from United Binary (www.unitedbinary.com.
Great piece of code.
|
|
|
|
Simon
|
| Posted: 05/04/2003, 5:52 AM |
|
Thanks for the help,
Looking at the info etc now, I hope it helps me!
Simon
|
|
|
|
|
