• Home
• About
• Contact
  • Contact Info
  • Contact Form
• Rates
• Tutorials
  • DW-MX ASP
  • ColdFusion Form
  • Le Gallerie Petit
  • MM II in Table
  • Dynamic ShowPic
  • CDOSYS 64-bit Windows
• Links
• Search

fordwebs.com dynamic ShowPic tutorial

Add Scroller To Page

This tutorial will show you how to make a dynamic image scroller and ShowPic gallery using ColdFusion along with Project Seven's Horizontal Scroller and ShowPic behaviors. When you see how fast your image load times are, and how user-friendly the configuration is for users, you'll be glad you spent a few minutes on this tutorial.

Click here to see the finished page.

Click here to download the files used in this tutorial. This tutorial uses a Microsoft Access database, which is included in the download.

You will need to download and install Project Seven's Horizontal Scroller and ShowPic behaviors. Get them here.

Create a dynamic ColdFusion page by clicking File > New and the select Dynamic Page > ColdFusion.

Save the page as dynShowPic.cfm in your Dreamweaver defined dynamic site.

Now we will create the layer (absolutely positioned <div> element) that will hold the scrolling layer. Click Insert > Layout Objects > Layer and a layer will be placed on your page.

Open the Layers Panel by clicking F2 (if it is not already open) and then click on the layer you just inserted.

Open the Properties Panel by clicking CTRL + F3 (if it is not already open) and use the following settings for the layer you just inserted.

Next you will create a layer inside the containerDiv that will hold the images. On the page, click inside the containerDiv and then click Insert > Layout Objects > Layer and a layer will be nested inside the containerDiv. Click on the new layer in the Layers Panel.

Use the following settings in the Properties Panel.

Insert a table inside the contentDiv by clicking inside the layer on the page and then clicking Insert > Table and using the following settings.

Now you need to insert one of the images into the table to act as a place holder for the dynamic images. Click inside the table and then click Insert > Image and select one of the thumbnail images.

With the image still selected use the following settings in the Properties Panel.

Next you will insert a layer to hold the scroller controls. Click on a blank area of the page, outside of any content already on the page, and then click Insert > Layout Objects > Layer and a new layer will be placed on your page. Click on the new layer in the Layers Panel.

Use the following settings in the Properties Panel.

Insert a table inside the controlDiv by clicking inside the layer on the page and then clicking Insert > Table and using the following settings.

Click inside each table cell and in the Properties Panel select center from the drop down menu next to Horz to center the contents of the cells.

Click inside the first cell of the table and type LEFT. Highlight the text, and then type javascript:; inside the Link box of the Properties Panel to create a null link. Click inside the center cell of the table and type RESET. Highlight the text, and then type javascript:; inside the Link box of the Properties Panel to create a null link. Click inside the last cell of the table and type RIGHT. Highlight the text, and then type javascript:; inside the Link box of the Properties Panel to create a null link.

Your page should now look like this.

Applying Scroller Behaviors

Now we will apply the Horizontal Scroller behaviors to the null links that we created on the last page. Click anywhere inside the LEFT link and then click the <a> tag in the bottom of the Design View window. Open the Behaviors Panel by clicking SHIFT + F3 (if it is not already open) and then click on the (+) sign in the Behaviors Panel and select Studio VII > Horizontal Scroller by PVII and use the following settings in the Horizontal Scroller window.

The event for the behavior probably defaulted to onClick. We need to change this to onMouseOver. To do this, click on the onClick in the Behaviors Panel and a small down arrow will appear next to it. Click on the down arrow and then select onMouseOver from the list.

With the link still selected, click on the (+) sign in the Behaviors Panel and select Studio VII > Horizontal Scroller by PVII and use the following settings in the Horizontal Scroller window.

The event for the behavior probably defaulted to onClick. We need to change this to onMouseOut. To do this, click on the onClick in the Behaviors Panel and a small down arrow will appear next to it. Click on the down arrow and then select onMouseOut from the list.

Click anywhere inside the RIGHT link and then click the <a> tag in the bottom of the Design View window. Click on the (+) sign in the Behaviors Panel and select Studio VII > Horizontal Scroller by PVII and use the following settings in the Horizontal Scroller window.

The event for the behavior probably defaulted to onClick. We need to change this to onMouseOver. To do this, click on the onClick in the Behaviors Panel and a small down arrow will appear next to it. Click on the down arrow and then select onMouseOver from the list.

With the link still selected, click on the (+) sign in the Behaviors Panel and select Studio VII > Horizontal Scroller by PVII and use the following settings in the Horizontal Scroller window.

The event for the behavior probably defaulted to onClick. We need to change this to onMouseOut. To do this, click on the onClick in the Behaviors Panel and a small down arrow will appear next to it. Click on the down arrow and then select onMouseOut from the list.

Click anywhere inside the RESET link and then click the <a> tag in the bottom of the Design View window. Click on the (+) sign in the Behaviors Panel and select Studio VII > Horizontal Scroller by PVII and use the following settings in the Horizontal Scroller window.

The event for the behavior should have defaulted to onClick. If it did not default to onClick, click on the down arrow and then select onClick from the list.

Show Pic Layers & Behaviors

Now we will insert the ShowPic Layer and apply the ShowPic behaviors to the page.

Click on a blank area of the page and then click Insert > Studio VII > ShowPic Layer by PVII. Use the following settings in the Insert ShowPic Layer by PVII window.

Click on the <body> tag in the bottom of the Design View window and then click on the (+) sign in the Behaviors Panel and select Studio VII > ShowPic by PVII. Use the following settings.

The event for the behavior should default to onLoad. If it does not default to onLoad, click on the down arrow in the Behaviors Panel and select onLoad from the list.

