• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7356
  • Last Modified:

Change Images With Javascript Without Reloading Page

Hi i have some code which create thumbnaills which you can click on and this then changes the main image of the page.  The code is:

                                                      <table border="0" width="100%" cellspacing="0" cellpadding="5">
                                                            <tr>
                                                                  <td width="290">
                                                                        <%
                                                                        Set RSmasterimg = Server.CreateObject("ADODB.Recordset")
                                                                        SQLmasterimg = "SELECT * FROM tblProductImages WHERE intMaster = 1 AND intProductID = " & intProductID
                                                                        RSmasterimg.Open SQLmasterimg,Connection,3,3
                                                                        IF RSmasterimg.EOF THEN
                                                                        %>
                                                                              <img src="/site_images/no_image.jpg">
                                                                        <% ELSE %>
                                                                              <img name="MainImage" border="0" src="<% Response.Write strImageDirectory & RSmasterimg("txtImageName") %>">
                                                                        <%
                                                                        END IF
                                                                        RSmasterimg.Close
                                                                        Set RSmasterimg = Nothing
                                                                        SQLmasterimg = " "
                                                                        %>
                                                                  </td>
                                                                  <td>
                                                                        <%
                                                                        Set RSthumb = Server.CreateObject("ADODB.Recordset")
                                                                        SQLthumb = "SELECT * FROM tblProductImages WHERE intProductID = " & intProductId
                                                                        RSthumb.Open SQLthumb,Connection,3,3
                                                                        Do While Not RSthumb.EOF
                                                                        
                                                                        IF RSthumb.EOF THEN
                                                                        %>
                                                                              <img src="/site_images/no_image.jpg">
                                                                        <% ELSE %>
                                                                              <a href="JavaScript:;" onclick="JavaScript:document.all.MainImage.src='<% Response.Write strImageDirectory & RSthumb("txtImageName") %>';"><img border="0" src="<% Response.Write strImageThumbDirectory & RSthumb("txtThumbnailName") %>"></a>
                                                                        <%
                                                                        END IF
                                                                        RSthumb.MoveNext
                                                                        Loop
                                                                        RSthumb.Close
                                                                        Set RSthumb = Nothing
                                                                        SQLthumb = " "
                                                                        %>
                                                                  </td>
                                                            </tr>
                                                      </table>

This code runs ok and once run generates the code of:

                                                      <table border="0" width="100%" cellspacing="0" cellpadding="5">
                                                            <tr>
                                                                  <td width="290">
                                                                        
                                                                              <img name="MainImage" border="0" src="/images/product_images/mj02.jpg">
                                                                        
                                                                  </td>
                                                                  <td>
                                                                        
                                                                              <a href="JavaScript:;" onclick="JavaScript:document.all.MainImage.src='/images/product_images/mj02.jpg';"><img border="0" src="/images/product_images/mj02_th.jpg"></a>
                                                                        
                                                                              <a href="JavaScript:;" onclick="JavaScript:document.all.MainImage.src='/images/product_images/mj01.jpg';"><img border="0" src="/images/product_images/mj01_th.jpg"></a>
                                                                        
                                                                              <a href="JavaScript:;" onclick="JavaScript:document.all.MainImage.src='/images/product_images/mj03.jpg';"><img border="0" src="/images/product_images/mj03_th.jpg"></a>
                                                                        
                                                                  </td>
                                                            </tr>
                                                      </table>

The only problem is that when it runs it generates the thumbs, but when you click on any of the thumbs which are not the 1st master image, it loads up blank for the main image.  If you then click on the main image and right click then select "Show Image" it then displays ok.

Its like its loading up ok in the background but not actually refreshing the image on the page.

Can anyone help?

Thanks.
Carl
0
net-workx
Asked:
net-workx
1 Solution
 
Da1KingCommented:
The problem is that you need to preload your images.  Add the following script to the HEAD section of your HTML...

<script language="JavaScript">
      function preloader() {
            // counter
            var i = 0;

            // create object
            imageObj = new Image();

            // set image list
            images = new Array();
            images[0]="/images/product_images/mj02.jpg"
            images[1]="/images/product_images/mj01.jpg"
            images[2]="/images/product_images/mj03.jpg"

            // start preloading
            for(i=0; i<=2; i++) {
                  imageObj.src=images[i];
            }
      }
