Catching <a> link click - Fancy Box
Hi all
I have an example here of the simple image gallery I’m working with.
The thumbnails are loaded from an XML and are linked to larger images.
I want to use Fancy box Fancybox - Fancy lightbox alternative to show the larger images. I have fancy box working on
other sites but can’t get it to work here.
In an attempt to work out why it’s not working I tried to capture the click on the <a> link,
but that won’t work.
$('.groupedImg').click(function(){
alert('here');
})
I’m stuck now can any see why I can’t capture the click on the <a> link.
I think if I can work this out I might be able to get fancy box working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
</head>
<body>
<div class="wrap">
<div id="header"><ul></ul></div>
<div id="content"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript">
function slideContent(div){
var $content = $('#content');
var divPos = $('#content ' + div).position();
var scrollPosition = $content.scrollTop()+divPos.top;
$('#content').animate({scrollTop: scrollPosition}, 500);
}
$.ajax({
type: 'GET',
url: 'images.xml',
dataType: 'xml',
success: function(xml){
$(xml).find('section').each(function(){
var id = $(this).attr('id');
var secName = $(this).attr('secName');
var divName = '#'+secName;
var onclick = "slideContent('" + divName + "')";
var link = '<a href="#" onclick="' + onclick + '">' +secName+ '</a>';
$('<li></li>').html(link).appendTo('#header ul');
$('<div id='+secName+' class="section"><ul></ul></div>').appendTo('#content');
$(this).find('img').each(function(){
var thumb = $(this).attr('imgName')+'_th.jpg';
var img = $(this).attr('imgName')+'.jpg';
var className = "groupedImg";
$('<li><a href='+img+' class='+className+' ><img src='+thumb+' /></a></li>').appendTo('#'+secName+' ul');
})
});
}
})
//$("a.groupedImg").fancybox();
$('.groupedImg').click(function(){
alert('here');
})
</script>
</body>
</html>
