Creating a Dynamic Slide Show Using P7 & Coldfusion
Ever like the Project Seven Slide Show magic but want to use the functionality of Coldfusion to fill in the thumbnails and images? Well, ok... lets do it.
Open your page to place slide show in and create the basic slide show, filling in a default directory and selecting an image. This creates directories and code populates the default SSM code on your page.
Once this is created, you can go back in and edit it to fill images in from a query. Interestingly, you only need to update the
With respect to P7's code, I won't be cutting/pasting the entire SMM code here, but will only show snippets of strategic locations for place your outputed query.
Once the SMM code is built, find the p7ssm_thumb_section div. Looping through your query/array/list with
<div class="p7ssm_thumb_section">
<ul>
<cfoutput query='foo'>
<li><a href="#foophoto#"><img src="#foophoto#" alt='#fooname#'/></a></li>
</cfoutput>
</ul>
<br class="p7ssm_clearThumbs" />
</div>
To update the starting image from the 'default' one you used when you set up SMM, go down a tad further in the code, and edit the p7ssm_fsimg div.
<cfoutput>
<div id="p7ssm_fsimg">
<a id="p7ssm_fslink"><img id="p7ssm_im" name="p7ssm_im" src="#foo.foophoto#" /></a>
</div>
</cfoutput>
See an example of this here: Click on a Dog to see SMM
This is a site in development due to be rolled out to production soon. As such, the FireFox formatting is still wonky as the client site is validated against IE6 first, and is still being adjusted for more modern browsers.
There are no comments for this entry.
[Add Comment]