Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

HTML Forum


You are currently viewing our HTML Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > HTML Forum > Layout suggestions for picture page

Post a Project »

Find a Professional HTML Freelancer!

Find a Freelancer to help you with your HTML projects

FREE Outsourcing eBook!

Reply
Layout suggestions for picture page
Old 12-28-2005, 12:48 PM Layout suggestions for picture page
Skilled Talker

Posts: 50
Trades: 0
Talkupation: tm1274 is on a distinguished road
I am working on a page that will have about 20 or 30 images of items and cannot seem to come up with a good layout. I would like to give the user the ability to click the image and open a window with a larger version of the image. I have looked at creating a photo gallery, but that seems to be to much for this application. Anyone have any suggestions or know where I can view any online to get an idea?
tm1274 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 12-28-2005, 01:07 PM
capetek's Avatar
Extreme Talker

Posts: 229
Location: Massachusetts
Trades: 0
Talkupation: capetek is on a distinguished road
Why not just use something simple like this

Use 110x110 images and use a javacsript popup for the link

HTML Code:
<table border="0" cellspacing="0" cellpadding="2" width="610">
        <tr>
          <td colspan="7" class="pageName">Page Name Here</td>
        </tr>
		<tr>
          <td width="22%" height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td width="22%" height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td width="22%" height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td width="22%" height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
        </tr>
		<tr>
          <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		  <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
        </tr>
		<tr>
			<td colspan="7">&nbsp;</td>
		</tr>

		<tr>
          <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
        </tr>
		<tr>
          <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		  <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
        </tr>
	<tr>
          <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
        </tr>
		<tr>
          <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		  <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
        </tr>	<tr>
          <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
        </tr>
		<tr>
          <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		  <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
        </tr>	<tr>
          <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
        </tr>
		<tr>
          <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		  <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
        </tr>	<tr>
          <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
        </tr>
		<tr>
          <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		  <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
        </tr>	<tr>
          <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
		  <td>&nbsp;</td>
		  <td height="110"><img src="image.gif" alt="small product photo" width="110" height="110" border="0" /></td>
        </tr>
		<tr>
          <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		  <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
		 <td>&nbsp;</td>
		   <td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Product Name</a><br />
		  Price: $0.00</td>
        </tr>
		<tr>
			<td colspan="7">&nbsp;</td>
		</tr>
      </table>
__________________
Anthony LeBoeuf
Cape-Tek IT Solutions

Please login or register to view this content. Registration is FREE

Great hosting at affordable pricing!
capetek is offline
Reply With Quote
View Public Profile Visit capetek's homepage!
 
Old 12-28-2005, 01:15 PM
Skilled Talker

Posts: 50
Trades: 0
Talkupation: tm1274 is on a distinguished road
Wow, your quick. I am not that great at understanding exactly what the html code will do by reading it but I will try it and see how it works. Thanks for your help.
tm1274 is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Layout suggestions for picture page
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > HTML Forum > Layout suggestions for picture page

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.50198 seconds with 12 queries