We Keep Coding

Lightbox like a popup

This code is a lightbox, but it's necessary click to show the content, and I need it appearing without click. Automatic. Kind a pop up.
$(document).ready(function() {
$('.lightbox').click(function() {
$('.background, .box').animate({
'opacity': '.60'
}, 500, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$('.background, .box').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');
});;
});
});

How's this? Move code into functions and then just run open popup function on document ready:
$(document).ready(function() {
$('.lightbox').click(function() {
openPopup();
});
$('.close').click(function() {
closePopup();
});
$('.background').click(function() {
closePopup();
});
openPopup();
});
function openPopup() {
$('.background, .box').animate({
'opacity': '.60'
}, 500, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$('.background, .box').css('display', 'block');
}
function closePopup() {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function() {
$('.background, .box').css('display', 'none');
});
}

You can trigger an event using Jquery. If you want this pop up to open automatically then use
$('.lightbox').trigger("click")
in document.ready function. This will automatically call that class click and by this your light box pop up will open.

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

Adding easing to image pan

I am using some JavaScript and jQuery (with the easing plugin) to create a virtual tour; really just a long image that can pan left and right. I have found this which is perfect for the cause: http://jsfiddle.net/MvRdD/1/. Is there a way to add easing to the animation?

http://jsfiddle.net/ARTsinn/MvRdD/890/
$(document).ready(function() {
$.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
var animateTime = 10,
offsetStep = 5,
scrollWrapper = $('#wrap');
//event handling for buttons "left", "right"
var aktiv;
$('.bttL, .bttR').mousedown(function(e) {
if (e.target.className === 'bttR') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '+=' + 20
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
} else if (e.target.className === 'bttL') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '-=' + 20
}, {
duration: 1200,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
}
}).mouseup(function() {
window.clearInterval(aktiv);
});
scrollWrapper.mousedown(function(event) {
$(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function(event) {
$(this).data('down', false);
}).mousemove(function(event) {
if ($(this).data('down')) {
$(this).stop(false, true).animate({
scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}
}).mousewheel(function(event, delta) {
$(this).stop(false, true).animate({
scrollLeft: '-=' + delta * 60
}, {
duration: 400,
queue: false,
easing: 'easeOutCirc'
});
event.preventDefault();
}).css({
'overflow': 'hidden',
'cursor': '-moz-grab'
});
});

jQuery: do after complete animate doesn't work

$comment.animate({width: 0}, {queue:false, duration:450 }, function() {
//$comment.css({ 'display': 'block' })
$comment.hide();
});
it doesn't show animation. i guess that i have put a function is wrong place.

Per the docs, if you specify options, include the callback in the options rather than separately:
$comment.animate({width: 0}, {
queue: false,
duration: 450,
complete: function() {
//$comment.css({ 'display': 'block' })
$comment.hide();
}
});

click() not working as expected

$j('#carousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
$j('div#slideshow-carousel a img').css({
'opacity': '0.5'
});
$j('div#slideshow-carousel a img:first').css({
'opacity': '1.0'
});
$j('div#slideshow-carousel li a').hover(
function () {
if (!$j(this).has('span').length) {
$j('div#slideshow-carousel li a img').stop(true, true).css({
'opacity': '0.5'
});
$j(this).stop(true, true).children('img').css({
'opacity': '1.0'
});
}
}, function () {
$j('div#slideshow-carousel li a img').stop(true, true).css({
'opacity': '0.5'
});
$j('div#slideshow-carousel li a').each(function () {
if ($j(this).has('span').length) $j(this).children('img').css({
'opacity': '1.0'
});
});
}).click(function () {
$j('div#slideshow-main li').removeClass('active');
$j('div#slideshow-main li.' + $j(this).attr('rel')).addClass('active');
return false;
});
This simple carousel script works perfectly except the click part; nothing happens on clicking the thumbnails, they should be applied the 'active' class.

I think you're using slideshow-main where you mean slideshow-carousel, e.g. this:
}).click(function () {
$j('div#slideshow-main li').removeClass('active');
$j('div#slideshow-main li.' + $j(this).attr('rel')).addClass('active');
return false;
});
should be:
}).click(function () {
$j('div#slideshow-carousel li').removeClass('active');
$j('div#slideshow-carousel li.' + $j(this).attr('rel')).addClass('active');
return false;
});
Seems to work, anyway: http://jsbin.com/aliqi3