Solved

Display Photos and Hide if they don't exist

Posted on 2006-06-09
13
726 Views
Last Modified: 2008-02-01
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
Comment
Question by:jdfulton
  • 4
  • 4
  • 3
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 
LVL 6

Author Comment

by:jdfulton
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 
LVL 6

Author Comment

by:jdfulton
Comment Utility
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
 
LVL 15

Expert Comment

by:Thogek
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 6

Author Comment

by:jdfulton
Comment Utility
I do not have access to the serverside.  All I have is a URL and possible filename combinations.
0
 
LVL 15

Expert Comment

by:Thogek
Comment Utility
Are the photos located on a server other than the one on which your Web site is running?
0
 
LVL 6

Author Comment

by:jdfulton
Comment Utility
Yes we have nothing to do with the other server.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
Comment Utility
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
 
LVL 15

Expert Comment

by:Thogek
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
At least it looks nicer :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now