...

View Full Version : Image Gallery Slide last element problem.



jhaycutexp
10-08-2011, 09:52 PM
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:



// 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



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



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...

jhaycutexp
10-09-2011, 04:20 AM
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 :D

jhaycutexp
10-09-2011, 04:25 AM
http://dev.andrewfopalan.com/new_slider.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum