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>
<html>
<head>
<InvalidTag charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
  #carousel {
    width:800px;
    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 */
  }
</style>
</head>

<body>

<cfdiv id="test" name="test" bind="url:gallery.cfm">
<br><br>
<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() {
    $("#carousel").waterwheelCarousel();
  });
</script>
</body>
</html>


Page loaded in the cfdiv:

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


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
EasyCFM.COM, LLC.

904.483.1457 \\ mobile
webmaster@easycfm.com \\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 : http://archive.easycfm.com/forums
Topic: http://archive.easycfm.com/forums/viewmessages.cfm?Forum=12&Topic=15324