SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change code to display images in a table

    hello, i have some code that displays some images in the following way

    . .
    . .
    . .

    what i would like to do is change the way they display to

    . . .
    . . .


    basically i want to amend the code i have (which was not written by me) to adjust the display to 2 rows of 3 (as opposed to 3 rows of 2).

    here is the code..

    Code:
    <table align="left" cellspacing="0" cellpadding="0" border="0">
    	<tr>
    		<td align="left" valign="top" width="240">
    			<table align="left" border="1">
    				<%b = 1
    				for a = 0 to 5
    					if strImage(a) <> "" then
    						if b = 1 then
    							%><tr><%
    						end if
    						%><th align="left"><img class="choice" src="<%=strImage(a)%>" border="0" width="70" height="50" onmouseover="showfullimage(this.src);" /></th><%
    						if b < 2 then
    							b = b + 1
    						else
    							if a < 5 then
    								b = 1
    							else
    								b = 2
    							end if
    							%></tr><%
    						end if
    					end if
    				next
    				if b = 1 then
    					%><td></td>
    					</tr><%
    				end if%>
    			</table>
    		</td>
    		<th valign="bottom">
    		<a href="javascript: self.close()"><img class="closing" src="close.gif"></a>
    			</th>
    	</tr>	
    </table>

    basically what i need it to do...

    if there are 3 or less images then display them on 1 row (in 3 <td>s)
    if there are more than 3 images then display them in 2 rows..

    i hope this is clear enough. thanks.

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,204
    Mentioned
    106 Post(s)
    Tagged
    1 Thread(s)
    It's clear enough, but in the long run, you'll probably thank yourself if you change these to floats instead....

    But to answer your problem, I rewrote the block for you, changing variable names to mean something and added comments where appropriate...

    Code ASP:
    <table align="left" cellspacing="0" cellpadding="0" border="0">
     <tr>
      <td align="left" valign="top" width="240">
       <table align="left" border="1">
    <%              imgCount = 0
        for arrayCount = 0 to 5
         if Len(strImage(arrayCount)) > 0 then
                            imgCount = imgCount + 1
                            ' If imgCount = 1, then create a new row....
                            if imgCount mod 3 = 1 then %>
                    <tr>
    <%                      end if %>
                        <th align="left">
                            <img class="choice" src="<%=strImage(arrayCount)%>" border="0" width="70" height="50" onmouseover="showfullimage(this.src);" />
                        </th>
    <%                      ' If imgCount = 3, then close the current row and reset back to zero....
                            if imgCount mod 3 = 0 then %>
                    </tr>
    <%                          imgCount = 0        
                            end if 
         end if
        next
                    ' Now see if there need to be any blank cells to prevent any display issues
                    if imgCount > 0 then
                        for i = imgCount to 3 %>
                        <td>&nbsp;</td>
    <%                  next %>
                    </tr>
    <%              end if %>
       </table>
      </td>
      <th valign="bottom">
      <a href="javascript: self.close()"><img class="closing" src="close.gif"></a>
       </th>
     </tr> 
    </table>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •