Image Gallery

soad789

Hi there, I was wandering if anyone can give me help on the following please. I am very new to coldfusion.

I have to create a web page which contains 6 images with text taken from an access database which is already stored on the web server.

If an image is clicked, a new page is opened which displays the image and the description.

Can anybody guide me in the right direction please?

acoder

Hi soad789, welcome to Bytes!

What have you managed so far? If you post your code, we can help you with the parts you're stuck on.

soad789

Hi Acoder. Thanks for the reply. Here's what i'v got so far.

Expand|Select|Wrap|Line Numbers

 <body>
 
<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>    
 
<!--- initialize variables --->

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

<cfset total_items = 12><!--- total items to display --->

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

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

<cfif end_item GT qGallery.recordcount>

    <cfset end_item = end_item - qGallery.recordcount>

</cfif>

<cfset columns = 4>

<cfset col_tick = 0>

<cfset count = 0>
 
<div align="center">

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

<tr>
 
<cfif start_item LT end_item><!--- we can do it one loop, the end_item is higher than the start_item --->
 
     <cfloop query="qGallery" startrow="#start_item#" 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#"></td>

            <cfif count EQ total_items>

                </tr></table>

            <cfelseif col_tick EQ columns>

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

            </cfif>

        </cfoutput>

    </cfloop>
 
<cfelse><!--- start_item NOT LT end_item - we need two loops - 1st to the end of the recodset, 2nd to the end_item value --->
 
    <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#"></td>

                <cfif col_tick EQ columns>

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

                </cfif>

        </cfoutput>

    </cfloop>
 
    <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#"></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 --->
 
</div>
 
</body>

acoder

You can add a link around the image which links to a page making it unique to the image clicked by passing the ID, e.g.

Expand|Select|Wrap|Line Numbers

 <a href="imgLarge.cfm?id=#ID#"><img src="#pic_thumb#" height="#pic_y#" width="#pic_x#"></a>
 

PS. please use [code] tags when posting code. It makes it easier to read. Thanks!

Image Gallery

re: Image Gallery

re: Image Gallery

re: Image Gallery

Similar ColdFusion bytes

/bytes/development

/bytes/it

/bytes/about