Words about stuff, and things related to stuff

jQuery Cycle slideshow demo with next/back/paging links

This demo uses some of the advanced features of the jQuery Cycle plugin to create a mixed content slideshow (html/text/images) with a visual navigation bar, and next/back arrows

In this setup, the slideshow advances automatically, until somebody clicks one of the links, which stops the automatic action and allows the user to control the advancement of the slides. The Cycle plugin allows for pausing, resuming or stopping the slideshow with a simple click action.

See the demo (includes css/jquery code for easy reuse) http://www.gowestwebdesign.com/demos/jquery-cycle-gallery-next-back-paging/

Thanks to Mike Alsup for the versatile Cycle plugin: http://www.malsup.com/jquery/cycle/

Feel free to use the code for any purpose, and please drop me a comment or link to check out your work. As always, comments/suggestions/fixes are welcome.

Show any Twitter Feed on your site with ColdFusion and CFFEED

This is so simple, I'll let the comments do the 'splainin:

view plain print about
2start CF Twitter Feed

5<!--- SET THE URL: add your username instead of mine --->
7<cfset feedurl="http://search.twitter.com/search.atom?q=from%3Agowestweb" />
9<!--- CFFEED does all the work --->
12 source="#feedurl#"
13 properties="feedmeta"
14 query="feeditems"
15 overwrite="true" />

17<!--- CFOUTPUT shows the feed like a query --->
19<ul class="tweet">
20<!--- change maxrows to suit your layout --->
21<cfoutput query="feeditems" maxrows="3">
27end CF Twitter Feed

31NOTE: in addition to #content#, you can show date and other columns related to each feed item.
32Use <cfdump var="#feeditems#"> to see all the available columns in the query

ColdFusion Form Spam Prevention: CF Meetup Notes and Follow-Up

Thanks to all who attended my first CF Meetup presentation.

Info: http://www.meetup.com/coldfusionmeetup/calendar/11596049/?a=nr1p_grp&rv=nr1p

Recording: http://www.meetup.com/coldfusionmeetup/pages/Recordings_of_the_ColdFusion_Meetup-2009/

Demo Page (as seen in the presentation): http://www.gowestwebdesign.com/demos/contact-form/index.cfm

As far as I can tell we had a good turnout, and though talking to a silent connection takes some getting used to, the live-chat comments and interaction during the talk really made it fun (and helped me fill the full time slot with this simple subject!).

I really enjoy meeting other developers and designers, and I hope anybody who attended, had questions or just wants to get more involved in the community will drop me an email, check out our web developer newsgroups (see the link top right of this blog), and of course... be my Facebook and/or Twitter friend.

Thanks also to Charlie Arehart for all of his efforts keeping the CF Meetups going, and growing strong. He was the perfect balance of aggressive and encouraging in getting me to present this topic, and I am very glad he persisted. He's definitely the right guy for the positing of CF Host and quickly removed any concerns or worries I might have had just before we went live.

Now that it is done, I would like to do another! On that note, if there is anything you think I know about, that you'd like to see me share, please do drop me a line.

Several people asked to have a copy of the code used in the presentation. The sample below is directly from the file shown in the demo.

view plain print about
2<cfif isDefined('form.senderFrom')>
6<!--- check email --->
7<cfif NOT len(trim(form.senderFrom)) gt 6 or NOT isValid('email',form.senderFrom)>
8<cfset request.formError = 'A valid email address must be provided'>
10<!--- message --->
11<cfelseif NOT len(trim(form.senderMessage))>
12<cfset request.formError = 'Be sure to include a message'>
14<!--- honeypot --->
15<cfelseif len(trim(form.email_address))>
16<cfset request.formError = 'Spam!! <br />(Run away! Run away!)'>

