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
192 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
Question by:nick_harambee
    4 Comments
     
    LVL 2

    Accepted Solution

    by:
    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
    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
    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
    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    A web service (http://en.wikipedia.org/wiki/Web_service) is a software related technology that facilitates machine-to-machine interaction over a network. This article helps beginners in creating and consuming a web service using the ColdFusion Ma…
    In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
    The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
    The purpose of this video is to demonstrate how to Import and export files in 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 : Click on Too…

    856 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

    17 Experts available now in Live!

    Get 1:1 Help Now