coldfusion_在ColdFusion中建立旋转画廊

coldfusion

They came, they bought… but did they come back? An ecommerce site’s most important visitors are the ones that actually give up the plastic, and once you’ve got a live one on the line, you need them to come back — and to bring their friends too. How? Well, shoppers are people, and people like to feel a part of something. Why not make your customers a part of your site by creating a picture gallery for them to populate?

他们来了，他们买了……但是他们回来了吗？ 电子商务站点上最重要的访问者实际上是放弃塑料访问者，一旦您有了在线访问者，就需要他们回来-并带上他们的朋友。 怎么样？ 好吧，购物者就是人们，人们喜欢感受事物的一部分。 为什么不通过创建图片库供其填充而使您的客户成为您网站的一部分？

I know what you’re thinking: galleries like this tend to grow too big, and when they do, they start to lose their appeal. I had a client recently with an interesting solution: make the gallery rotate.

我知道您在想什么：像这样的画廊往往会变得太大，而当它们这样做时，它们就会开始失去吸引力。 我最近有一个客户，提供了一个有趣的解决方案：旋转画廊。

坐在车里旋转 (Sit in Your Car and Rotate)

My client wanted their gallery to only show twelve pictures at a time, and rotate one old item out, and one new item in, each day. This client sells street rod parts and kits, and their customers love to send in pictures of themselves at the throttles of their T Buckets, popping wheelies in the company parking lot and scaring grandmas. Here’s an example that shows it in action. This example is set to rotate once per second, so refresh your browser a few times to see it in action.

我的客户希望他们的画廊一次只显示十二张图片，每天旋转一次旧物品，再旋转一个新物品。 该客户出售路标零件和套件，他们的客户喜欢在自己的T桶油门处发送自己的照片，在公司停车场中突然撞上车轮，并吓到祖母。 这是一个显示其实际操作的示例 。 此示例设置为每秒旋转一次，因此请刷新几次浏览器以查看其运行情况。

So I was driving around the twisty backroads where I live, listening to Eric Dolphy, when I figured out how I was going to get this to work. I was going to use a table in the database, so the client could add pictures through an admin section. We needed a way to shift forward one record every day, regardless of the recordcount. I could see, too, there was going to be an overlap from the last record to the first that would need smoothing out.

因此，当我弄清楚如何使它工作时，我正在绕着我居住的曲折道路行驶，听着Eric Dolphy的讲话。 我打算使用数据库中的表，因此客户端可以通过管理部分添加图片。 我们需要一种方法来每天向前转移一条记录，而不管记录数是多少。 我也可以看到，从最后一个记录到第一个记录会有重叠，需要进行平滑处理。

摇摇么 (Shake that Mody)

It occurred to me that if I had a large number that incremented daily, I could divide it by the recordcount to calculate which record to begin with. For instance, if we count the number of days since Jan 1, 2000 (let’s call it the ticker), and we then divide the ticker by the recordcount, the remainder will always be between 0 and one less than the recordcount. Becuase our ticker will steadily increment (if the sun rises), our remainder will also increment at the same rate. If we wanted, we could make the gallery rotate every hour, minute, or second by adjusting how the ticker is calculated.

在我看来，如果我有大量每天增加的数字，我可以将其除以记录计数，以计算从哪条记录开始。 例如，如果我们计算自2000年1月1日以来的天数(我们将其称为代码)，然后将代码除以记录计数，则余数将始终比记录计数小0到1。 因为我们的股票行情稳定地增加(如果太阳升起)，我们的其余部分也将以相同的速度增加。 如果需要，我们可以通过调整代码的计算方式使画廊每小时，每分钟或每秒钟旋转一次。

入门 (Getting Started)

This example assumes you have a basic understanding of HTML and the ColdFusion language. If you are just starting out with ColdFusion, check out Chris Beasley’s excellent 3-part series here.

