EasyCFM.COM ColdFusion Forums / Coding Help! / jQuery Carousel not functioning with cfdiv

   Reply to Discussion | New Discussion << previous || next >> 
Posted By Discussion Topic: jQuery Carousel not functioning with cfdiv

remove book mark from this topic Printer-friendly Version  send this discussion to a friend  new posts last

donboe
06-09-2013 @ 3:18 AM
Reply
Edit
Profile
Send P.M.
My Gravatar!
Powered by Gravatar
Senior Member
Posts: 474
Joined: Nov 2004

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
Reply
Edit
Profile
Send P.M.
My Gravatar!
Powered by Gravatar
Administrator
Posts: 4542
Joined: Jan 2002

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
Reply
Edit
Profile
Send P.M.
My Gravatar!
Powered by Gravatar
Senior Member
Posts: 474
Joined: Nov 2004

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)


Website Designed and Developed by Pablo Varando.