function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
desh09desh09 

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?

 

Best Answer chosen by desh09
bob_buzzardbob_buzzard

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.

 

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" />
<apex:includeScript value="{!URLFOR($Resource.jquery_thumbnail_scroller, 'jquery-ui-1.8.13.custom.min.js')}"/>

 

 

 

 

 

All Answers

bob_buzzardbob_buzzard

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.

 

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" />
<apex:includeScript value="{!URLFOR($Resource.jquery_thumbnail_scroller, 'jquery-ui-1.8.13.custom.min.js')}"/>

 

 

 

 

 

This was selected as the best answer
desh09desh09
Thanks bob_buzzard!!

Looks like the problem was both the include script and http.
Rohan SureshkumarRohan Sureshkumar
Thank you!! @bob_buzzard