本示例假定您对HTML和ColdFusion语言有基本的了解。 如果您刚开始使用ColdFusion，请在此处查看Chris Beasley出色的3部分系列。

ColdFusion Server 5 is now available free to developers; the trial version becomes a single-user license when the 30-day trial expires. You can download it here.

开发人员现在可以免费使用ColdFusion Server 5。 30天试用期到期后，试用版将成为单用户许可证。 您可以在此处下载。

You’ll need this ZIP file.

您将需要此ZIP文件 。

It contains:

它包含了：

• rotating_gallery.cfm ColdFusion template
  rotation_gallery.cfm ColdFusion模板
• sitepoint_gallery.mdb Microsoft Access database
  sitepoint_gallery.mdb Microsoft Access数据库
• 26 thumbnails (.gif)
  26张缩略图(.gif)

The database contains only one table, named ‘gallery’. The fields in it are:

该数据库仅包含一个名为“ gallery”的表。 其中的字段是：

• ID (autoincrement, primary key)
  ID(自动递增，主键)
• img_name – the filename of the image (12.gif)
  img_name –图像的文件名(12.gif)
• img_x – image width
  img_x –图像宽度
• img_y – image height
  img_y –图像高度
• img_title – text to display with this image
  img_title –与此图像一起显示的文本

There are 26 records, one for each of the 26 thumbnails.

有26条记录，每26个缩略图中有一个。

Unzip to a folder mapped to the ColdFusion server. Hit Alt-M in ColdFusion studio to open the mappings window, read the ColdFusion documentation if you need help. You’ll also need to create a System DSN named ‘sp_gallery‘ that points to the access .mdb file. Again, if you need help, try the documentation.

解压缩到映射到ColdFusion服务器的文件夹。 在ColdFusion Studio中按Alt-M打开映射窗口，如果需要帮助，请阅读ColdFusion文档。 您还需要创建一个名为' sp_gallery '的系统DSN，它指向访问.mdb文件。 同样，如果您需要帮助，请尝试该文档。

Point your browser to the ‘rotating_gallery.cfm‘ file. You should see a small gallery of 12 numbered images, similar to the example from above.

将您的浏览器指向“ rotating_gallery.cfm ”文件。 您应该会看到一个包含12个编号图像的小画廊，类似于上面的示例 。

拿出你的气枪 (Get Out Your Airgun)

Let’s take a look at ‘rotating_gallery.cfm‘.

让我们看一下“ rotating_gallery.cfm ”。

<cfprocessingdirective suppresswhitespace="Yes">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  

<html>  

<head>  

  <title>Rotating Gallery</title>  

  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;  

  charset=ISO-8859-1">  

</head>  

<body>

Start the page like any other, the cfprocessingdirective tag helps to suppress extra white space generated by the loops below. This makes for a smaller file when the template is parsed and sent to the browser, speeding up the visitor’s experience.

像其他任何页面一样开始页面， cfprocessingdirective标记有助于抑制下面的循环所产生的多余空白。 当模板被解析并发送到浏览器时，这使得文件更小，从而加快了访问者的体验。

<cfquery name="qGallery" datasource="sp_gallery"

cachedwithin="#CreateTimeSpan(0,0,10,0)#">  

  SELECT ID,pic_thumb,pic_x,pic_y,pic_title FROM gallery  

  ORDER BY ID;  

</cfquery>

We run a simple query to retrieve all the records from the gallery table.

我们运行一个简单的查询以从库表中检索所有记录。

<!--- initialize variables --->

<cfset start_day = DateDiff("y","01/01/2000",Now())>

This is our ticker value, which we need incremented every day. We use the DateDiff function to tell us how many days ("y") have passed since 01/01/2000 and today, and assign it to the variable ‘start_day‘. This value must be larger than your recordcount, so push the date back if you have a large number of items to cycle through.

