Solved

Display Photos and Hide if they don't exist

Posted on 2006-06-09
13
731 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16870992
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
ID: 16871038
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
ID: 16871069
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Author Comment

by:jdfulton
ID: 16871149
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
ID: 16871381
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
 
LVL 6

Author Comment

by:jdfulton
ID: 16871429
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
ID: 16871468
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
ID: 16871524
Yes we have nothing to do with the other server.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 16872773
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
ID: 16874660
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
ID: 16875790
At least it looks nicer :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

752 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