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 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts

    Image Gallery Slide last element problem.

    Hi guys,

    I am currently stuck up on something.. check this page

    http://dev.andrewfopalan.com/new_slider.html

    Well for starters.. I am trying to mimic this effect..
    http://www.vogue.com/

    The slider on the very top..

    A quick preview of what I did was.. I used this plugin.. easyslider()..

    And then edited it.. since I am still learning jQuery and javascript.. so I made changes to the controls... usually the elements for design.. all I did was that..

    The first problem was how to make it center like the one on the vogue.. so it was done...

    Second the masking problem.. I had alot of trouble thinking how I am going to do this.. because whenever I used absolute position on masks and the controls, everything is messed up on all browser..

    So my problem primarily was how to make the effect like vogue mask, so what I did was used opacity on the list... and add a class active that regains the opacity 1 on the middle part of the slider.. so that was done..

    My follow up problem is whenever I am navigating through the slider.. I add the "active" class on the next item on the list.. up until there I am fine.. but when I am at almost at the end, at the 5th slider, I am not getting the active class? and after a couple of clicks on the "next".. it wont navigate through...

    here's the code for the next button:

    Code:
    // this gets the current location of the active slider on the list..
    
    $("a#"+options.nextId).click(function(e){	
    var id= $('.active').attr('id');
    
    //this removes the "active" class on the slider.. and then goes to the next item on the list.. and then add the class "active" to the next image slide..
    
    $("ul li:nth-child("+(id)+")").removeClass('active').next().addClass('active');
    
    // this is the plugin's animation to move to the next slide..
    animate("next",true);
    Heres' the code for the animate

    Code:
    function animate(dir,clicked){
        if (clickable){
    clickable = false;
    var ot = t;				
    switch(dir){
    						case "next":
    							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
    							break; 
    						case "prev":
    							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
    							break; 
    						case "first":
    							t = 0;
    							break; 
    						case "last":
    							t = ts;
    							break;
    						default:
    							t = dir;
    							break; 
    					};	
    					var diff = Math.abs(ot-t);
    					var speed = diff*options.speed;						
    					if(!options.vertical) {
    						p = (t*w*-1);
    						
    						$("ul",obj).animate(
    							{ marginLeft: p}, 
    							{ queue:false, duration:speed, complete:adjust,
    							
    							  }
    						);				
    					} else {
    						p = (t*h*-1);
    						$("ul",obj).animate(
    							{ marginTop: p }, 
    							{ queue:false, duration:speed, complete:adjust }
    						);					
    					};
    heres the adjust code function

    Code:
    function adjust(){
    				if(t>ts) t=0;		
    				if(t<0) t=ts;	
    				if(!options.vertical) {
    					$("ul",obj).css("margin-left",(t*w*-1));
    				} else {
    					$("ul",obj).css("margin-left",(t*h*-1));
    				}
    				clickable = true;
    				if(options.numeric) setCurrent(t);
    			};
    I am very still new to this jQuery thing.. but I am trying my best to learn..

    Hope someone could teach me and help me on this...

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    sorry guys for taking your time..

    I have solved it..

    Here's the test page..
    http://dev.andrewfopalan.com/new_slider.html

    I knew a couple of hours of sleep is just what I need

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts


  •  

    Posting Permissions

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