这是我们的股票价值，我们每天需要增加。 我们使用DateDiff函数告诉我们自2000年1月1日至今已经过了几天(“ y ”)，并将其分配给变量' start_day '。 此值必须大于您的记录计数，因此，如果要循环浏览的项目很多，请推迟日期。

<cfset total_items = 12>

Set total_items to the total number of items to display on the page. We’ll use this variable to determine the stopping point.

将total_items设置为要在页面上显示的项目总数。 我们将使用此变量来确定停止点。

<cfset start_item = (start_day MOD qGallery.recordcount) + 1>

The variable start_item will hold the value of the item in the first position. We find it by adding one to the remainder of the start_day variable divided by the record count from our query. To find the remainder (or the modulus) of a division equation, we employ the MOD math function. In ColdFusion (5 MOD 2) returns 1, the remainder of 5 / 2. The modulus will always be an integer lower than the divisor. If you think about it, any number divided by 4 will always produce a remainder (or modulus) of 0, 1, 2 or 3.

变量start_item将把项目的值保持在第一个位置。 我们通过在start_day变量的其余部分中加一个除以查询记录数来找到它。 为了找到除法方程的余数(或模数)，我们采用了MOD数学函数。 在ColdFusion(5 MOD 2)中返回1，为5/2的余数。模数将始终是一个小于除数的整数。 如果考虑一下，除以4的任何数字将始终产生0、1、2或3的余数(或模数)。

<cfset end_item = start_item + (total_items - 1)>

We also need to know which record to stop at, we can find it easily by subtracting one from the ‘total_items‘ variable and adding that value to the ‘start_item‘ variable. We assign this result to the variable ‘end_item‘.

我们还需要知道要在哪条记录处停止，可以通过从“ total_items ”变量中减去一个并将该值添加到“ start_item ”变量中来轻松找到它。 我们将此结果分配给变量“ end_item ”。

<cfif end_item GT qGallery.recordcount>

  <cfset end_item = end_item - qGallery.recordcount>  

</cfif>

What happens if start_item is record 20, and there are only 23 records? When we add 11 we get 31! We’ll need to deal with the overlap from the last record to the first. We still need to know what record to stop at, so if the ‘end_item‘ variable is greater than the recordcount, we subtract the recordcount from the ‘end_item‘ value to find the correct ‘end_item‘.

如果start_item是记录20，并且只有23个记录，会发生什么情况？ 当我们加11时我们得到31！ 我们需要处理从最后一条记录到第一条记录的重叠。 我们仍然需要知道要在哪条记录处停止，因此，如果“ end_item ”变量大于recordcount，我们将从“ end_item ”值中减去recordcount以找到正确的“ end_item ”。

<cfset columns = 4>

Set the ‘columns‘ variable to the desired number of table columns.

将' columns '变量设置为所需的表列数。

<cfset col_tick = 0>

We’ll increment the ‘col_tick‘ variable as we output the table cells in each row.

在输出每一行的表格单元格时，我们将增加' col_tick '变量。

<cfset count = 0>

Count will also be incremented, and when it reaches the value of our total_items variable, we’re at the end.

Count也将增加，当它达到我们的total_items变量的值时，我们就结束了。

Now our query has been run and all necessary variables initialized. On with the fun part: building the gallery!

现在，我们的查询已运行，​​并且所有必需的变量都已初始化。 有趣的部分：建立画廊！

<div align="center">

<table width="70%" border="0" cellpadding="0" cellspacing="0">    

<tr>

We start with a table, and open a row.

我们从一张桌子开始，然后打开一行。

<cfif start_item LT end_item>

If our end_item value is higher than the start car, we can perform a very straightforward output. If not, we must deal with the overlap from the last record to the first record.

如果我们的end_item值高于起跑车，则可以执行非常简单的输出。 如果没有，我们必须处理从最后一条记录到第一条记录的重叠。

I’m using CFLOOP below for the clarity that the startrow and endrow attributes provide. However this could also be accomplished with CFOUTPUT.

