Search code examples
jquerysalesforcevisualforce

visualforce + jquery

I am trying to implement a jquery gallery plugin in a force.com site. I have uploaded a zip file containing all the required files as a static resource.

I am referencing the style sheets and javascript as below:

<apex:includeScript value="{!URLFOR($Resource.jqueryadgallery, 'jquerygallery/jquery.ad-gallery.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jqueryadgallery, 'jquerygallery/jquery.ad-gallery.css')}"/>

This works and I am getting the associated CSS for the plugin(check it out here - http://coffeescripter.com/code/ad-gallery/). But the only part that's working is the image thumbnails are being displayed with the image border defined in the CSS file. You can see what I have done here - http://fusedev-developer-edition.ap1.force.com/ImageDemo. I have followed the documentation but it seems to me the JavaScript isn't working.

Solution

  • Here are a few things to check:

    • Salesforce uses prototype.js, which like jQuery, uses the global variable $. It's always best to do something like $j = jQuery.noConflict(); at the top of your script in order to prevent jQuery from clobbering prototype. You'll also need to change all your javascript to use $j instead of $ for jQuery stuff.

    • It looks like your jquery plugin script is getting loaded before jQuery itself. Make sure your first apex:includeScript loads jQuery.

    • My browser is reporting a syntax error in your VF page: enter image description here