Solved

Display Photos and Hide if they don't exist

Posted on 2006-06-09
13
727 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
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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Blog Template 2 36
CSS Scroll Issue 3 90
Angular - following an example but mine partly works 17 45
How can I echo a PHP variable in AJAX function? 7 32
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
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 …
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…

911 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

22 Experts available now in Live!

Get 1:1 Help Now