View Full Version : Image Gallery Slide last element problem.

10-08-2011, 10:52 PM
Hi guys,

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


Well for starters.. I am trying to mimic this effect..

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

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

Heres' the code for the animate

function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
case "first":
t = 0;
case "last":
t = ts;
t = dir;
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);

{ marginLeft: p},
{ queue:false, duration:speed, complete:adjust,

} else {
p = (t*h*-1);
{ 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) {
} else {
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...

10-09-2011, 05:20 AM
sorry guys for taking your time..

I have solved it..

Here's the test page..

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

10-09-2011, 05:25 AM