Violet, your code won't work cause you can't use $(function(){}) inside an function.
$(function(){}) is a shortchut to window.onload event, so if you put it inside another function it won't be executed.
Also, the param you recieve in the changeImage function is a string, so you would need to get the element by that id.
To your function to work it should be something like this:
function change_image(image)
{
$(".overlay").show();
$(".box").show("slow");
$("#" + image).fadeIn(4000);
$(".close_button").show();
$(".close_button").click(function() {
$(this).hide();
$("#" + image).fadeOut("fast"); // You need to close the opened image now
$(".box").hide("slow");
$(".overlay").hide("slow");
});
});
}But let me explain my code, i've ajusted to your new html with hidden full image:
// Set on document ready/window onload event
$(function() {
// Set click listener on <a>
$("a.full_image").click(function() {
// $(this) is the <a> element clicked
var $imgThumb = $(this).children("img"); // Get the <img> element inside the <a>
var $imgFull = $(this).next("img"); // Get the next <img> element besides <a>
var urlThumb = $imgThumb.attr("src"); // Get the src attribute from the thumb <img>
var urlFull = $imgFull.attr("src"); // Get the src attribute from the full <img>
$(".overlay").show();
$(".box").show("slow");
$(".standalone_image").css("background", "url('" + urlFull + "')") .fadeIn(4000);
$(".close_button").show();
});
$(".close_button").click(function() {
$(this).hide();
$("standalone_image").fadeOut("fast");
$(".box").hide("slow");
$(".overlay").hide("slow");
});
});
