Use Jquery SlideShow plugin to create form in cold fusion for slide show creation

Posted on 2010-09-14
Last Modified: 2012-05-10

We need to have slide shows created for all our camps.  Users will ftp a folder with the images and somehow I need to have way for those folder images to become a slide show.  I have heard about using a jquery plugin, but how do I read the folder content and loop through it to create a slide show?

Here is the plug in link, the page will be coded in cold fusion

I just need someone to give the dog a bone... point me in the right direction..
Question by:Albee_J
  • 6
  • 4

Assisted Solution

TonyReba earned 100 total points
ID: 33678815

this will help you doing what you need in a very easy way
LVL 52

Accepted Solution

_agx_ earned 400 total points
ID: 33679042
Use cfdirectory (or cfftp) to get a listing of images in that directory. Then output the query results to generate the slides.  This sample was tested. But you'll obviously need to fix all of the paths to match your local environment.

<!--- find all GIF, JPG and PNG images --->
<cfdirectory action="list" directory="c:\someDirectory" filter="*.gif|*.png|*.jpg" name="getImages">

<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--- update the js / css file paths --->
<link rel="stylesheet" type="text/css" media="screen, projection" href="slideview.css" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="slideView.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
            loop: true
<div id="slideshow">
      <ul class="slideView">
              I don't know the max num. of images allowed. So you may want to set
             a limit via maxRows
      <cfoutput query="getImages">
                <!--- update <img src=".."> as needed --->
            <li><a href="##"><img src="/path/to/#name#" /></a></li>

Author Comment

ID: 33683405
I will test both and advise, YOU GUYS ROCK!

Author Comment

ID: 33685194

I am having a hard time finding these files:

slideview.css  & slideView.1.2.js

Author Comment

ID: 33685320
When I go here to download the files  it takes me to a long list of plugins, I tried to do a search and nothing
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline


Author Comment

ID: 33685745
I got a test working, but the styling is all over the place :/

Author Comment

ID: 33685938
Kk just need to get the thumbnails working
LVL 52

Expert Comment

ID: 33689711
Sorry for the delay.  

For my example, I used one of the downloads from the 1st link you gave us.  Look towards the bottom of the page
Recommended releases
Version       Downloads       Date       Links
LVL 52

Expert Comment

ID: 33689748
It's also available on the "Home Page" listed under that plugin

Author Comment

ID: 33691631
Thanks agx!

I ended up using solutions from both agx and TonyReba's suggestion to use pikachoose so I will split the points.

Thank you both!
LVL 52

Expert Comment

ID: 33692083
That looks awesome! (Almost makes me want to sign up.. but I'm too old ;-) Thanks for sharing the finished product with us.

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 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

11 Experts available now in Live!

Get 1:1 Help Now