• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 743
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

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