19<!--- /end VALIDATE FIELDS --->
22<!--- loop all form variables --->
23<cfloop index="f" list="#form.fieldnames#">
24<!--- set variable for field value --->
25<cfset value="#evaluate('form.#f#')#">
27<!--- BANNED WORDS --->
28<cfset bannedWordsList = "herring,albatross,dragon,grail,lumberjack">
30<!--- loop the banned words list and see if we have a match --->
31<!--- Check for banned words --->
32<cfloop list="#bannedWordsList#" delimiters="," index="w">
33<cfif FindNoCase(w,value)>
35<cfset request.formerror="<br />Beg your pardon? <br />Your WHAT hurts?">
39<!--- / end BANNED WORDS --->
41<!--- HTML BLOCK --->
42<cfset leftChar = '<' >
43<cfset rightChar = '>' >
44<!--- look for both characters contained in our content --->
45<cfif findNoCase(leftChar, value) AND findNoCase(rightChar, value)>
46<cfset request.formerror = "Text only please - no HTML">
49<!--- / end HTML BLOCK --->
55    <legend>
56        <cfif isDefined('request.formerror') and len(trim(request.formerror))>
57        Error!
58            <cfelse>
59        Thank You
60        </cfif>
61    </legend>
63<!--- SHOW RESPONSE --->
64<cfif isDefined('request.formerror') and len(trim(request.formerror))>
65<p><strong>ERROR: <cfoutput>#request.formerror#</cfoutput></strong></p>
66<p>Go <a href="javascript:history.back()">back</a> and try again</p>
69<p>Thank you. <br /><br />Your message has been sent and we will reply soon!</p>
78<!--- IF FORM NOT SUBMITTED (show the form) --->
81<fieldset><legend>Sample Contact Form</legend>
83<cfform name="contactForm" action="#cgi.SCRIPT_NAME#" method="post">
85<label for="senderName">Name:&nbsp;&nbsp;</label><cfinput type="text" name="senderName" size="48" value="" required="true" message="Your Name is required">
88<label for="senderFrom">Email:&nbsp;&nbsp;</label><cfinput type="text" name="senderFrom" size="48" value="" required="true" validate="email" message="Email Address is required">
91<label for="senderPhone">Phone:&nbsp;&nbsp;</label><input type="text" name="senderPhone" size="20" value="">
94<label for="senderPhone">Your Message:</label><textarea name="senderMessage" cols="30" rows="12" style="width:310px;"></textarea>
96<div style="text-align:center">
97<input type="submit" value="Submit">
100<div id="email_wrapper">
101<input type="text" name="email_address" value="" size="20">
109<!--- / end IF FORM SUBMITTED --->

Thanks again to Charlie and everyone else - this has been a very positive and rewarding experience, and I hope to return with more good CF-Stuff to share.

Come to my (first) CF Meetup: Captcha-Free Spam Prevention for ColdFusion Forms

Tired of Spam? (Who isn't?)

No matter how good our filters are, or how careful we may be about making our email addresses publicly accessible, some of the nasty stuff still gets through.

But there is a way to fight back, defending your websites' contact forms and other form-to-email inputs, without making your website visitors jump through extra hoops, solve puzzles or read fuzzy scrambled letters (captcha) just to drop you a note.

To learn more, tune into my ColdFusion Meetup presentation this Thursday, October 15, 2009. (If you haven't yet attended the CF Meetup, this is a good time to start!)

Details here: http://www.meetup.com/coldfusionmeetup/boards/view/viewthread?thread=7841126

The live meetup will be here: http://experts.acrobat.com/cfmeetup/

Recording will be posted here: http://recordings.coldfusionmeetup.com/

See you at Noon Eastern (10am here in Utah) on Thursday, October 15 !

CF Gallery Creator & jQuery Slider Gallery !New and Improved!

Still a work in progress, I have fixed a few small things and added better setup notes for the CF Gallery Creator and jQuery Slider Gallery (click for explanation in previous post)

The new code is available as a zip file, attached ** see below **

This package contains

1) a custom ColdFusion image gallery generator, which will create thumbnails and large images of any size you specify from a folder containing your original images, and outputs them to the page in a nice unordered list html markup.

Includes options for multiple subfolders, each one a separate 'gallery' with thumbnail or dropdown navigation.


2) a simply but effective 'slider gallery' built on css and jQuery. Example here:


