visualforce + jquery

Question

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.

Any help appreciated, Cheers

Answer 1

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:

Answer 2

<apex:includeScript value="{!URLFOR($Resource.jquery, '/jquery/external/jquery/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, '/jquery/jquery-ui.min.js')}"/>

<script>
    j$ = jQuery.noConflict();
    if(j$){
        alert('Success');
    }else{
        alert('Failure');
    }
</script>