Now click on the image inside the contentDiv and then click on the (+) sign in the Behaviors Panel and select Studio VII > ShowPic by PVII. Use the following settings.

The event for the behavior should default to <A> onClick. If it does not default to <A> onClick, click on the down arrow in the Behaviors Panel and select <A> onClick from the list.

Making It Dynamic

We will now get into the meat of this tutorial, making the images in the scroller, and the ShowPic layers dynamic. That is, we will get the information to populate these from the database that was supplied with the tutorial. If you have not downloaded the files used in the tutorial, get them by clicking here.

Hopefully you have created a datasource in the ColdFusion Administrator that points to the database. That is beyond the scope of this tutorial. We created one called showpic.

First we need to create a recordset to use on the page. Open the Bindings Panel by clicking CTRL + F10 (if it is not already open) and then click the (+) sign in the Bindings Panel and select Recordset(Query).

Use the following settings in the Recordset window.

Click on the Test button in the Recordset window to test your recordset. You should see something like the following.

Click OK in the Test SQL Statement window to close it and click OK in the Recordset window to add the recordset to the page.

Double-click the image in the contentDiv to open the Select Image Source window. Select the Data sources radio button. Highlight the URL up to and including the / before the image name and right-click on the highlighted text and select Copy (you will need to add this back in a second). Now click on the (+) sign next to Recordset(rsShowPic) to expand it. Click on the ThumbName field to select it. The following should appear in the URL box.

showpic/<cfoutput>#rsShowPic.ThumbName#</cfoutput>

Click in front of the <cfoutput> tag and then right-click and select Paste (we are pasting the path information we copied before). It should now look something like this:

showpic/<cfoutput>#rsShowPic.ThumbName#</cfoutput>

NOTE: The image shows the path on my computer.

With the image still selected, click on the ThumbWidth field in the recordset in the Bindings Panel. Now select img.width from the drop down list at the bottom of the Bindings Panel and then click the Bind button.

With the image still selected, click on the ThumbHeight field in the recordset in the Bindings Panel. Now select img.height from the drop down list at the bottom of the Bindings Panel and then click the Bind button.

With the image still selected, click on the CaptionName field in the recordset in the Bindings Panel. Now select img.alt from the drop down list at the bottom of the Bindings Panel and then click the Bind button.

Now we need to add a Repeat Region server behavior to the table cell holding the image so that all of the images will show up. Click on the image, and then click on the <td> in the bottom of the Design View window. Open the Server Behaviors Panel by clicking CTRL + F9 (if it is not already open) and then click on the (+) sign in the Server Behaviors Panel and select Repeat Region.

Use the following settings in the Repeat Region window.

Click OK.

Now we need to go into Code View and make some changes there. Click on the image place holder in the contentDiv and then click on the <a> tag to the left of the <img> tag in the bottom on the Design View window. Click View > Code.

You should see something like this:

We need to make the imgF_01.jpg and the P7ShowPL1 dynamic. We will do that by changing it to this:

Now you will delete the width settings that I mentioned earlier.

Click on the <table> tag in the bottom of the Design View window. Delete the table Width setting in the Properties Panel.

Click on the contentDiv in the Layers Panel. Delete the Width setting in the Properties Panel.

Next we need to make the ShowPic layers dynamic. We will need to do this all in Code View. First thing we will do is to wrap the entire ShowPic layer in a <cfoutput> </cfoutput> tag so that it will create another Repeat region on the page.

Click on the P7ShowPL1 in the Layers panel and then go in to Code View. The P7ShowPL1 layer should be highlighted. Add the <cfoutput> and </cfoutput> tags and make it look like this:

That created the repeat region, now we need to make the layers dynamic. So change this:

<div id="P7ShowPL1" style="position:absolute; left:25px; top:200px; width:320px; z-index:1; visibility:hidden">

To this:

To make the images dynamic, change this:

To this:

And finally, to change the image captions and the descriptions, change these:

To these:

NOTE: I changed the <p></p> to <h1></h1> for the image caption.

So now the whole ShowPic layer should look like this.

You should now run the Project Seven Return False Fix command on the page by clicking Commands > Studio VII > Apply Return False Fix by PVII and then clicking Apply. If you do not have that command installed, get it by clicking here.

Giving It Style

We will add some CSS styles to the page just to make it look a little better. You can use your own CSS and are not limited in using this CSS.

First we will give the page background a white color. Open the CSS Styles Panel by clicking SHIFT + F11 (if it is not already open) and then click on the New CSS Style icon in the lower right of the CSS Styles Panel.

Use the following settings in the New CSS Style window.

Click on Background in the CSS Style definition for body window and use the following setting.

To create the link color, we will define the <a> tag properties. Click on the New CSS Style icon in the lower right of the CSS Styles Panel.

Use the following settings in the New CSS Style window.

Click on Type in the CSS Style definition for a window and use the following setting.

We will now style the <h1> tag. Click on the New CSS Style icon in the lower right of the CSS Styles Panel.

Use the following settings in the New CSS Style window.

Click on Type in the CSS Style definition for h1 window and use the following setting.

We will now style the <p> tag. Click on the New CSS Style icon in the lower right of the CSS Styles Panel.

Use the following settings in the New CSS Style window.

Click on Type in the CSS Style definition for p window and use the following setting.

As a final note, and to keep Netscape version 4 browsers happy, we will move the contentDiv inline CSS to the style sheet that is now in the head of the page.

Go into Code View on the page and change this:

To this:

And add the following to the <style></style> block:

Your styles should look something like this:

You have now created and styled a dynamic Horizontal Scroller and ShowPic Image Gallery using ColdFusion.

Click here to see the example.

Click here to download the files used in the tutorial.

© Copyright 2008 Fordwebs, LLC All Rights Reserved.