( Without the jQuery and css, the raw markup from the CF tag alone looks like this


As usual this was built to meet a specific need for a client project and has been tweaked and adjusted along the way.

Please DO try it out, and let me know if/when you use it.
Comments, enhancements and suggestions welcome!

Cartweaver Option Selection Fix ( select list javascript )

A small but persistent issue with the default Cartweaver product selection script shows up when a product has more than one set of options. For example, you have skus with a range of colors and a range of sizes.

I finally took a few minutes to create a fix, which was actually quite simple to implement. And in the interest of keeping it non-denominational, I didn't even use jQuery... just plain 'ol javascript that can easily be added to any existing CW site.


Show/Hide the Cartweaver "forgot password" form with jQuery

Here's a perfect example of the way jQuery makes things so easy, even a caveman programmer can do it.

In Cartweaver, the default Customer Login form is actually two separate forms - one to log in, and one to recall a forgotten password by entering an email address.

I have tried various rearrangements of the default markup on this page for each site I've done, always trying to give the more important 'log in' form a more visible presence than the 'forgot pw' form, without cluttering up the page.

Tonight, i found a solution i like best of all ... hide the forgot pw form altogether, using a simple link to show it if needed.


jQuery automatic anchor links with 'each()'

A client gave me a long page of addresses and links, a directory of manufacturers for his industrial-based site.

Converting it to html, my markup ended up something like this:

view plain print about
1<h1>Links Directory</h1>
3<p><strong>Company Name</strong><br />
4Address<br />
5Phone... etc
7<p><strong>Company Name</strong><br />
8Address<br />
9Phone... etc
12<p><strong>Company Name</strong><br />
13Address<br />
14Phone... etc
16<p><strong>Company Name</strong><br />
17Address<br />
18Phone... etc

and so on for the various states, about 35 of 'em.

Now, I needed a list of links at the top of the page, one for each state, that would allow the user to click a state name at the top, and get scrolled down to the relevant section below.

I had two choices.. go through the code and manually make an anchor link, or come up with a dynamic solution (not a hard decision).


BlogCFC Auto Login

In the effort to make posting to this blog as quick and easy as possible, I decided to take a shot at a jQuery/CF automatic login routine...

Not wanting to mess with the built-in authentication (and looking for a quick easy fix), I took the most simple approach I could think of - put the user name and password in the url as variables, put those values in the form fields with ColdFusion, and then submit the form with jQuery.


ColdFusion Contact Form in One Easy File - Part 2 at CMX


Just online...
This portion outlines all of my spam-blocking techniques rolled into one powerful script.

The attachment samples give you everything you need to drop a working CF contact form into ANY page of your site, and start collecting spam-proof website submissions right away. (Please DO download and test the samples, and my instructions, and let me know what you find!)

Features include:

    * Trapping automatic form submission (junk mail bots) with a "Honeypot" field
    * Preventing html characters '<' & '>'
    * Blocking a defined list of words and phrases, including common spam terminology and nasty words we don't want in our email

...all in one simple file that you can insert into any page!

Part 3 will put some finishing touches on things, with jQuery inline validation, and a cleaner approach to the code and all the variable parts of the form.... coming soon...

p.s. - CMX has put up part 2 as a paid article (part 1 is free), but you can get a free trial and grab a few key articles, there is a lot in there to peruse.

Note: CommunityMX just posted a help wanted notice.
If you have CF / PHP / DreamWeaver / Photoshop / other knowledge above the average tutorial-reading beginner-or-higher-level CMX member, this is a great chance to earn a few bucks, share what you know, and get some nice credits.

CF Gallery Creator / jQuery Slider Gallery

NOTE: This project has been updated.
Read explanation below and then see: http://www.miuaiga.com/index.cfm/2009/4/11/CF-Gallery-Creator--jQuery-Slider-Gallery-New-and-Improved

This little project is two things in one...  a thumbnail gallery creator and a neat jquery gallery display
...both of which I am proud to show off and share after a long day of tinkering

I have a client who wants 'a bunch of photo galleries' on her site.... and she likes a flash gallery with a sliding row of thumbs at the top, large image below.
So - I built a CF tag to make galleries on the fly (in several ways.. .keep reading... ) AND a jQuery gallery that behaves just almost exactly like her flash example.

1)  // instant coldfusion photo gallery creator! //
First, I have created (and today, cleaned up and bundled) a coldfusion custom tag that automatically generates entire galleries of resized photos with thumbnails, and several options.

The same tag also displays the galleries for every folder inside a given location, creating thumbs on the fly.

By itself, it looks like this

A very naked gallery skeleton, ready to be turned into any kind of gallery you like.

Options include
 - show links or select dropdown for choosing gallery
 - show thumbnails with gallery chooser links
 - crop thumbs to centered square tile (like my examples) or use w/h resizing