为了使startrow和endrow属性提供清晰的信息，我在下面使用CFLOOP 。 但是，这也可以使用CFOUTPUT完成。

<cfloop query="qGallery" startrow="#start_item#"

endrow="#end_item#">

We set the startrow and endrow attributes to our start_item and end_item values.

我们将startrow和endrow属性设置为我们的start_item和end_item值。

<cfset col_tick = IncrementValue(col_tick)>

<cfset count = IncrementValue(count)>

We’ll keep track of the total number of items output with the count variable, when it matches total_items, we are finished. The col_tick variable is used to count the table columns, when col_tick equals columns we need to start a new table row and reset col_tick to zero.

我们使用count变量跟踪输出的项目总数，当它与total_items匹配total_items ，我们就完成了。 col_tick变量用于计数表列，当col_tick等于列时，我们需要开始一个新的表行并将col_tick重置为零。

<cfoutput>

We open a cfoutput tag, as we know need to print our variable values to the browser.

我们打开cfoutput标签，因为我们知道需要将变量值打印到浏览器中。

<td width="40"><img src="#pic_thumb#" height="#pic_y#"

  width="#pic_x#" alt="#pic_title#"></td>

At last, we write our img tag to the browser.

最后，我们将img标签写入浏览器。

<cfif count EQ total_items>

    </tr></table>   

  <cfelseif col_tick EQ columns>   

    </tr><tr><cfset col_tick = 0>   

  </cfif>

Here we compare our count variable to the total_items variable. When they match, we are through and need to close our table. If not true, we check to see if our col_tick variable matches our columns variable. If they match, we need to close our current table row and start a new one.

在这里，我们将计数变量与total_items变量进行比较。 当它们匹配时，我们就结束了，需要关闭表。 如果不正确，我们将检查col_tick变量是否与我们的columns变量匹配。 如果它们匹配，则需要关闭当前表行并开始一个新行。

</cfoutput>

Close our cfoutput tag.

关闭我们的cfoutput标签。

</cfloop>

Close the loop.

闭环。

<cfelse><!--- if start_item LT end_item --->

<cfelse><!--- if start_item LT end_item --->

If our end_item value is less than the start_item value, we’ll need to deal with the overlap from the last record to the first. We can do this by outputting the query results twice. Once to the end of the recordset, and then from the beginning of the recordset to the end_item value.

如果我们的end_item值小于start_item值，则需要处理从最后一条记录到第一个记录的重叠。 我们可以通过两次输出查询结果来做到这一点。 一次到记录集的末尾，然后再从记录集的end_item到end_item值。

The code below is identical to the code above, except for the startrow and endrow values in the cfloop tags.

除了cfloop标记中的startrow和endrow值外，下面的代码与上面的代码相同。

For the first output we set startrow to the start_item value as above, but this time we set the endrow value to match the recordcount from our query. Also, we don’t need the <cfif count EQ total_items> statement, as we know this loop will not complete the gallery.

对于第一个输出，我们startrow将start_item设置为start_item值，但是这次我们将endrow值设置为与查询中的recordcount相匹配。 另外，我们不需要<cfif count EQ total_items>语句，因为我们知道此循环不会完成画廊。

<cfloop query="qGallery" startrow="#start_item#"

  endrow="#qGallery.recordcount#">   

    <cfset col_tick = IncrementValue(col_tick)>   

    <cfset count = IncrementValue(count)>   

    <cfoutput>   

      <td width="40"><img src="#pic_thumb#" height="#pic_y#"   

      width="#pic_x#" alt="#pic_title#"></td>   

        <cfif col_tick EQ columns>   

          </tr><tr><cfset col_tick = 0>   

        </cfif>   

    </cfoutput>   

  </cfloop>

The second output will be from the start of the recordset to the end_item value.

