You need to sign in to do that
Don't have an account?
jQuery issue in Visual Force page
Hi,
I am new to creating visual force pages and I am having an issue getting a jQuery thumbnail scroller working. It works perfectly in plain HTML pages.
The scroller can be found here - http://manos.malihu.gr/jquery-thumbnail-scroller
Below is the code from the page. There is no problems with referencing the Static resource as the CSS is coming through.
<apex:page >
<apex:stylesheet value="{!URLFOR($Resource.jquery_thumbnail_scroller, 'jquery.thumbnailScroller.css')}"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<apex:includeScript value="{!URLFOR($Resource.jquery_thumbnail_scroller, 'jquery-ui-1.8.13.custom.min.js')}"/>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img1.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img2.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img3.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img4.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img5.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img6.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img7.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img8.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img9.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img10.jpg')}"/></a>
<a href="#"><apex:image url="{!URLFOR($Resource.jquery_thumbnail_scroller,
'thumbs/img11.jpg')}"/></a>
</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>
<script>
$j = jQuery.noConflict();
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
<apex:includeScript value="{!URLFOR($Resource.jquery_thumbnail_scroller, 'jquery.thumbnailScroller.js')}"/>
</apex:page>
Could someone let me know what I am doing wrong?
Are you able to pull in the jquery from the CDN correctly - as that is http and Salesforce pages are usually served over https, the browser may be blocking the insecure content. Try changing the http to https and see if that helps.
If it doesn't, its probably that the <apex:includescript> tag places the jquery UI ahead of the jquery core include - you can view the source to check if that's the case. If it is, just change the jquery to an apex:include too, e.g.
All Answers
Are you able to pull in the jquery from the CDN correctly - as that is http and Salesforce pages are usually served over https, the browser may be blocking the insecure content. Try changing the http to https and see if that helps.
If it doesn't, its probably that the <apex:includescript> tag places the jquery UI ahead of the jquery core include - you can view the source to check if that's the case. If it is, just change the jquery to an apex:include too, e.g.
Looks like the problem was both the include script and http.