There is a LOT of potential in this little script, including instant thumbnails, easy to update galleries, and a bunch of built-in options.

See my dev notes at the end of this post.

2)  // jquery slider gallery ! //

An updated version of my homegrown jQuery 'slider' gallery.
This page is using the exact same cf tag with the same exact base content.


jQuery and CSS turn the first page, above, into this.

NEW in this version - friendly 'no js' degredation. (disable js to see a styled gallery of thumbs, linked to their large images)

Also added
 - title / alt tags on thumbnails
 - captions! (currently title name with image file name)
 - next/back links
 - click large image to advance through
 - looping next/back function (goes back to start after last image)

Here is a version with dropdown instead of links, and the filename removed from the captions

and another version with no captions

These options can all be set when calling the tag from your main page, i.e.

<cfimport prefix="sitetags" taglib="tags" />
    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"

To Do:
- Advance the slider when clicking the next/back links or large image
( best approach - auto scroll current thumbnail to center as part of the 'current image highlighting' function)
- Preload the large images
- Show a transition effect (might require multiple large images and a swap behavior)
- Show a 'loading' graphic while waiting for large image to load

jQuery code is a bit messy, this is all very fresh, but I would love to have some input for ways to speed it up or add the auto-advancing function.


I'd like to post this on riaforge and maybe other places too, in a nice 'demo' wrapper, as a freebie for the CF / jQuery world.
First, I'd like some feedback from people actually trying to use it.

The important concept here - this is two things - the cftag that makes all the thumbnails,
and the jquery / css that turns that raw markup into a gallery. They can be used together or totally independently.

Please contact me directly - I can easily bundle this up and send it to you for testing, let me know.


For those who might be interested, I put heavy instructions / notes into the head of the tag file.
Here is what it says currently...

Photo Gallery Custom Tag
Michael Evangelista : Evangelista Design : www.mredesign.com
Creates thumbnails and full size images on the fly, creating a thumbnail gallery
Created 20081011

1)Set up your images in directories, grouped by gallery
   The name of your folder will be the name of the gallery
   Put all of these named folders of raw images into any other folder (this is your 'parent' folder)

    note: The size of the original images will have a big effect on performance.
    Ideally your images should not be huge to begin with, but can be larger than your large gallery size.
2) Put this file in a folder called 'tags'
3) Put this code at the beginning of any cfm page
   (adjust the path so it points from your cfm page to the 'tags' folder)

    <cfimport prefix="sitetags" taglib="tags">

4) Put this code below that
    (origfolder is the path from your cfm page to the parent folder for your original , unsized images)
    (newfolder is the path from your cfm page to the new parent folder for your gallery images
     **this will be created for you if it does not exist!)
    (gallery url is the url version of the path above)

    ** Be sure your paths and url end with the trailing slash 

    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"
5) Browse to your page. You won't see anything but a dropdown list with no options.
    Put "?init=run" after your page url (i.e. gallerypage.cfm?init=run) and the page will make your gallery folders for you (be patient).
    You should then see an option in the dropdown for each folder, and a set of thumbnails showing each gallery.
    Change the selection, see the thumbnails.
    ** Note: you can - and should - change the cfparam for "attributes.initpw" to anything you like, instead of 'run'.
        Make it hard to guess so nobody can trigger your gallery creator without permission. Then just use "gallerypage.cfm?init=mynewpassword".
    ** If the page times out or takes too long, try it with less images per folder, or just put a few folders at a time in your parent directory.
    ( see 'adding images' below)
6) When the gallery creator is done, you will see the page refresh, with links or dropdown options now in place for each gallery.
   Select one... there it is!
Now you have the basic skeleton of any dynamic gallery display - thumbnails in ul/li html markup, each linked to their larger versions,
with a title created from the folder name, and a set of links to manage the different galleries. Depending on your settings ( see below ),
you also have captions and thumbnails in the selection menu (if using selecttype = 'ul' and showthumbs = 1)

You can link to any gallery by simply putting the name in the url like this
gallerypage.cfm?gallery=some-gallery-name  (note the url-friendly hyphenation)


You can set the max width or height of thumbs and full size images in the params below, or by adding the attributes to your tag call.
( note: the sizes will not apply to images that have already been generated)

    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"

