Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 748
  • Last Modified:

Display Photos and Hide if they don't exist

I have a script that checks to see if photos are available then displays a large photo then thumbnails.  The problem is I do not know where the photo is located or if it exists.  I have it working fine but it is a little slow loading since I have to load all possible sources and then check to see if they exist.  I then hide them if they don't exist.  Does anyone know how to skip over to the next source if the main image isn't found?  Also a way to display a default image if no images are found would be great.

Here is my code.

<script language="JavaScript">
      function ImageLoadFailed() {
            window.event.srcElement.style.display = "None";
            <%error="true"%>
      }
</script>
<%
x=0
for x =0 to 9
error=""
mainpath="http://www.domain.com/images/" & x & "/PHOTO"
mainimage=mainpath & mlsid & ".JPG"

%>
<img src="<%=mainimage%>" OnError="ImageLoadFailed()" width="225" align="middle" border="0" name="large<%=x%>" hspace="0" vspace="4">
<%
response.write error
i=0
For i = 0 to 8

filename=i
select case filename
case "0"
fileid=""
case "1"
fileid="A"
case "2"
fileid="B"
case "3"
fileid="C"
case "4"
fileid="D"
case "5"
fileid="E"
case "6"
fileid="F"
case "7"
fileid="G"
case "8"
fileid="H"
case else
fileid=""
end select

     photolink=mainpath & mlsid & fileid & ".JPG"
     

%>
<a href="javascript:image_click_<%=i%><%=x%>(<%=i%><%=x%>)">
<img src="<%=photolink%>" width="36" height="30" OnError="ImageLoadFailed()" name="pimage<%=i%><%=x%>" border=0 hspace="0"></a>
<script language="JavaScript">
function image_show_<%=i%><%=x%>()
{
image<%=i%><%=x%> =new Image();

image<%=i%><%=x%>.src =["<%=photolink%>"]

document.images['pimage<%=i%><%=x%>'].src=image<%=i%><%=x%>.src;
}
function image_click_<%=i%><%=x%>(clicks)
{
var image<%=i%><%=x%> =new Image();
image<%=i%><%=x%>.src="<%=photolink%>";
if(clicks==<%=i%><%=x%>){document.images['large<%=x%>'].src=image<%=i%><%=x%>.src;}
}
</script>

<%
next
%><%
next
%>
0
jdfulton
Asked:
jdfulton
  • 4
  • 4
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
Can't you turn the test?

<img style="display:none" src="<%=mainimage%>" onLoad="this.style.display='block'
OnError="this.src='notfound.gif'" width="225" align="middle" border="0" name="large<%=x%>" hspace="0" vspace="4">
0
 
jdfultonAuthor Commented:
mplungjan your code would show a notfound image for every image which would be over 100 images.  I only want to display the image if it exists.  Right now the code hides the image if it doesn't exits but really it still gets loaded.  Ideally the no image would display if no images are found and only the main image would be the noimage.gif.
0
 
Michel PlungjanIT ExpertCommented:
No. My code will display nothing.
If the initial image is found, it will show it
If it gives an error, it will load the notfound and show that instead.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
jdfultonAuthor Commented:
The no image part is not a big deal the main thing is to speed up the process of the check.  Here is more info.   I have 10 folders to check to see if an image exists.  If the image exists I have to check to see how many photos are in the folder.  There can be up to 10 images in the folder.  As of right now it loads 100 images and hides the invalid sources.  I would rather not display an image at all if it doesn't exist.  On a high speed connection it loads pretty quickly but dialup its pretty slow.
0
 
ThogekCommented:
Have you tried checking for the image files' existances server-side instead of client-side?  May or may not be faster overall, but it'd at least remove some of the client-server chatter.  (And you could cache the discovered information on the server so you don't have the code scanning the directories on every page view.)

If you're using ASP server-side, you might wanna check on the FileSystemObject available to ASP and other scripting.  http://msdn.microsoft.com/library/en-us/script56/html/8b99eead-e2bd-45c6-9660-bbbfeec192f0.asp
0
 
jdfultonAuthor Commented:
I do not have access to the serverside.  All I have is a URL and possible filename combinations.
0
 
ThogekCommented:
Are the photos located on a server other than the one on which your Web site is running?
0
 
jdfultonAuthor Commented:
Yes we have nothing to do with the other server.
0
 
Michel PlungjanIT ExpertCommented:
Sooo, I repeat...

<img style="display:none" src="<%=mainimage%>" onLoad="this.style.display='block'
width="225" align="middle" border="0" name="large<%=x%>" hspace="0" vspace="4">

Only showing something if it is there.
0
 
ThogekCommented:
Hmm.  Then I'm not sure that you have a lot of options beyond what you've already done, or mplungjan's suggested version (which is fairly similar, but possibly easier to manage).
0
 
Michel PlungjanIT ExpertCommented:
At least it looks nicer :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now