I’m working on adapting a jQuery slider that originally had 10 thumbnails. I only need 4 and I’ve adjusted them to fit the space but something in the jQuery forces them to advance slightly from left to right as they move between the thumbnails. I’ve taken a screenshot so that you can see what i mean. http://awesomescreenshot.com/0edr1flb7 I need the blue box in the screenshot to remain static beneath the large image.
The jQuery is as follows:
(function (a) {
a.fn.spiderSlider = function (b) {
var c = {
speed: 700,
pauseTime: 5000,
spiderCache: true,
autoPlay: true,
spiderTimer: true,
keyboardNav: true,
currentSlide: 0
};
var b = a.extend(c, b);
this.each(function () {
var z = b.currentSlide,
v = a(this),
h = v.find(".button"),
E = h.find(".buttonCover"),
w = h.width(),
B = v.find(".slider"),
j = h.find(".thumb"),
l = v.find(".cover"),
f = h.find(".cache"),
g = f.find(".filler"),
s = f.width(),
e = l.find(".item"),
C = v.find(".next"),
A = v.find(".prev"),
n = v.find(".auto"),
o = e.length,
D = j.outerWidth(true),
t = e.width(),
r = e.height(),
y = b.speed,
m = b.spiderTimer,
q = b.spiderCache,
x = b.pauseTime,
d = b.keyboardNav,
p = false;
E.width(o * D);
l.width(o * t);
k(0);
if (b.autoPlay) {
i(true)
}
j.click(function () {
if (p) {
n.trigger("click")
}
k(j.index(this), t)
});
n.click(function () {
if (!p) {
i(true)
} else {
u(true)
}
});
C.click(function () {
if (p) {
u(true)
}
if (z < (o - 1)) {
k(z + 1)
} else {
k(0)
}
});
A.click(function () {
if (p) {
u(true)
}
if (z < 1) {
k(o - 1)
} else {
k(z - 1)
}
});
function i(F) {
if (F) {
a(".isPaused").stop(true, true).css("bottom", "-40px").show();
a(".isPlaying").stop(true, true).animate({
bottom: "0px"
}, function () {
a(".isPlaying").fadeOut(1000, function () {
a(".isPlaying").css("bottom", "-40px").show()
})
})
}
p = true;
n.removeClass("play").addClass("pause");
if (m) {
g.css("width", "0px").animate({
width: s
}, x)
}
m = window.setInterval(function () {
u(false);
if (z < (o - 1)) {
k(z + 1)
} else {
k(0)
}
i(false);
if (m) {
g.stop(true, true).css("width", "0px").animate({
width: s
}, x)
}
}, x)
}
function u(F) {
if (F) {
a(".isPlaying").stop(true, true).css("bottom", "-40px").show();
a(".isPaused").stop(true, true).animate({
bottom: "0px"
}, function () {
a(".isPaused").fadeOut(1000, function () {
a(".isPaused").css("bottom", "-40px").show()
})
})
}
p = false;
if (m) {
g.stop(true, false).animate({
width: "0px"
})
}
n.removeClass("pause").addClass("play");
window.clearInterval(m)
}
if (d) {
a(document).keyup(function (F) {
if (F.target.tagName.match("TEXTAREA|INPUT|SELECT")) {
return
}
switch (F.which) {
case 39:
C.trigger("click");
break;
case 37:
A.trigger("click");
break;
case 32:
n.trigger("click");
break
}
})
}
function k(F) {
l.stop(true, true).animate({
left: -t * (F)
}, y);
a(".active", v).removeClass("active");
var G = j.eq(F);
G.addClass("active");
z = F;
if (q) {
f.stop(true, true).animate({
marginLeft: D * (F)
}, y, function () {
if (-D * (F) + (w / 2) > 0) {
E.stop(true, true).animate({
left: 0
}, y)
} else {
if (-D * (F) - (w / 2) < -(o * D)) {
E.stop(true, true).animate({
left: -(o * D) + w
}, y)
} else {
E.stop(true, true).animate({
left: -D * (F + 0.5) + (w / 2)
}, y)
}
}
})
} else {
f.stop(true, true).animate({
marginLeft: D * (F)
}, y);
if (-D * (F) + (w / 2) > 0) {
E.stop(true, true).animate({
left: 0
}, y)
} else {
if (-D * (F) - (w / 2) < -(o * D)) {
E.stop(true, true).animate({
left: -(o * D) + w
}, y)
} else {
E.stop(true, true).animate({
left: -D * (F) + (w / 2)
}, y)
}
}
}
}
})
}
})(jQuery);
I was actually able to get the desired effect with a css hack. I added .buttonCover { left: 0 !important; } to the div that the jquery was manipulating and that did the trick!