You can also use the 'cropthumbs' and 'thumbcropsize' options to set up a square cropped thumbnail using the 'thumbcropsize' for both width and height.
( note: cropthumbs=1 overrides all thumbnail width and height settings)
You can control some of the output markup with these options errorFiles
(note: showthumbs only applies if selecttype is 'ul', no thumbs shown with dropdown)

You can also set the name of the thumb and full folders


And the type of selection list  - choose from links or select box ( "ul" or "select" ) or code in your own
You can also turn off the thumbnails on the gallery list page


This tag does two distinct things

1) in INIT mode (with ?init=run in the url OR by putting initmode='1" in the tag call)
     What it does: Get directory listing, create folders, resize photos

The tag looks at the origination folder, and checks for folders inside of that.
It loops through each of the image files in the those folders, and makes a new folder
in the destination with resized images,one for each original subfolder.

If the destination parent folder does not exist, it will be created for you.
Your folder names will be made web-friendly, replacing special chars and spaces with "-"       

Inside of each folder will be two more folders, "thumb" and "full" (or whatever you assign in the attributes).
The generated images will have the exact same filename, they are just in different folders
(this makes javascript / css gallery coding really simple!)

The resizing will use the larger side of your image and compare to the max set for that dimension.
(i.e. wide images get resized by width, scaling the height; tall images are resized by height, scaling the width.)
Images will not be made larger than the original.

2) In 'standard' mode (default use)
      Get new directory listing, create thumbnails from large images, show html with linked thumbnails

The tag looks at the gallery parent folder ( in your "newfolder" attribute)
A list is created of all the folders inside the parent, with filenames made 'reader friendly' (hyphens replaced with spaces)

If you have a folder matching the 'fullfolder' attribute (i.e. "full"), you have a gallery.
The code loops through the fullfolder, and checks for a thumbnail for every full size image.
If there is not a thumbnail, one will be created for you.

A list of all the gallery folders is created, either as a ul/li list of links,
or a select box dropdown that changes the page automatically on selecting a gallery.

The output from this code is very basic html markup.
The images are in a ul/li list, with thumbs linked to their larger counterparts - very easy to target with css and/or javascript.
The gallery name (and filename if showfilenames = 1) is assigned as the 'title attribute on the thumbnail's link element,
and as an 'alt' attribute on the thumbnail image itself, and used as a caption (if showcaptions = 1).


Here is where it gets really cool - you have several options for updating your existing photo collection.

You can slide a new 'full' image into an existing gallery's 'full' folder, and the thumbnail will be created instantly
(when you view the page for the first time).

You can create a whole new gallery in standard mode by adding a folder to your parent directory,
containing another folder called 'full' with your presized larger-size images. On first view, the thumbs will be created for you.

You can resize all your thumbs by deleting the all the thumbnails from the small size folder,
and setting a new thumbw and thumbh in the tag attributes. Just browse to your gallery to get all new thumbs.

You can add and auto-resize a new gallery any time by adding a new folder to your original location and running in 'init' mode again
(any folders that already have a matching gallery folder in the destination will be ignored)

So, you have several options for adding more photos.

To remove images from the gallery - just delete the large one, the thumbnail will be ignored.

// THAT's IT!

// Please send comments or additions to Michael Evangelista, evangelistadesign at gmail dot com or www.mredesign.com
  Thanks and have fun


Recent Comments

Importing Events Calendar Data into Mura CMS
Jon said: Hi Michael, Thanks for this post - similarly looking to import data from excel spreadsheet into mur... [More]

New TinyMCE lets you paste as plain text automatically
PRR said: I am using tinyMCE 4.2.3 and configured as suggested in this post but when i try pasting in editor i... [More]

Searching and collecting Mura CMS content by Extended Attribute Value with feed.addParam()
Armando Faes said: After a few hours of head banging - finally thanks to this - Once more THANK YOU! [More]

CF Gallery Creator & jQuery Slider Gallery !New and Improved!
Jan Willis said: Okay, I realized that you are calling my root as the Site - not the wwwroot. So, I moved the JS, CS... [More]

CF Gallery Creator & jQuery Slider Gallery !New and Improved!
Michael Evangelista said: @Jan, it has been a long time (6+ years) so my memory of the details is vague, but I think the image... [More]