Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts

    Problem with Jquery thumbnail plugin

    Hi Guys,

    I'm trying to get this little thumbnail scroller plugin working on my wordpress site but I can't seem to get it working. I'm not very good with jquery. Before you look at the code, I'm not sure what this is called but wordpress has a problem with code like this $("#tS2").thumbnailScroller. Wordpress wants you to replace those little dollar signs with jQuery("#tS2").thumbnailScroller. I tried replacing them where I thought it should be. This same code runs perfectly when you can use the $ outside of wordpress. Once you put it inside wordpress it stops working. I've been trying to troubleshoot it by putting alert boxes everywhere but I'm not having any luck. I would appreciate any help on this. Thanks in advance.

    PS - it just seems to die somewhere inside the function. Perhaps its not even being run I'm not sure at this point.

    Below is the script that resides inside my page.
    Code:
    <script>
    jQuery.noConflict(); 
    /* calling thumbnailScroller function with options as parameters */
    (function(jQuery){
    window.onload=function(){ 
    alert("Im here");
    	jQuery("#tS2").thumbnailScroller({ 
    		scrollerType:"hoverAccelerate", 
    		scrollerOrientation:"horizontal", 
    		scrollSpeed:20000, 
    		scrollEasing:"easeInOutQuad", 
    		scrollEasingAmount:0, 
    		acceleration:.25,  
    		noScrollCenterSpace:100, 
    		autoScrolling:0, 
    		autoScrollingSpeed:10, 
    		autoScrollingEasing:"easeInOutQuad", 
    		autoScrollingDelay:10 
    	});
    	alert("Im here2");
    }
    })(jQuery);
    </script>
    And this is the jquery file that contains the function

    Code:
    /*
    Thumbnail scroller jQuery plugin
    Author: malihu [http://manos.malihu.gr]
    Homepage: manos.malihu.gr/jquery-thumbnail-scroller
    */
    (function(jQuery){  
    
     jQuery.fn.thumbnailScroller=function(options){  
     alert("Im here3");
    	var defaults={ //default options
    		scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons"
    		scrollerOrientation:"horizontal", //values: "horizontal", "vertical"
    		scrollEasing:"easeOutCirc", //easing type
    		scrollEasingAmount:1200, //value: milliseconds
    		acceleration:10, //value: integer
    		scrollSpeed:100, //value: milliseconds
    		noScrollCenterSpace:0, //value: pixels
    		autoScrolling:0, //value: integer
    		autoScrollingSpeed:8000, //value: milliseconds
    		autoScrollingEasing:"easeInOutQuad", //easing type
    		autoScrollingDelay:2500 //value: milliseconds
    	};
    	alert("Im here4");
    	var options=jQuery.extend(defaults,options);
        return this.each(function(){ 
    	alert("Im here5");
    		//cache vars
    		var $this=jQuery(this);
    		
    		var $scrollerContainer=$this.children(".jTscrollerContainer");
    		var $scroller=$this.children(".jTscrollerContainer").children(".jTscroller");
    		var $scrollerNextButton=$this.children(".jTscrollerNextButton");
    		var $scrollerPrevButton=$this.children(".jTscrollerPrevButton");
    		//set scroller width
    		if(options.scrollerOrientation=="horizontal"){
    			$scrollerContainer.css("width",999999); 
    			var totalWidth=$scroller.outerWidth(true);
    			$scrollerContainer.css("width",totalWidth);
    		}else{
    			var totalWidth=$scroller.outerWidth(true);
    		}
    		var totalHeight=$scroller.outerHeight(true); //scroller height
    		//do the scrolling
    		if(totalWidth>$this.width() || totalHeight>$this.height()){ //needs scrolling		
    			var pos;
    			var mouseCoords;
    			var mouseCoordsY;
    			if(options.scrollerType=="hoverAccelerate"){ //type hoverAccelerate
    				var animTimer;
    				var interval=8;
    				$this.hover(function(){ //mouse over
    					$this.mousemove(function(e){
    						pos=findPos(this);
    						mouseCoords=(e.pageX-pos[1]);
    						mouseCoordsY=(e.pageY-pos[0]);
    					});
    					clearInterval(animTimer);
    					animTimer = setInterval(Scrolling,interval);
    				},function(){  //mouse out
    					clearInterval(animTimer);
    					$scroller.stop();
    				});
    				$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
    			}else if(options.scrollerType=="clickButtons"){
    				ClickScrolling();
    			}else{ //type hoverPrecise
    				pos=findPos(this);
    				$this.mousemove(function(e){
    					mouseCoords=(e.pageX-pos[1]);
    					mouseCoordsY=(e.pageY-pos[0]);
    					var mousePercentX=mouseCoords/$this.width(); if(mousePercentX>1){mousePercentX=1;}
    					var mousePercentY=mouseCoordsY/$this.height(); if(mousePercentY>1){mousePercentY=1;}
    					var destX=Math.round(-((totalWidth-$this.width())*(mousePercentX)));
    					var destY=Math.round(-((totalHeight-$this.height())*(mousePercentY)));
    					$scroller.stop(true,false).animate({left:destX,top:destY},options.scrollEasingAmount,options.scrollEasing); 
    				});
    				$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
    			}
    			//auto scrolling
    			if(options.autoScrolling>0){
    				AutoScrolling();
    			}
    		} else {
    			//no scrolling needed
    			$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
    		}
    		//"hoverAccelerate" scrolling fn
    		var scrollerPos;
    		var scrollerPosY;
    		function Scrolling(){
    			if((mouseCoords<$this.width()/2) && ($scroller.position().left>=0)){
    				$scroller.stop(true,true).css("left",0); 
    			}else if((mouseCoords>$this.width()/2) && ($scroller.position().left<=-(totalWidth-$this.width()))){
    				$scroller.stop(true,true).css("left",-(totalWidth-$this.width())); 
    			}else{
    				if((mouseCoords<=($this.width()/2)-options.noScrollCenterSpace) || (mouseCoords>=($this.width()/2)+options.noScrollCenterSpace)){
    					scrollerPos=Math.round(Math.cos((mouseCoords/$this.width())*Math.PI)*(interval+options.acceleration));
    					$scroller.stop(true,true).animate({left:"+="+scrollerPos},interval,"linear"); 
    				}else{
    					$scroller.stop(true,true);
    				}
    			}
    			if((mouseCoordsY<$this.height()/2) && ($scroller.position().top>=0)){
    				$scroller.stop(true,true).css("top",0); 
    			}else if((mouseCoordsY>$this.height()/2) && ($scroller.position().top<=-(totalHeight-$this.height()))){
    				$scroller.stop(true,true).css("top",-(totalHeight-$this.height())); 
    			}else{
    				if((mouseCoordsY<=($this.height()/2)-options.noScrollCenterSpace) || (mouseCoordsY>=($this.height()/2)+options.noScrollCenterSpace)){
    					scrollerPosY=Math.cos((mouseCoordsY/$this.height())*Math.PI)*(interval+options.acceleration);
    					$scroller.stop(true,true).animate({top:"+="+scrollerPosY},interval,"linear"); 
    				}else{
    					$scroller.stop(true,true);
    				}
    			}
    		}
    		//auto scrolling fn
    		var autoScrollingCount=0;
    		function AutoScrolling(){
    			$scroller.delay(options.autoScrollingDelay).animate({left:-(totalWidth-$this.width()),top:-(totalHeight-$this.height())},options.autoScrollingSpeed,options.autoScrollingEasing,function(){
    				$scroller.animate({left:0,top:0},options.autoScrollingSpeed,options.autoScrollingEasing,function(){
    					autoScrollingCount++;
    					if(options.autoScrolling>1 && options.autoScrolling!=autoScrollingCount){
    						AutoScrolling();
    					}
    				});
    			});
    		}
    		//click scrolling fn
    		function ClickScrolling(){
    			$scrollerPrevButton.hide();
    			$scrollerNextButton.show();
    			$scrollerNextButton.click(function(e){ //next button
    				e.preventDefault();
    				var posX=$scroller.position().left;
    				var diffX=totalWidth+(posX-$this.width());
    				var posY=$scroller.position().top;
    				var diffY=totalHeight+(posY-$this.height());
    				$scrollerPrevButton.stop().show("fast");
    				if(options.scrollerOrientation=="horizontal"){
    					if(diffX>=$this.width()){
    						$scroller.stop().animate({left:"-="+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
    							if(diffX==$this.width()){
    								$scrollerNextButton.stop().hide("fast");
    							}
    						});
    					} else {
    						$scrollerNextButton.stop().hide("fast");
    						$scroller.stop().animate({left:$this.width()-totalWidth},options.scrollSpeed,options.scrollEasing);
    					}
    				}else{
    					if(diffY>=$this.height()){
    						$scroller.stop().animate({top:"-="+$this.height()},options.scrollSpeed,options.scrollEasing,function(){
    							if(diffY==$this.height()){
    								$scrollerNextButton.stop().hide("fast");
    							}
    						});
    					} else {
    						$scrollerNextButton.stop().hide("fast");
    						$scroller.stop().animate({top:$this.height()-totalHeight},options.scrollSpeed,options.scrollEasing);
    					}
    				}
    			});
    			$scrollerPrevButton.click(function(e){ //previous button
    				e.preventDefault();
    				var posX=$scroller.position().left;
    				var diffX=totalWidth+(posX-$this.width());
    				var posY=$scroller.position().top;
    				var diffY=totalHeight+(posY-$this.height());
    				$scrollerNextButton.stop().show("fast");
    				if(options.scrollerOrientation=="horizontal"){
    					if(posX+$this.width()<=0){
    						$scroller.stop().animate({left:"+="+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
    							if(posX+$this.width()==0){
    								$scrollerPrevButton.stop().hide("fast");
    							}
    						});
    					} else {
    						$scrollerPrevButton.stop().hide("fast");
    						$scroller.stop().animate({left:0},options.scrollSpeed,options.scrollEasing);
    					}
    				}else{
    					if(posY+$this.height()<=0){
    						$scroller.stop().animate({top:"+="+$this.height()},options.scrollSpeed,options.scrollEasing,function(){
    							if(posY+$this.height()==0){
    								$scrollerPrevButton.stop().hide("fast");
    							}
    						});
    					} else {
    						$scrollerPrevButton.stop().hide("fast");
    						$scroller.stop().animate({top:0},options.scrollSpeed,options.scrollEasing);
    					}
    				}
    			});
    		}
    	});  
     };  
    })(jQuery); 
    //global js functions
    //find element Position
    function findPos(obj){
    	var curleft=curtop=0;
    	if (obj.offsetParent){
    		curleft=obj.offsetLeft
    		curtop=obj.offsetTop
    		while(obj=obj.offsetParent){
    			curleft+=obj.offsetLeft
    			curtop+=obj.offsetTop
    		}
    	}
    	return [curtop,curleft];
    }
    Here is where i got the original code.
    http://manos.malihu.gr/jquery-thumbnail-scroller

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Wordpress itself loads $.noConflict(), which frees up the $ variable for use by other libraries. But it looks like the plugin itself is also loading .noConflict().

    To me that looks an odd way of invoking the function but I see it's included on the plugin site itself....hmmm.

    With that caveat, I can't see anything obviously wrong. Can you post a link to your page?

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Just to update this, because I was curious, I've created a page on Wordpress which implements the thumbnail slider and it seems OK - I've copied your code exactly (including, originally, the alerts but I've now got rid of these).

    Seems it will work without easing, just with jQuery UI. I had to mess with the css a bit to get it to display properly as well, but otherwise seems OK. Here's the link if it helps.

    I wonder if there's something else in your WP installation that's giving the issue.

    Just for reference, I had no problem with jQuery 1.4.2 or 1.7.1.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •