Web Analytics Made Easy -
StatCounter javascript interference (aviaslider and slidebox scripts) - CodingForum

Announcement

Collapse
No announcement yet.

javascript interference (aviaslider and slidebox scripts)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • javascript interference (aviaslider and slidebox scripts)

    First, I am proficient in css/html and not javascript. If I need a javascript script, usually pay for or locate a free one and embed into my framework.

    That said, currently using aviaslider, popular java based slider, for my frontpage photo slideshow.

    Was looking to embed a slidebox javascript based script underneath.

    When I tested the slidebox script on a separate page, it functions perfectly.

    When I embed on my frontpage it interferes with the aviaslider. Basically, it is stuck loading the first image.

    When I tested to see what was causing the problem, it was when I added the javascript onto the page.

    Seeing they are creating similar type functions, figured there is a crossover somewhere. Maybe it is labeled with a generic label?

    What would be the easiest way to separate the two so they work separately without a problem? Can I assign the scripts to specific divs?

    Appreciate some feedback, otherwise this could take me a long time to resolve or would be forced to locate another script...

    The script for the slidebox is below:
    Code:
     
    <script type="text/javascript">
    $(document).ready(function() {
    	var autoPlayTime=7000;
    	autoPlayTimer = setInterval( autoPlay, autoPlayTime);
    	function autoPlay(){
    		Slidebox('next');
    	}
    	$('#slidebox .next').click(function () {
    		Slidebox('next','stop');
    	});
    	$('#slidebox .previous').click(function () {
    		Slidebox('previous','stop');
    	});
    	var yPosition=($('#slidebox').height()-$('#slidebox .next').height())/2;
    	$('#slidebox .next').css('top',yPosition);
    	$('#slidebox .previous').css('top',yPosition);
    	$('#slidebox .thumbs a:first-child').removeClass('thumb').addClass('selected_thumb');
    	$("#slidebox .content").each(function(i){
    		slideboxTotalContent=i*$('#slidebox').width();	
    		$('#slidebox .container').css("width",slideboxTotalContent+$('#slidebox').width());
    	});
    });
    
    function Slidebox(slideTo,autoPlay){
        var animSpeed=1000; //animation speed
        var easeType='easeInOutExpo'; //easing type
    	var sliderWidth=$('#slidebox').width();
    	var leftPosition=$('#slidebox .container').css("left").replace("px", "");
    	if( !$("#slidebox .container").is(":animated")){
    		if(slideTo=='next'){ //next
    			if(autoPlay=='stop'){
    				clearInterval(autoPlayTimer);
    			}
    			if(leftPosition==-slideboxTotalContent){
    				$('#slidebox .container').animate({left: 0}, animSpeed, easeType); //reset
    				$('#slidebox .thumbs a:first-child').removeClass('thumb').addClass('selected_thumb');
    				$('#slidebox .thumbs a:last-child').removeClass('selected_thumb').addClass('thumb');
    			} else {
    				$('#slidebox .container').animate({left: '-='+sliderWidth}, animSpeed, easeType); //next
    				$('#slidebox .thumbs .selected_thumb').next().removeClass('thumb').addClass('selected_thumb');
    				$('#slidebox .thumbs .selected_thumb').prev().removeClass('selected_thumb').addClass('thumb');
    			}
    		} else if(slideTo=='previous'){ //previous
    			if(autoPlay=='stop'){
    				clearInterval(autoPlayTimer);
    			}
    			if(leftPosition=='0'){
    				$('#slidebox .container').animate({left: '-'+slideboxTotalContent}, animSpeed, easeType); //reset
    				$('#slidebox .thumbs a:last-child').removeClass('thumb').addClass('selected_thumb');
    				$('#slidebox .thumbs a:first-child').removeClass('selected_thumb').addClass('thumb');
    			} else {
    				$('#slidebox .container').animate({left: '+='+sliderWidth}, animSpeed, easeType); //previous
    				$('#slidebox .thumbs .selected_thumb').prev().removeClass('thumb').addClass('selected_thumb');
    				$('#slidebox .thumbs .selected_thumb').next().removeClass('selected_thumb').addClass('thumb');
    			}
    		} else {
    			var slide2=(slideTo-1)*sliderWidth;
    			if(leftPosition!=-slide2){
    				clearInterval(autoPlayTimer);
    				$('#slidebox .container').animate({left: -slide2}, animSpeed, easeType); //go to number
    				$('#slidebox .thumbs .selected_thumb').removeClass('selected_thumb').addClass('thumb');
    				var selThumb=$('#slidebox .thumbs a').eq((slideTo-1));
    				selThumb.removeClass('thumb').addClass('selected_thumb');
    			}
    		}
    	}
    }
    </script>
    Last edited by VIPStephan; Aug 20, 2011, 10:41 AM. Reason: fixed code embedding

  • #2
    Originally posted by babs29412 View Post
    The script for the slidebox is below:
    That’s an interesting script you have there. The only drawback is that it doesn’t tell us anything about the relation to the other script and even less about the preconditions that lead to the problem (i. e. the way you approach this generally). A little more code wouldn’t be asked to much, would it?
    Stop solving problems you don’t yet have!

    Comment

    Working...
    X