</script>

Then make sure to modify your BODY tag as so...

<body onLoad="javascript:preloader()">

That should take care of the issue.
0
 
gops1Commented:
Apart make few corrections.
Make your href="#" and in the onclick provide return false at the end.

Something like this:

<html>
      <head>
            <title>Script Demo</title>
      </head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="5">
<tr>
      <td width="290"><img name="MainImage" id="MainImage" border="0" src="/images/product_images/mj02.jpg"></td>
      <td><a href="#" onclick="document.all['MainImage'].src='/images/product_images/mj02.jpg';return false;"><img border="0" src="/images/product_images/mj02_th.jpg"></a>
      <a href="#" onclick="document.all['MainImage'].src='/images/product_images/mj01.jpg';return false;"><img border="0" src="/images/product_images/mj01_th.jpg"></a>
      <a href="#" onclick="document.all['MainImage'].src='/images/product_images/mj03.jpg';return false;"><img border="0" src="/images/product_images/mj03_th.jpg"></a>
      </td>
      </tr>
</table>

</body>
</html>
0
 
net-workxAuthor Commented:
Ok i need to preload the images however im not sure how to get the ASP in there to loop through the recordset to set up the JavaScript array?

the ASP i would need is:

<%
Set RSpreload = Server.CreateObject("ADODB.Recordset")
SQLpreload = "SELECT * FROM tblProductImages WHERE intProductID = " & Request.QueryString("ProductID")
RSpreload.Open SQLpreload,Connection,3,3
%>
intArrayNumber = 0
<% Do While Not RSpreload.EOF %>
images[intArrayNumber+1]="<% strImageDirectory & RSpreload("txtImageName") %>"
<%
RSpreload.MoveNext
Loop

RSpreload.Close
%>

Hope all that makes sense!!!  Thanks, Carl
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.

 
b0lsc0ttCommented:
How large are these images?  Are they all the same size?  How many?

Preloading could fix this and I can even help with the server code for it.  However if you have a number of images, especially if they are large, it might be better to use an iframe instead and not preload.  Let me know if you want details of this but basically the MainImage "cell" will hold an iframe named MainImage (or something unique).  Each link will then not need to use Javascript or onclick at all.  They can just be something like ...

<a href="largeImage1.jpg" target="MainImage">Pic1</a>

I am not saying this is definitely a better solution but it does have the advantage of not needing any Javascript and might save load time for your page initially.  The downside is if each large image will be displayed then, without preloading, there is a delay to view it (but not the problem you mentioned here of not viewing it at all).  Let me know if you need details or have a question about this.

Now to help you use the preloader.  I will modify it a bit because I feel it is incomplete.  Also, since you are using ASP, you will need to decide if you want to run the query twice or load the image names, etc in an array.  The reason is right now you are using it to fill the table but you will also need it to make the script tag, which belongs in the head tags.  Let me know which you want to do or if you have a question about the options.

The basic idea would be ...

<head>
<script type="text/javascript">
function preloadImg() {
<%
Set RSthumb = Server.CreateObject("ADODB.Recordset")
SQLthumb = "SELECT * FROM tblProductImages WHERE intProductID = " & intProductId
RSthumb.Open SQLthumb,Connection,3,3
Do While NOT RSthumb.EOF
      Response.Write "main" & Replace(".jpg", "", RSthumb("txtImageName")) & " = new Image();"
      Response.Write "main" & RSthumb("txtImageName") & ".src = '" & strImageDirectory & RSthumb("txtImageName") & "';"
      RSthumb.MoveNext
Loop
RSthumb.Close
Set RSthumb = Nothing
SQLthumb = " "
%>
}
</script>

