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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing image slider to fade from rotate.

    Hi folks,

    Novice js user here. I'm building a site using a Drupal theme ("Business") and it comes with an image slider which currently swaps images by rotating them. I'd like to have the images fade in/out and while usually I can google/mash my way though the script and figure out the changes I'd like to make, things I have tried so far have not worked in this instance.

    There is a file called sliding_effect.js and within this file is the code I suspect I have to change but not sure a) what to change/delete/comment out and b) if there are any other files I need to modify. I am unable to post a link to the site as it's not publicly available yet but will post the suspect code below. Any help is greatly appreciated!

    Code:
    	//Paging + Slider Function
    	rotate = function(){	
    	    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    	    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
    	
    	    $(".paging a").removeClass('active'); //Remove all active class
    	    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
    	    
    		$(".desc").stop(true,true).slideUp('slow');
    		
    		$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
    		
    	    //Slider Animation
    	    $(".image_reel").animate({ 
    	        left: -image_reelPosition
    	    }, 500 ); 
    	
    		
    	}; 
    
    	//Rotation + Timing Event
    	rotateSwitch = function(){	
    	$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");	
    	    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
    	        $active = $('.paging a.active').next();
    	        if ( $active.length === 0) { //If paging reaches the end...
    	            $active = $('.paging a:first'); //go back to first
    	        }
    	        rotate(); //Trigger the paging and slider function
    	    }, 5000); //Timer speed in milliseconds (3 seconds)	
    	
    	};
    	
    	rotateSwitch(); //Run function on launch

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you could replace all slideDown with fadeOut and slideUp with fadeIn

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry, I didn't mention there is a banner that slides up/down with each new image and that is what that bit of code (slideDown slideUp) refers to. I believe ".desc" refers to the description of the image.
    I will post a screenshot of the site but that is all I can do other than post code.
    I think the part I need to change is here
    Code:
     //Slider Animation
    	    $(".image_reel").animate({ 
    	        left: -image_reelPosition
    	    }, 500 );
    and/or here?

    Code:
    //Rotation + Timing Event
    	rotateSwitch = function(){	
    	$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");	
    	    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
    	        $active = $('.paging a.active').next();
    	        if ( $active.length === 0) { //If paging reaches the end...
    	            $active = $('.paging a:first'); //go back to first
    	        }
    	        rotate(); //Trigger the paging and slider function
    	    }, 5000); //Timer speed in milliseconds (3 seconds)	
    	
    	};
    	
    	rotateSwitch(); //Run function on launch

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts


    Image 'slides' from right to left, would like it to fade in/out. The description bar is at the bottom and works fine.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Bump
    Anyone?

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Try

    Code:
    //Slider Animation
    	    $(".image_reel").fadeOut("slow");
    and perhaps change slideDown() to fadeIn("slow").

    But the feature you are using calls a rotate() function. Perhaps it contains an alternative function? Otherwise, you would probably need to replace it with an alternative slider plug-in.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    MissStress (11-16-2012)


  •  

    Posting Permissions

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