SunnyByfleet
Technical User
Hello,
I am currently learning Javascript and as a project am writing a lightbox using exist examples.
I found one such in the JQuery cookbook, which works well. However, I wanted to add thumbnails to the box, for multiple images. These would be generated on the fly, and have onclick events assigned to update the main image.
Rather than include the entire source code, I have whipped up a greatly simplified example:
If you run the above, and click the "n" (this assumes you have the relevent images...), then the 1 image appears. However, if you click the 1 image, you get an error, because it can't find the SHOW function.
It seems apparant to me that the generated code is not in the same scope as the rest of the function. How do I access the code, or do I have to restructure it entirely? I figure I could just get rid of the init function and have everything global, but that goes against everything I have learnt so far.
Any pointers would be great.
Thanks
I am currently learning Javascript and as a project am writing a lightbox using exist examples.
I found one such in the JQuery cookbook, which works well. However, I wanted to add thumbnails to the box, for multiple images. These would be generated on the fly, and have onclick events assigned to update the main image.
Rather than include the entire source code, I have whipped up a greatly simplified example:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sample</title>
<script type="text/javascript" src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>[/URL]
<script>
// Initialize.
function init_demo() {
// Insert modal at end of </body>.
// Look for modal links.
$('.click').click(function() {
// Check the href="..."
// Nofollow.
show(0);
this.blur();
return false;
}
);
function show(nval)
{
var newval = ++nval;
if (newval === 4) {newval=1;}
$('#bin').html($("<img src='"+nval+".gif' onclick='show(newval);' title='"+nval+"' />"));
}
}
// Kick things off.
$(document).ready(function() {
init_demo();
});
</script>
</head>
<body>
<div id="container">
<img src="n.gif" class="click" />
</div>
<div id="bin">
</div>
</body>
</html>If you run the above, and click the "n" (this assumes you have the relevent images...), then the 1 image appears. However, if you click the 1 image, you get an error, because it can't find the SHOW function.
It seems apparant to me that the generated code is not in the same scope as the rest of the function. How do I access the code, or do I have to restructure it entirely? I figure I could just get rid of the init function and have everything global, but that goes against everything I have learnt so far.
Any pointers would be great.
Thanks
