Solved

Only displaying 3 images per row

Posted on 2004-09-26
8
165 Views
Last Modified: 2013-12-24
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_form.product_option_#attributes.count#[#variables.opt_count#].selected=true;" class="formText"><img src="#request.urlRoot##request.relativePath#images/site_images/#getOption.image#" alt="#getOption.item#" border="0"><br>#getOption.currentrow#</a></td>
                                                </cfif>
                                                <cfset variables.opt_count = #variables.opt_count# + 1>
                                                
                                          </cfloop>

Thanks,
Rick
0
Comment
Question by:bluskyGuy
8 Comments
 
LVL 25

Accepted Solution

by:
James Rodgers earned 500 total points
ID: 12156120
try this

<cfset variables.opt_count = 0>
                                   <cfloop query="getoption">
                                        <cfif getOption.image neq 0>
                                             <td class="formText" align="center"><a href="##" onclick="document.order_form.product_option_#attributes.count#[#variables.opt_count#].selected=true;" class="formText"><img src="#request.urlRoot##request.relativePath#images/site_images/#getOption.image#" 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>
</tr>
<tr>
</cfif>
                                   </cfloop>
0
 

Author Comment

by:bluskyGuy
ID: 12156138
Thanks for the fast response. Yea, the images are now being displayed with 3 images per row. however, there is a large white space above the rows of images where there was none before? Any ideas?

Thanks,
Rick
0
 
LVL 21

Expert Comment

by:pinaldave
ID: 12156264
that could be due to your cell spacing or cell padding properties of Table.
0
 
LVL 10

Expert Comment

by:Mause
ID: 12157896
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_form.product_option_#attributes.count#[#variables.opt_count#].selected=true;" class="formText"><img src="#request.urlRoot##request.relativePath#images/site_images/#getOption.image#" 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
0
Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

 

Expert Comment

by:tpiazza
ID: 12161100
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>
0
 
LVL 9

Expert Comment

by:digicidal
ID: 12186678
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_form.product_option_#attributes.count#[#variables.opt_count#].selected=true;" class="formText"><img src="#request.urlRoot##request.relativePath#images/site_images/#getOption.image#" alt="#getOption.item#" border="0"><br>#getOption.currentrow#</a></span>
     </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.
0
 
LVL 2

Expert Comment

by:KoldFuzun
ID: 12202213
try also adding a <br /> tag after your image tags... right before the </td>

This will tighten up your table
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 12251270
glad i could help

thanks for the points
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

932 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

11 Experts available now in Live!

Get 1:1 Help Now