第二个输出将是从记录集的开始到end_item值。

 <cfloop query="qGallery" startrow="1" endrow="#end_item#">        <cfset col_tick = IncrementValue(col_tick)>        <cfset count = IncrementValue(count)>        <cfoutput>          <td width="40"><img src="#pic_thumb#" height="#pic_y#"          width="#pic_x#" alt="#pic_title#"></td>            <cfif count EQ total_items>              </tr></table>            <cfelseif col_tick EQ columns>              </tr><tr><cfset col_tick = 0>            </cfif>        </cfoutput>      </cfloop>         </cfif><!--- close if start_item LT end_item --->

<cfloop query="qGallery" startrow="1" endrow="#end_item#"> <cfset col_tick = IncrementValue(col_tick)> <cfset count = IncrementValue(count)> <cfoutput> <td width="40"><img src="#pic_thumb#" height="#pic_y#" width="#pic_x#" alt="#pic_title#"></td> <cfif count EQ total_items> </tr></table> <cfelseif col_tick EQ columns> </tr><tr><cfset col_tick = 0> </cfif> </cfoutput> </cfloop> </cfif><!--- close if start_item LT end_item --->

Now we close our if statement.

现在，我们关闭if语句。

</div>

</body>    

</html>    

</cfprocessingdirective>

Close our page, and we’re finished!

关闭我们的页面，我们完成了！

注意事项 (Considerations)

This code could just as easily be applied to blocks of text or banners. If you’d like it to rotate at an interval other than daily, adjust this line:

此代码可以同样容易地应用于文本或横幅块。 如果您希望轮换间隔不是每天一次，请调整此行：

<cfset start_day = DateDiff("y","01/01/2000",Now())>

The "y" returns the number of days between 01/01/2000 and the present. To make the gallery rotate on the hour, change the "y" to an "h". See the ColdFusion documentation for a complete discussion of the DateDiff function.

“ y ”返回从2000年1月1日到现在的天数。 要使画廊按小时旋转，请将“ y ”更改为“ h ”。 有关DateDiff函数的完整讨论，请参见ColdFusion文档。

The contents of our loops are all very similar, if we leave in the if statements we omitted during the second sets of output, we could put this code into an include file.

循环的内容非常相似，如果我们在第二组输出中保留省略的if语句，则可以将此代码放入包含文件中。

Add some more fields to the database, and you could have the thumbnails lead to larger pics, accompanied by descriptive paragraphs.

在数据库中添加更多字段，您可以使缩略图显示更大的图片，并附带描述性段落。

With some modification, this can become a great custom tag! I’ve used it to rotate on sale items for other sites. Feel free to modify the code, let me know what you come up with!

经过一些修改，这可以成为一个很棒的自定义标签！ 我用它来轮换其他网站的销售商品。 随时修改代码，让我知道您的想法！

结论 (Conclusion)

We’ve made our client happy, and created a better gallery. The visitor’s thrill of having their picture on the Website is only augmented by the fact that it will be there for a set time, disappear for a spell, and then return later. If you had just spent one year and two gazillion bucks building a space-tube chassis 1923 T-Bucket with a screaming powerplant and Weber stacks, wouldn’t you want to show your friends the site you posted it to? The customers are now performing targeted marketing for the site owners!

我们让客户满意，并创建了一个更好的画廊。 访问者将其图片显示在网站上的快感只会因以下事实而增加：该图片会在指定的时间内出现在网站上，消失一段咒语，然后再返回。 如果您刚刚花了一年和两千亿美元来建造带有尖叫的发电厂和Weber堆栈的太空管底盘1923 T型桶，您是否要向您的朋友展示您发布该网站的网站？ 客户现在正在为网站所有者进行有针对性的营销！

Now go forth and multiply–or rather, divide and conquer.

现在继续前进-或者说是分而治之。

翻译自: https://www.sitepoint.com/rotating-gallery-coldfusion/

coldfusion