www.webdeveloper.com
Results 1 to 5 of 5

Thread: Changing image slider to fade from rotate.

Hybrid View

  1. #1
    Join Date
    Nov 2012
    Posts
    3

    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 code 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, the original code author will not respond to requests for support from anyone it seems. If I have not provided you with enough information, please let me know. I don't know what I don't know!

    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. #2
    Join Date
    Nov 2012
    Posts
    3
    Anyone?

  3. #3
    Join Date
    Nov 2012
    Posts
    3
    Bump

  4. #4
    Join Date
    Apr 2013
    Posts
    2
    can this be done by this image programme.

  5. #5
    Join Date
    Apr 2013
    Posts
    26
    If you wanna save these complicated steps and find a easy way, you can google image rotation and you will find many useful tools, or google how to rotate image to get instructive articles. Good luck I think image rotation programmes can enable to quickly convert files. i have use imaging sdk which can original layouts hyperlinks, Images and tables retained in word ,text, image, Epub, html.but i forgot download the wedsite ,go to google. By the way , pay attention to your system platform, select the suitable one . I use an imaging sdk driver found on the internet . Install it and it becomes a selectable option.Then you can rotate image in any program at all, including Adobe Acrobat . Just open an image, select rotate, and choice a form you want, then you can do image rotation ,the task will be finished in several seconds. if you haven't found a good choice , you can have a try. best wishes.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles