We Keep Coding

Lightbox - Next and Prev buttons

So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/

Second Javascript function throws everything off

Hey I just have a simple javascript code in which I animate elements to appear on the page when the page loads. Everything is fine with the animating segment. However, when I try to add in a second javascript command for when I hover over the image, nothing else works. I am definitely sure it has to do with how I entered the code. Can someone help fix my code?
var main = function() {
{
$(".menu").animate({
"top": "0px"
}, 400);
};
{
$(".about h2").animate({
"right": "0px"
}, 500);
}; {
$(".about p").animate({
"bottom": "0px"
}, 580);
}; {
$(".resume").animate({
"bottom": "0px"
}, 650);
}; {
$("#image img").animate({
"right": "0px"
}, 600);
};
$("#image img").hover(function() {
$(this).css({
"background-color:"
"rgba(0,0,0,0.5)"
});
});
}
$(document).ready(main);

This syntax is incorrect:
$(this).css({
"background-color:"
"rgba(0,0,0,0.5)"
});
That's just two strings, not separated in any way, and therefore not a valid object. The correct syntax is propertyName : "value", so your code should be
$(this).css({
backgroundColor: "rgba(0,0,0,0.5)"
});
See the docs for more info.
Also, as others have pointed out, you don't need all those {...} blocks. Your code can be simplified to this:
var main = function() {
$(".menu").animate({
"top": "0px"
}, 400);
};
$(".about h2").animate({
"right": "0px"
}, 500);
$(".about p").animate({
"bottom": "0px"
}, 580);
$(".resume").animate({
"bottom": "0px"
}, 650);
$("#image img").animate({
"right": "0px"
}, 600);
$("#image img").hover(function() {
$(this).css({
backgroundColor: "rgba(0,0,0,0.5)"
});
});
$(document).ready(main);

Close function not working in Jquery

I'm trying to close a pop-up DIV using a closing function with jquery, It worked before I added the position function of the DIV, and something I did must have broken the function... I'm guessing it's a syntax error somewhere, any fresh pair of eyes out there willing to take a look?
Thw working site is at www.masterfade.com/maptest
Here's the code:
$(document).ready(function () {
$('.lightbox').click(function (event) {
event.preventDefault();
$('.backdrop, #box').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box').css('display', 'block');
});
$('.lightbox2').click(function (event) {
event.preventDefault();
$('#box2').css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
});
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
$('.close').click(function () {
close_box();
});
$('.backdrop').click(function () {
close_box();
});
function close_box() {
$('.backdrop, #box, #box2').animate({
'opacity': '0'
}, 300, 'linear', function () {
$('.backdrop, #box, #box2').css('display', 'none');
});
}

I think your event bindings and animation functions are call before DOM elements load. So event bindings will not work.
I hope the following codes will work.
$(document).ready(function () {
$('.lightbox').click(function (event) {
event.preventDefault();
$('.backdrop, #box').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box').css('display', 'block');
});
$('.lightbox2').click(function (event) {
event.preventDefault();
$('#box2').css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
// following lines are edited
$('.close,.backdrop').click(close_box);
function close_box() {
$('.backdrop, #box, #box2').animate({
'opacity': '0'
}, 300, 'linear', function () {
$('.backdrop, #box, #box2').css('display', 'none');
});
}
});

so,
i browsed to your website, and with Google Chrome Developer Tools (Console) iv'e manually called $('.lightbox').click() and close_box() and it seems that it's working as excepted and no javascript exception were thrown.
however, i'm not sure that you even understand what's not working.
i highly suggest you to use Chrome browser with developer tools, it will make your life way easier regarding web development.
using this you could monitor javascript errors and debug your code line by line.
good luck

Why I can not click on my function to show and hide?

Hey I am having difficulty rewriting a code, but it is not working when clicking to show. How can I fix this issue. The code works opens up 500 then is suppose to work by click. But it does not work. Here is the code:
var timer;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
}, 500);
});
$(".icon-menu-2").click(function show() {
$(".c_left").show.animate({ width: 200, marginRight: 30, display: 'toggle'}, 'slow');
$(".c_right").show.animate({ marginRight:215, display:'toggle'}, 'slow', function () {
clearTimeout(timer);
});
}, function hide() {
$(".c_left").animate({ marginRight: -155, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginRight:30, display:'toggle'}, 'slow');
});
http://jsfiddle.net/jL5hU/
How can I fix my code?

As bfvareto commented .show() is a function and you cannot call it with just .show
You had strange code here also: .click(function show() {. Not quite sure what you mean there, anyway try my code suggestion...
var timer; var open;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
open = false;
}, 500);
});
$(".icon-menu-2").click(function() {
if(open){
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
} else {
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow");
}
open = !open;
});
Demo here

How to change div style when click to another

I would to change the div css style when click, then change to it primary status when click to another.
i used this code but it just rechange it when click on another div,
here the code am trying:
$('.mydiv').click(
function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500);
}, function () {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});

You're probably looking for the toggle() function :
$('.mydiv').toggle(function() {
$(this).stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$(this).stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});​
And you need jQuery UI to animate colors ?
FIDDLE
EDIT:
You're probably still looking for the toggle() function, but to animate one div when clicking on another div, stop using the this keyword and target the div you're trying to animate :
$('#someDiv').toggle(function() {
$('.mydiv').stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$('.mydiv').stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});​
FIDDLE

Try this:
$('.mydiv').click(function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500, function() {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});
});