I'm trying to activate a 'prev/next' function on the jquery plug in below but it's proving a tad difficult? where am i goin wrong
Here is the html
<li>
<a class='prev' href=''>previous</a>/<a class='next' href=''>next</a>
</li>
and here is the script
jQuery.fn.preload = function() {
this.each(function() {
jQuery("<img/>")[0].src = this;
});
};
$(document).ready(function() {
if (!$("body").hasClass("splash")) {
return;
}
$('#video-bg').videoBG({
position: "fixed",
zIndex: -1,
mp4: '/videos/splash/loop_intro.mp4',
ogv: '/videos/splash/loop_intro.ogv',
webm: '/videos/splash/loop_intro.webm',
autoplay: true,
loop: true,
opacity: 1
});
$(window).resize(function() {
$(".videoBG").css({
width: $(window).width(),
height: $(window).height()
});
});
});
$(document).ready(function() {
if (!$("body").hasClass("home")) {
return;
}
var e = $("#home0, #home1, #home2"),
a = 0,
c = ["images/ipanema/1.jpg",
"images/ipanema/2.jpg",
"images/ipanema/4.jpg",
"images/ipanema/5.jpg",
"images/ipanema/7.jpg",
"images/ipanema/8.jpg",
"images/ipanema/9.jpg",
"images/ipanema/10.jpg"];
e.hide();
e.first().show();
$("#description").html(e.first().find("span").html());
$.backstretch(c[a], {
speed: 1000
});
$(c).preload();
imgswitch = function() {
a = $active.attr("rel");
$("#slider-controls a").removeClass("showing");
$active.addClass("showing");
e.fadeOut(1000).hide();
$.backstretch(c[a]);
$("#home" + a).fadeIn(1000).show();
$("#description").empty().hide();
$("#description").html($("#home" + a).find("span").html()).fadeIn();
};
rotateSwitch = function() {
play = setInterval(function() {
$active = $("#slider-controls a.showing").next();
$active.length === 0 && ($active = $("#slider-controls a:first"));
imgswitch();
}, 4000);
};
$("#slider-controls a").click(function() {
$active = $(this);
clearInterval(play);
imgswitch();
rotateSwitch();
return !1;
});
rotateSwitch();
});
$(document).ready(function() {
if ($("body").hasClass("splash") ||
$("body").hasClass("portfolio")) {
return;
}
$("a.floorplan").live("click", function(e) {
$.backstretch("/images/ipanema/floorplan.jpg", { speed: 1000 });
e.preventDefault();
});
var imgs = $("#slideshow img");
$(imgs).each(function() {
$([$(this).attr("src")]).preload();
});
var current = 1;
$("#slideshow").hide();
var slideshow = function() {
var current = 1;
var updateControls = function(current) {
$("a.load-slide").removeClass("current");
$("a.load-slide[rel=" + current + "]").addClass("current");
};
return {
next: function() {
if (current == imgs.length) {
current = 1;
} else {
current += 1;
}
$.backstretch("/images/ipanema/" + current + ".jpg", { speed: 1000 });
slideshow.load(current);
},
prev: function() {
if (current == 1) {
current = imgs.length;
} else {
current -= 1;
}
slideshow.load(current);
},
load: function(i) {
if (i == -1) {
i = current;
}
current = i;
updateControls(i);
$.backstretch("/images/ipanema/" + i + ".jpg", { speed: 1000 });
}
};
}();
$("next").live("click", function() {
slideshow.next()
e.preventDefault();
});
$("prev").live("click", function() {
slideshow.prev()
e.preventDefault();
});
$("a.load-slide").live("click", function(e) {
slideshow.load(parseInt($(this).attr("rel"), 10));
e.preventDefault();
});
$("a.description").live("click", function(e) {
$(this).parent().addClass("current");
$("#description").html($("div.description").children().clone());
slideshow.load(-1);
e.preventDefault();
});
slideshow.load(1);
});
// portfolio navigation
$(document).ready(function() {
if (!$("body").hasClass("portfolio")) {
return;
}
var apartments = {
ipanema: {
originalLocation: 890,
location: 890
},
aproador: {
originalLocation: 920,
location: 920
},
copa: {
originalLocation: 1260,
location: 1260
},
chopin: {
originalLocation: 2286,
location: 2286
},
urca: {
originalLocation: 5300,
location: 5300
}
};
var currentApartment = 'ipanema';
var markers = {
ipanema: {
bottom: 380,
height: 248
},
aproador: {
bottom: 358,
height: 270
},
copa: {
bottom: 351,
height: 277
},
chopin: {
bottom: 528,
height: 101
},
urca: {
bottom: 467,
height: 162
}
};
var timer;
$(window).resize(function() {
if (timer !== undefined) {
window.clearTimeout(timer);
}
timer = window.setTimeout(function() {
$("#coast-line img").css({
height: $(window).height() - 120 // 120 is height of the footer
});
$.map(apartments, function(element, index) {
var location = element.originalLocation * $("#coast-line img").width() / 6500;
apartments[index].location = location;
});
newMarginLeft = 0 - (apartments[currentApartment].location - ($(window).width() / 2));
$("#coast-line img").css({
marginLeft: newMarginLeft
});
// markers
// bottom
$("#ipanema-marker").animate({
left: apartments.ipanema.location - Math.abs(newMarginLeft),
bottom: markers.ipanema.bottom * ($(window).height() - 120) / 840
}, 250);
$("#ipanema-marker #ipanema-bar").css({
height: $("#coast-line img").height() * markers.ipanema.height / 840
});
$("#aproador-marker").animate({
left: apartments.aproador.location - Math.abs(newMarginLeft),
bottom: markers.aproador.bottom * ($(window).height() - 120) / 840
}, 250);
$("#aproador-marker #aproador-bar").css({
height: $("#coast-line img").height() * markers.aproador.height / 840
});
$("#copa-marker").animate({
left: apartments.copa.location - Math.abs(newMarginLeft),
bottom: markers.copa.bottom * ($(window).height() - 120) / 840
}, 250);
$("#copa-marker #copa-bar").css({
height: $("#coast-line img").height() * markers.copa.height / 840
});
$("#chopin-marker").animate({
left: apartments.chopin.location - Math.abs(newMarginLeft),
bottom: markers.chopin.bottom * ($(window).height() - 120) / 840
}, 250);
$("#chopin-marker #chopin-bar").css({
height: $("#coast-line img").height() * markers.chopin.height / 840
});
$("#urca-marker").animate({
left: apartments.urca.location - Math.abs(newMarginLeft),
bottom: markers.urca.bottom * ($(window).height() - 120) / 840
}, 250);
$("#urca-marker #urca-bar").css({
height: $("#coast-line img").height() * markers.urca.height / 840
});
}, 500);
});
setTimeout(function() {
$(window).trigger("resize");
}, 500);
$("a.ipanema").click(function(e) {
e.preventDefault();
});
var links = "a.ipanema, a.aproador, a.copa, a.chopin, a.urca";
$(links).click(function(e) {
var apartment = $(this).attr("class").split(" ")[0];
var newMarginLeft = 0 - (apartments[apartment].location - ($(window).width() / 2));
$("#coast-line img").animate({
marginLeft: newMarginLeft
}, 1000, function() {
});
$("#ipanema-marker").animate({
left: apartments.ipanema.location - Math.abs(newMarginLeft)
}, 1000);
$("#aproador-marker").animate({
left: apartments.aproador.location - Math.abs(newMarginLeft)
}, 1000);
$("#copa-marker").animate({
left: apartments.copa.location - Math.abs(newMarginLeft)
}, 1000);
$("#chopin-marker").animate({
left: apartments.chopin.location - Math.abs(newMarginLeft)
}, 1000);
$("#urca-marker").animate({
left: apartments.urca.location - Math.abs(newMarginLeft)
}, 1000);
currentApartment = apartment;
$(links).removeClass("prev")
.removeClass("next")
.removeClass("current");
$(this).addClass("current");
var prev = $(this).prev().length ? $(this).prev() : $("#portfolio-controls a").last();
var next = $(this).next().length ? $(this).next() : $("#portfolio-controls a").first();
console.log(prev);
$(prev).addClass("prev");
$(next).addClass("next");
e.preventDefault();
});
});
if ((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$("#navigation li").click(function() {
//we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
//strange
});
}