bluskyGuy
asked on
Only displaying 3 images per row
I have a query that's displaying images. The problem is all the images are being displayed on one row causing the user to have to scroll to the right.
What I would like to do is have the images displayed 3 images per row. So, if there are 15 images, there would be 5 rows with 3 images in each row.
Here's the output that's currently outputting all images on one row.
<cfset variables.opt_count = 0>
<cfloop query="getoption">
<cfif getOption.image neq 0>
<td class="formText" align="center"><a href="##" onclick="document.order_fo rm.product _option_#a ttributes. count#[#va riables.op t_count#]. selected=t rue;" class="formText"><img src="#request.urlRoot##req uest.relat ivePath#im ages/site_ images/#ge tOption.im age#" alt="#getOption.item#" border="0"><br>#getOption. currentrow #</a></td>
</cfif>
<cfset variables.opt_count = #variables.opt_count# + 1>
</cfloop>
Thanks,
Rick
What I would like to do is have the images displayed 3 images per row. So, if there are 15 images, there would be 5 rows with 3 images in each row.
Here's the output that's currently outputting all images on one row.
<cfset variables.opt_count = 0>
<cfloop query="getoption">
<cfif getOption.image neq 0>
<td class="formText" align="center"><a href="##" onclick="document.order_fo
</cfif>
<cfset variables.opt_count = #variables.opt_count# + 1>
</cfloop>
Thanks,
Rick
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
that could be due to your cell spacing or cell padding properties of Table.
Hi there
Try this, its almost the same as Jester.
Also make sure the <table> tags and the first <tr> tags are placed just before and after the loop like this:
<table>
<tr>
<cfloop query="getoption">
<cfif getOption.image neq 0>
<td class="formText" align="center"><a href="##" onclick="document.order_fo rm.product _option_#a ttributes. count#[#va riables.op t_count#]. selected=t rue;" class="formText"><img src="#request.urlRoot##req uest.relat ivePath#im ages/site_ images/#ge tOption.im age#" alt="#getOption.item#" border="0"><br>#getOption. currentrow #</a></td>
</cfif>
<cfset variables.opt_count = #variables.opt_count# + 1>
<cfif not getOption.currentRow mod 3 AND getOption.currentRow neq getOption.recordcount>
</tr>
<tr>
</cfif>
</cfloop>
</tr>
</table>
Mause
Try this, its almost the same as Jester.
Also make sure the <table> tags and the first <tr> tags are placed just before and after the loop like this:
<table>
<tr>
<cfloop query="getoption">
<cfif getOption.image neq 0>
<td class="formText" align="center"><a href="##" onclick="document.order_fo
</cfif>
<cfset variables.opt_count = #variables.opt_count# + 1>
<cfif not getOption.currentRow mod 3 AND getOption.currentRow neq getOption.recordcount>
</tr>
<tr>
</cfif>
</cfloop>
</tr>
</table>
Mause
this is what i do
<table>
<cfset counter ="0">
<tr>
<cfoutput query="whatever">
<cfif counter is not "3">
<td>image code</td>
<cfset counter = counter +1>
<cfelse>
<td>image code</td>
</tr>
<tr>
<cfset counter = "0">
</cfif>
</cfoutput>
</table>
<table>
<cfset counter ="0">
<tr>
<cfoutput query="whatever">
<cfif counter is not "3">
<td>image code</td>
<cfset counter = counter +1>
<cfelse>
<td>image code</td>
</tr>
<tr>
<cfset counter = "0">
</cfif>
</cfoutput>
</table>
Just a suggestion, but not really necessary for you, what if you used CSS instead of tables... by using DIV's and float:left or SPANs properties of CSS you could eliminate the table altogether. Since you're using the class attribute for your TD's you obviously have a stylesheet defined already. Here would be one way of achieving this:
<div id="picureDisplayArea">
<div>
<cfloop query="getoption">
<cfif getOption.image neq 0>
<span class="formText"><a href="##" onclick="document.order_fo rm.product _option_#a ttributes. count#[#va riables.op t_count#]. selected=t rue;" class="formText"><img src="#request.urlRoot##req uest.relat ivePath#im ages/site_ images/#ge tOption.im age#" alt="#getOption.item#" border="0"><br>#getOption. currentrow #</a></spa n>
</cfif>
<cfset variables.opt_count = #variables.opt_count# + 1>
<cfif not getOption.currentRow mod 3 AND getOption.currentRow neq getOption.recordcount>
</div>
<div>
</cfif>
</cfloop>
</div>
</div>
Although this will basically work exactly the same as the table example it has a couple of added benefits... for example if you are loading a large number of records, a DIV will display as soon as the content is finished... a TABLE is the same way, but this means that your table will not be displayed until the entire table is loaded. This way as soon as a picture is loaded, it is displayed. Didn't actually try this exact example, just translated on the above examples by Mause and Jester (don't give me points unless you give them 90% of the points on this question - I'm just suggesting an alternative method).
Food for thought... if you really need me to, or if you have problems, add another comment and I'll go ahead and do the CSS definitions and everything with test data to make sure it runs properly.
Cheerz.
<div id="picureDisplayArea">
<div>
<cfloop query="getoption">
<cfif getOption.image neq 0>
<span class="formText"><a href="##" onclick="document.order_fo
</cfif>
<cfset variables.opt_count = #variables.opt_count# + 1>
<cfif not getOption.currentRow mod 3 AND getOption.currentRow neq getOption.recordcount>
</div>
<div>
</cfif>
</cfloop>
</div>
</div>
Although this will basically work exactly the same as the table example it has a couple of added benefits... for example if you are loading a large number of records, a DIV will display as soon as the content is finished... a TABLE is the same way, but this means that your table will not be displayed until the entire table is loaded. This way as soon as a picture is loaded, it is displayed. Didn't actually try this exact example, just translated on the above examples by Mause and Jester (don't give me points unless you give them 90% of the points on this question - I'm just suggesting an alternative method).
Food for thought... if you really need me to, or if you have problems, add another comment and I'll go ahead and do the CSS definitions and everything with test data to make sure it runs properly.
Cheerz.
try also adding a <br /> tag after your image tags... right before the </td>
This will tighten up your table
This will tighten up your table
glad i could help
thanks for the points
thanks for the points
ASKER
Thanks,
Rick