Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

i need to make some changes to some coldfusion code so that the space between thumbnails is regulated and varies according to the size of the browser window

Posted on 2004-10-29
4
Medium Priority
?
199 Views
Last Modified: 2013-12-24
hello,

dldeeds kindly wrote me some coldfusion code for developing a webpage of thumbnails with links to other webpages, which i have adapted a little bit for my purposes:

<cfdirectory directory="C:\CFusionMX\wwwroot\thumbnails\psychotherapists"
      action="list"
      name="images"
      filter="*.jpg"
      sort="name ASC">

<!--- Set a counter to 0 and a var to hold the total number of images  --->
<cfset numrec=images.RecordCount>
<cfset s=0>
<style type="text/css">
<!--
.style2 {
      font-size: xx-large;
      color: #666600;
}
body {
      background-color: #EDEAE4;
}
.style3 {font-size: x-small}
.style4 {font-size: 9px; color: #666600; }
.style5 {font-size: 9px}
.style6 {font-size: larger}
-->
</style>

     
<title>psychotherapists</title><table width="1100" border="0">
<tr><td colspan="8" align="center"><p class="style2">Psychotherapists</p>
  <p class="style4">&nbsp;</p></td>
</tr>
<span class="style5">
<!--- Title row --->
<cfloop query=images>
</cfloop>
<cfloop query=images>
</cfloop>
</span><span class="style6"><cfloop query=images>
</cfloop>
</span><span class="style5"><cfloop query=images>
</cfloop>
<cfloop query=images>
</cfloop>
</span><span class="style3"><cfloop query=images>
</cfloop>
<cfloop query=images>
</cfloop>
</span>
<cfloop query=images>
  <!--- Create a variable to contain each Authors page (authorname.htm) --->
  <cfset AuthorPage=ReplaceNoCase(images.name, ".jpg", ".htm")>
  <!--- Create a variable to contain the Authors name to use under the image      --->
  <cfset AuthorName=ReplaceNoCase(images.name, ".jpg", "")>
  <cfset s=s+1>
   <!--- use modulus function to know when to change rows - this one is set up for 3 images per row --->
  <cfset mods=(s mod 8)>
  <cfoutput>
  <cfif mods eq 1>
     <tr>
  </cfif>
  <!--- Create a table cell for each image in the query --->
  <!--- Each cell will contain the thumbnail which is also a link to the author page, with authors name under thumbnail --->
   <td align="center" valign="top">
   <A href="/psychotherapists/#AuthorPage#"><img src="/thumbnails/psychotherapists/#images.name#" alt="thumbnail image"  border="0"></A>
   <br>#AuthorName#
   </td>
   <cfif mods eq 0>
   </tr>
   </cfif>
   <!--- If we are on the last image from the query, close the row if it has not been, then close the table  --->          
   <cfif s eq numrec>
   <cfif mods neq 0>
   </tr>
</cfif>
</table>
</cfif>
</cfoutput>
</cfloop>

the change i would like to make is to incorporate, if possible, some code which will regulate the distance between the thumbnails depending on the size of the browser window.  it may help you to look at this link where esopo designed such a page for me (but not using coldfusion):

http://www.experts-exchange.com/Web/WebDevSoftware/DreamWeaver/Q_21144838.html

basically my thumbnails are all the same height, but different widths, so in the coldfusion code above there is a varying distance between the thumbnails (depending on the width of the thumbnail).  however, in esopo's code the distance is the same between thumbnails, regardless of the width of the thumbnail, or the size of the browser page.  if possible i would like both features in the coldfusion code, i.e. the same distance between thumbnails which varies according to the size of the browser page,

thanks,

nick.

0
Comment
Question by:nick_harambee
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 2

Accepted Solution

by:
dldeeds earned 2000 total points
ID: 12443805
Inside the <cfloop..> tag,  set up a fixed width for your table cells like this...

 <td width="125" align="center" valign="top">
   <A href="/psychotherapists/#AuthorPage#"><img src="/thumbnails/psychotherapists/#images.name#" alt="thumbnail image"  border="0"></A>

or

 <td width="12%" align="center" valign="top">
   <A href="/psychotherapists/#AuthorPage#"><img src="/thumbnails/psychotherapists/#images.name#" alt="thumbnail image"  border="0"></A>

You will have to calculate the fixed width and/or percentage you want, but then each cell should be same size.

0
 

Author Comment

by:nick_harambee
ID: 12448670
thanks dldeeds.....

the table now resizes according to the size of the browser window.  however the gap between the thumbnails isn't consistent, i.e. it is dependent on the width of the thumbnails.  i now realise that esopo's code is the same as this.  but is it possible to have the cell width for each cell set to the width of the thumbnail in this cell, so then the spacing would be even, regardless of the width of each thumbnail?

thanks,

nick.

0
 
LVL 2

Expert Comment

by:dldeeds
ID: 12450440
The quickest way is to let the <img..> tag resize each thumbnail to a fixed size that you like for your web page.

Like this..

<img src="/thumbnails/psychotherapists/#images.name#" alt="thumbnail image"  border="0" width="160" height="120">

add a width="somenumber" and height="somenumber" to the img tag. This resizes the image for display only, in my test file I have a folder with some images of all kinds of sizes, everything from 90x90 gifs up to some 1024X768 bitmpas. They were all resized for my test thumbnail page to the 160X120 that I have in my example.

Does a pretty good job of resizing while maintaing image quality, but these are thumbnails, so I don't mind. What it won't do is resize an image up. In other words if your original image is say 90X90 it will stay at 90x90, but if you have an image that is 640x480 then it will resize down to 160x120 (in my example).

So you can determine just what size you want your thumbnails to be regardless of their original size as long as the thumbnail size is smaller than the original and then modify the image tag with your width= and height= values.

dldeeds
0
 

Author Comment

by:nick_harambee
ID: 12463447
thanks for your help with this dldeeds,

i have posted another question about this code asking for a couple more alterations:

http://www.experts-exchange.com/Web/WebDevSoftware/ColdFusion/Q_21190164.html

nick.
0

Featured Post

 [eBook] Windows Nano Server

Download this FREE eBook and learn all you need to get started with Windows Nano Server, including deployment options, remote management
and troubleshooting tips and tricks

Question has a verified solution.

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

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
Geo-targeting is the practice of distributing content based on a person’s location, as best as you can determine it. Let’s look at some ways you could successfully use this tactic. The following tips and case studies could lead to meaningful results.
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…

636 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