Topic: jQuery Carousel not functioning with cfdiv

donboe    -- 06-09-2013 @ 3:18 AM
  I have a page that should display different categories of art. For this purpose I decided to use the cfdiv tag so that just the gallery is refreshed when another link is clicked, instead of the entire page. To display the images I would like to use jQuery Waterwheel carousel, but somehowthe cfdiv and the waterwheel carousel are not functioning together. When I have the jQuery plugins in the page that is holding the cfdiv The carousel is not working, it just show the photos in a big row. When on the other hand I have the plugins in the page that is loaded in the cfdiv I get an error. I have added cfdebug to the url parameters but it doesn't show me more details. This is what I have:

Page holding the cfdiv:

<cfajaximport tags="cfdiv">
<!doctype html>
<InvalidTag charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
  #carousel {
    height: 300px;
    display: relative;
  #carousel img {
    display: hidden; /* hide images until carousel prepares them */
    cursor: pointer; /* not needed if you wrap carousel items in links */


<cfdiv id="test" name="test" bind="url:gallery.cfm">
<a href="javascript:ColdFusion.navigate('gallery.cfm?artwork=porsche', 'test' )"> Porsche </a><br>
<a href="javascript:ColdFusion.navigate('gallery.cfm?artwork=hemingway', 'test' )"> Hemingway </a>
<InvalidTag type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<InvalidTag type="text/javascript" src="/jquery.waterwheelCarousel.min.js"></script>
<InvalidTag type="text/javascript">
  $(document).ready(function() {

Page loaded in the cfdiv:

<cfif structKeyExists( Url, 'artwork' )>
         <cfquery name="getGallery" datasource="DSN">
                 ,     M.museum_serie_dut
              ,     M.museum_serie_eng
              ,     M.museum_serie_name
                            museum  M
             JOIN  museum_photos MP
               ON  M.museum_id = MP.museum_id
                            museum_serie_name = <cfqueryparam cfsqltype="cf_sql_varchar" value="#Trim( Url.artwork )#" />      
    <div id="carousel">
    <cfoutput query="getGallery">
               <img src="museum_photos/carousel/">  

Like I said, this way the images are displayed but the carosel isn't working at all. When i have the plugins in the page that is loaded I get a javascript error.

Any advise would be highly appreciated.

“Good artists copy, great artists steal.” (Papblo Picasso)

Webmaster    -- 08-09-2013 @ 1:22 PM
  Did you get this to work? if not, is there a  URL where I
can troubleshoot it at?

Pablo Varando
Senior Application Architect

904.483.1457 \\ mobile \\email

\m/ (>.<) \m/
--- rock on ---

donboe    -- 11-02-2013 @ 7:41 AM
  Hi Pablo.

I haven't been on your site for a while so I didn't see your reply. No this isn't solved at all. I am using a php page now to have it displayed the right way but I am not happy about that at all.

I have recreated a test page which you can see here
I realy don't have an idea why the carousel is not functioning?

Any advise would be great!

“Good artists copy, great artists steal.” (Papblo Picasso)

EasyCFM.COM ColdFusion Forums :