The code to use in the table would be something like ...

          <td>
                <%
                Set RSthumb = Server.CreateObject("ADODB.Recordset")
                SQLthumb = "SELECT * FROM tblProductImages WHERE intProductID = " & intProductId
                RSthumb.Open SQLthumb,Connection,3,3
                If RSthumb.EOF then
                      Response.Write "<img src=""/site_images/no_image.jpg"">"
                Else
                      Do While Not RSthumb.EOF
                            Response.Write "<a href=""#"" onclick=""document.images['MainImage'].src= main" & Replace(".jpg", "", RSthumb("txtThumbnailName")) & ".src; return false;""><img border=""0"" src=""" & strImageThumbDirectory & RSthumb("txtThumbnailName") & """></a>"
                            RSthumb.MoveNext
                      Loop
                End if
                RSthumb.Close
                Set RSthumb = Nothing
                SQLthumb = " "
                %>
          </td>

I am pretty sure the ASP above will make good html and script but please check it.  I had no way to test it. :)

I did make a change to the RSthumb part.  You had an If that would not have ever been used.  Besides the code above you will need to have your body tag look like ...

<body onload="preloadImg();">

Let me know how that works or if you have a question.  If you have an issue or need more help using it in your page please show me the code you currently use.  The snippet above might have been enough but this should change it and I may need more to help.  If you use the recordset but store the image names, etc in an array then you wouldn't need it again when you do the table.

bol
0
 
net-workxAuthor Commented:
OK ii have copied your code into the site in the relevant areas but is now fails with a java error in IE saying 'main' is undefined.

Now id love to say i knew what that code was doing but i dont so youll have to bear with me!  

The page that is generated is:



<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welcome To MayasJewellery.co.uk</title>
<link rel="stylesheet" type="text/css" href="/stylesheet/mj.css">

<head>
<script type="text/javascript">
function preloadImg() {
main.jpg = new Image();mainmj02.jpg.src = '/images/product_images/mj02.jpg';main.jpg = new Image();mainmj01.jpg.src = '/images/product_images/mj01.jpg';main.jpg = new Image();mainmj03.jpg.src = '/images/product_images/mj03.jpg';
}
</script>

</head>

<body bgcolor="#F5F5F5" onLoad="preloadImg();">
<table border="0" width="758" height="100%" align="center">
      <tr>
            <td align="center" valign="top">
                  <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
                        <tr>
                              <td>&nbsp;</td>
                              <td>&nbsp;</td>
                              <td>&nbsp;</td>
                        </tr>
                        <tr>
                              <td width="98%" style="border-top:0px solid #808080; border-bottom:1px solid #FFFFFF; " valign="top">

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
      <tr>
            <td width="50%"><img border="0" src="/site_images/logo.gif"></td>
            <td width="50%">
                  <table border="0" width="100%" cellspacing="0" cellpadding="5">
                        <tr>
                              <td align="right">

                              </td>
                        </tr>
                        <tr>
                              <td>
                                    <table border="0" width="325" cellspacing="0" cellpadding="5" align="right">
                                          <tr>
                                                <td align="center" valign="center" height="40" style="background-image: url('/site_images/header_bg_pink.gif'); background-repeat: no-repeat; background-position: center">
                                                <br>
                                                      <form method="POST" name="Search" action="/search_results.asp">
                                                            <input type="text" name="txtSearch" value="Enter Search Word(s)" size="40">&nbsp;<input border="0" src="/site_images/ico_search.gif" name="btnSearch" width="16" height="16" type="image">
                                                      </form>
                                                </td>
                                          </tr>
                                          <tr>
                                                <td class="MiniCart" align="center" valign="center" height="40" style="background-image: url('/site_images/header_bg.gif'); background-repeat: no-repeat; background-position: center">
                                                Basket Total:
                                                £0.00                                                
                                                 | <a class="MiniCart" href="/cart.asp">CHECKOUT</a>
                                                </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>
                  </table>
            </td>
      </tr>
</table></td>
                        </tr>
                        <tr>
                              <td height="31" width="98%" style="padding-left:20px" background="/site_images/top_menu_bg.gif" class="TopMenu"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
            <td><a class="TopMenu" href="/default.asp">Home Page</a></td>
            <td><img border="0" src="/site_images/top_menu_divider.gif"></td>
            <td><a class="TopMenu" href="/default.asp?PageID=About">About Mayas Jewellery</a></td>
            <td><img border="0" src="/site_images/top_menu_divider.gif"></td>
            <td><a class="TopMenu" href="/default.asp?PageID=Contact">Contact Us</a></td>
            <td><img border="0" src="/site_images/top_menu_divider.gif"></td>
            <td><a class="TopMenu" href="/default.asp?PageID=Testimonials">Testimonials</a></td>
            <td><img border="0" src="/site_images/top_menu_divider.gif"></td>
            <td><a class="TopMenu" href="/default.asp?PageID=Login">Login</a></td>
      </tr>
</table></td>
                        </tr>
                        <tr height="98%">
                              <td valign="top">
                                    <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
                                          <tr>                                    
                                                <td width="28%" height="98%" valign="top" bgcolor="#F0F0F0" style="border-right: 1px solid #999999">
                                                      <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                  <td valign="top" height="50%">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
            <td>
                  <img border="0" src="/site_images/imitation_jewellery_header.jpg"><a class="MenuLink" href="/subcategory.asp?CatID=10431">Accessories</a><a class="MenuLink" href="/subcategory.asp?CatID=10427">Coloured Beaded/Crystal Sets </a><a class="MenuLink" href="/subcategory.asp?CatID=10432">Jewellery Holders</a><a class="MenuLink" href="/subcategory.asp?CatID=10426">Cubic Zirconia Pendant Sets</a><a class="MenuLink" href="/subcategory.asp?CatID=10425">Cubic Zirconia Sets</a>                  
            </td>
      </tr>
      <tr>
            <td>&nbsp;</td>
      </tr>
      <tr>
            <td>
                  <img border="0" src="/site_images/saree_blouses_header.jpg"><a class="YellowMenuLink" href="/subcategory.asp?CatID=10428">The Bombay Collection</a><a class="YellowMenuLink" href="/subcategory.asp?CatID=10429">Pooja Designer</a><a class="YellowMenuLink" href="/subcategory.asp?CatID=10430">Perfect Pattern</a>                  
            </td>
      </tr>
</table></td>
                                                            </tr>
                                                      </table>
                                                </td>
                                                <td width="72%" height="98%" valign="top" style="background-image: url('/site_images/vts_bg.jpg'); background-repeat: no-repeat; background-position: right bottom">
                                                      
                                                      <!--PADDING & ALIGNMENT TABLE-->
                                                            <table border="0" width="100%" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                        <td>
                                                                              <table border="0" width="100%" cellspacing="0" cellpadding="20">
                                                                                    <tr>
                                                                                          <td class="bodytext">
                                                                                                

<table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr>
            <td width="50%" align="left">
                  <table border="0" width="100%" cellspacing="0" cellpadding="0">
                        <tr>
                              <td width="96%" height="98%" bgcolor="#FFFFFF">
                                    <table border="0" width="100%" cellspacing="0" cellpadding="5">
                                          <tr>
                                                <td><a class="HeaderOne">3 Piece antique silver set with red crystals and clear cubic zirconia stones</a></td>
                                          </tr>
                                          <tr>
                                                <td>
                                                      <table border="0" width="100%" cellspacing="0" cellpadding="5">
                                        <tr>
                                                                  <td width="290">
                                                                              
                                                                                    <img name="MainImage" border="0" src="/images/product_images/mj02.jpg">
                                                                              
                                                                        </td>
                                                                        <td>
                                                                      <a href="#" onclick="document.images['MainImage'].src= main.jpg.src; return false;"><img border="0" src="/images/product_images/mj02_th.jpg"></a><a href="#" onclick="document.images['MainImage'].src= main.jpg.src; return false;"><img border="0" src="/images/product_images/mj01_th.jpg"></a><a href="#" onclick="document.images['MainImage'].src= main.jpg.src; return false;"><img border="0" src="/images/product_images/mj03_th.jpg"></a>
                                                                  </td>
                                        </tr>
                                                      </table>
                                                </td>
                                          </tr>
                                          <tr>
                                                <td class="BodyText">3 Piece antique silver choker style set with red crystals and cubic zirconia stones-an </td>
                                          </tr>
                                          <tr>
                                                <td class="BodyText" align="right">Product Code: M210S-S</td>
                                          </tr>
                                          <tr>
                                                <td class="ProductListingPrice" align="right">Price:
                                                      £38.00
                                                </td>
                                          </tr>
                                          <tr>
                                                <td align="right"><a href="/common/includes/checkout/cart/processing/add_to_basket.asp?ProductID=10060&referrer=1"><img border="0" src="/site_images/addToCart.png"></a></td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>
                  </table>
            </td>
      </tr>
</table>

                                                                                          </td>
                                                                                    </tr>
                                                                              </table>
                                                                        </td>
                                                                  </tr>
                                                            </table>
                                                      <!--END PADDING & ALIGNMENT TABLE-->
                                                </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>
                        <tr>
                              <td height="1%"><table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr class="FooterText">
            <td align="left">Copyright 2007 - MayasJewellery</td>
            <td>&nbsp;</td>
            <td align="right">&nbsp;</td>
      </tr>
</table>
</td>
                        </tr>
                  </table>
            </td>
      </tr>
</table>

</body>

</html>
0
 
b0lsc0ttCommented:
What is strImageDirectory?  What is an example of what is in the field txtImageName?  I assumed strImageDirectory was "/images/product_images/" and that field would have something like mj01.jpg (the main image file name).  Is that true or what are those?

The ASP should've produced something like the code below for the script.

<script type="text/javascript">
function preloadImg() {
mainmj02 = new Image();
mainmj02.src = '/images/product_images/mj02.jpg';
mainmj01 = new Image();
mainmj01.src = '/images/product_images/mj01.jpg';
mainmj03 = new Image();
mainmj03.src = '/images/product_images/mj03.jpg';
}
</script>

I did have an error in my code though.  I wanted to use the file name (but not the file name extension) for the Image objects.  The extension should've been removed on the first line but I forgot the Replace() on the second.  However I don't know why you got main.jpg for some of the results and mainmj##.jpg in some other places.  I am glad you posted the html source but could you post the ASP script now.  If my explanation above doesn't make it so you find the problem then I will need the ASP code to know where to fix it.  Make sure you don't include any sensitive stuff.  If there is a lot then you can post the part we are working on or ask me for information about uploading it using www.ee-stuff.com.

Let me know if you have a question about any of this.

bol
0
 
b0lsc0ttCommented:
By the way, if your ASP code is sent by the server all on one line then you can "add" line breaks to the code with vbcrlf.  For example ...

      Response.Write "main" & Replace(".jpg", "", RSthumb("txtImageName")) & " = new Image();" & vbcrlf

bol
0
 
net-workxAuthor Commented:
Ok the main page code header goes like this:

<head>
<script type="text/javascript">
function preloadImg() {
<%
Set RSthumb = Server.CreateObject("ADODB.Recordset")
SQLthumb = "SELECT * FROM tblProductImages WHERE intProductID = " & Request.QueryString("ProductID")
RSthumb.Open SQLthumb,Connection,3,3
Do While NOT RSthumb.EOF
      Response.Write "main" & Replace(".jpg", "", RSthumb("txtImageName")) & " = new Image();" & VbCrLf
      Response.Write "main" & RSthumb("txtImageName") & ".src = '" & strImageDirectory & RSthumb("txtImageName") & "';"
      RSthumb.MoveNext
Loop
RSthumb.Close
Set RSthumb = Nothing
SQLthumb = " "
%>
}
</script>

</head>

and the include file to display the product details on the page says this:

                                                                  <td width="290">
                                                                              <%
                                                                              Set RSmasterimg = Server.CreateObject("ADODB.Recordset")
                                                                              SQLmasterimg = "SELECT * FROM tblProductImages WHERE intMaster = 1 AND intProductID = " & intProductID
                                                                              RSmasterimg.Open SQLmasterimg,Connection,3,3
                                                                              IF RSmasterimg.EOF THEN
                                                                              %>
                                                                                    <img src="/site_images/no_image.jpg">
                                                                              <% ELSE %>
                                                                                    <img name="MainImage" border="0" src="<% Response.Write strImageDirectory & RSmasterimg("txtImageName") %>">
                                                                              <%
                                                                              END IF
                                                                              RSmasterimg.Close
                                                                              Set RSmasterimg = Nothing
                                                                              SQLmasterimg = " "
                                                                              %>
                                                                        </td>
                                                                        <td>
                                                                      <%
                                                                      Set RSthumb = Server.CreateObject("ADODB.Recordset")
                                                                      SQLthumb = "SELECT * FROM tblProductImages WHERE intProductID = " & intProductId
                                                                      RSthumb.Open SQLthumb,Connection,3,3
                                                                      If RSthumb.EOF then
                                                                            Response.Write "<img src=""/site_images/no_image.jpg"">"
                                                                      Else
                                                                            Do While Not RSthumb.EOF
                                                                                  Response.Write "<a href=""#"" onclick=""document.images['MainImage'].src= main" & Replace(".jpg", "", RSthumb("txtThumbnailName")) & ".src; return false;""><img border=""0"" src=""" & strImageThumbDirectory & RSthumb("txtThumbnailName") & """></a>"
                                                                                  RSthumb.MoveNext
                                                                            Loop
                                                                      End if
                                                                      RSthumb.Close
                                                                      Set RSthumb = Nothing
                                                                      SQLthumb = " "
                                                                      %>
                                                                  </td>

Hope this is enough info, let me know if i havnt sent you enough but this is all that is required i think!?

I have changed the line to read:
Response.Write "main" & Replace(".jpg", "", RSthumb("txtImageName")) & " = new Image();" & VbCrLf
and it still had the = new image() part on the end of the line so i have change it to:

      Response.Write "main" & Replace(".jpg", "", RSthumb("txtImageName")) & " = new Image();" & VbCrLf
      Response.Write "main" & RSthumb("txtImageName") & ".src = '" & strImageDirectory & RSthumb("txtImageName") & "';" & VbCrLf

strImageDirectory  is a variable to where the images are stores and you are correct in assuming that is is "/images/product_images/"  and again you are also correct that txtImageName field contains data such as mj01.jpg etc....

Getting to a point where i might just take you up on your iFrame idea lol!  Thanks for your help by the way!
0
 
b0lsc0ttCommented:
Thanks for clarifying and posting the code.  I made a language error.  Vbscript's (i.e. ASP's) Replace puts the string first.  I corrected it in the head section and the table.  The corrections are in the parts below ...

Do While NOT RSthumb.EOF
      Response.Write "main" & Replace(RSthumb("txtImageName"), ".jpg", "") & " = new Image();" & VbCrLf
      Response.Write "main" & Replace(RSthumb("txtImageName"), ".jpg", "") & ".src = '" & strImageDirectory & RSthumb("txtImageName") & "';"
      RSthumb.MoveNext
Loop

 .... and .....

                                                                            Do While Not RSthumb.EOF
                                                                                  Response.Write "<a href=""#"" onclick=""document.images['MainImage'].src= main" & Replace(RSthumb("txtImageName"), ".jpg", "") & ".src; return false;""><img border=""0"" src=""" & strImageThumbDirectory & RSthumb("txtThumbnailName") & """></a>"
                                                                                  RSthumb.MoveNext
                                                                            Loop

Let me know how that works.  Sorry for the error and I think that is all there was to the problem.  Let me know if you have a question.

bol
0
 
net-workxAuthor Commented:
WELL I MUST SAY THAT WAS PERFECT!!!!  v.Impressed!
The only small change i made was to put a <br> in to make the images go vertically instead or horizontally across the page....  final code now looks like:


<script type="text/javascript">
function preloadImg() {
<%
Set RSthumb = Server.CreateObject("ADODB.Recordset")
SQLthumb = "SELECT * FROM tblProductImages WHERE intProductID = " & Request.QueryString("ProductID")
RSthumb.Open SQLthumb,Connection,3,3
Do While NOT RSthumb.EOF
      Response.Write "main" & Replace(RSthumb("txtImageName"), ".jpg", "") & " = new Image();" & VbCrLf
      Response.Write "main" & Replace(RSthumb("txtImageName"), ".jpg", "") & ".src = '" & strImageDirectory & RSthumb("txtImageName") & "';"
      RSthumb.MoveNext
Loop
RSthumb.Close
Set RSthumb = Nothing
SQLthumb = " "
%>
}
</script>
                                                                              <%
                                                                              Set RSmasterimg = Server.CreateObject("ADODB.Recordset")
                                                                              SQLmasterimg = "SELECT * FROM tblProductImages WHERE intMaster = 1 AND intProductID = " & intProductID
                                                                              RSmasterimg.Open SQLmasterimg,Connection,3,3
                                                                              IF RSmasterimg.EOF THEN
                                                                              %>
                                                                                    <img src="/site_images/no_image.jpg">
                                                                              <% ELSE %>
                                                                                    <img name="MainImage" border="0" src="<% Response.Write strImageDirectory & RSmasterimg("txtImageName") %>">
                                                                              <%
                                                                              END IF
                                                                              RSmasterimg.Close
                                                                              Set RSmasterimg = Nothing
                                                                              SQLmasterimg = " "
                                                                              %>
                                                                        </td>
                                                                        <td>
                                                                      <%
                                                                      Set RSthumb = Server.CreateObject("ADODB.Recordset")
                                                                      SQLthumb = "SELECT * FROM tblProductImages WHERE intProductID = " & intProductId
                                                                      RSthumb.Open SQLthumb,Connection,3,3
                                                                      If RSthumb.EOF then
                                                                            Response.Write "<img src=""/site_images/no_image.jpg"">"
                                                                      Else
                                                                                    Do While Not RSthumb.EOF
                                                                                          Response.Write "<a href=""#"" onclick=""document.images['MainImage'].src= main" & Replace(RSthumb("txtImageName"), ".jpg", "") & ".src; return false;""><img border=""0"" src=""" & strImageThumbDirectory & RSthumb("txtThumbnailName") & """></a><br>"
                                                                                    RSthumb.MoveNext
                                                                                    Loop
                                                                      End if
                                                                      RSthumb.Close
                                                                      Set RSthumb = Nothing
                                                                      SQLthumb = " "
                                                                      %>

Many thanks for all your help!!  A grade and points awarded accordingly!

More questions to come i think as i start to dabble in JavaScript....  Thanks, Carl

0
 
b0lsc0ttCommented:
Carl,

Your welcome!  I'm glad that was it.  Thanks for another fun question and I'm glad I could help.  I appreciate the points and grade too. :)

Good luck with Javascript and I'll keep an eye out for other questions.  See you around. :D

bol
0
 
Michel PlungjanIT ExpertCommented:
Is it not faster to create a script of images in the first loop instead of having two db accesses?

Pardon my vbScript - I am a javascripter:

strImages = ""
strImgName = ""
Do While NOT RSthumb.EOF
      strImgName = Replace(RSthumb("txtImageName"), ".jpg", "")
      Response.Write "main" & strImgName & " = new Image();" & VbCrLf
      Response.Write "main" & strImgName & ".src = '" & strImageDirectory & RSthumb("txtImageName") & "';"
      strImages = strImages & "<a href=""#"" onclick=""document.images['MainImage'].src= main" & strImgName & ".src; return false;""><img border=""0"" src=""" & strImageThumbDirectory & RSthumb("txtThumbnailName") & """></a><br>"
      RSthumb.MoveNext
Loop





and then change

 <%
                                                                      Set RSthumb = Server.CreateObject("ADODB.Recordset")
                                                                      SQLthumb = "SELECT * FROM tblProductImages WHERE intProductID = " & intProductId
                                                                      RSthumb.Open SQLthumb,Connection,3,3
                                                                      If RSthumb.EOF then
                                                                            Response.Write "<img src=""/site_images/no_image.jpg"">"
                                                                      Else
                                                                                    Do While Not RSthumb.EOF
                                                                                          Response.Write "<a href=""#"" onclick=""document.images['MainImage'].src= main" & Replace(RSthumb("txtImageName"), ".jpg", "") & ".src; return false;""><img border=""0"" src=""" & strImageThumbDirectory & RSthumb("txtThumbnailName") & """></a><br>"
                                                                                    RSthumb.MoveNext
                                                                                    Loop
                                                                      End if
                                                                      RSthumb.Close
                                                                      Set RSthumb = Nothing
                                                                      SQLthumb = " "
                                                                      %>

to

 <%
  If strImages <> "" then Response.Write strImages
  else  Response.Write "<img src=""/site_images/no_image.jpg"">"
%>
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

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