I've spent all day on this now and still can't get it to work.
For fancybox to work it would look like this
Code:
<a href="the_Image.jpg" class="imgClass"><img src="the_Image_th.jpg"></a>
//the jQuery
$('.imgClass').fancybox();
I've now created a variable that points the onclick to a function outside the loop
and passed in the class name of the image
Code:
var className = "."+"single_image";
var img_onClick = "myFun('"+className+"')";
Code:
onclick="'+img_onClick+'"
Code:
function myFun(imgShow){
alert(imgShow)
$(imgShow).fancybox();
}
The function is called and the alert shows the name of the class so why doesn't it work.
Any help on this would be greatly appreciated.
Code:
<!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);
}
function myFun(imgShow){
alert(imgShow)
$(imgShow).fancybox();
}
$.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 nav_onClick = "slideContent('" + divName + "')";
var link = '<a href="#" onclick="' + nav_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 = "."+"single_image";
var img_onClick = "myFun('"+className+"')";
//
//var imgLink = '<a href="'+img+'" class="single_image" onclick="'+img_onClick+'" ><img src="'+thumb+'" /></a>';
//var img_onClick = $('.single_image').fancybox();
//
var imgLink = '<a href="'+img+'" class="single_image" onclick="'+img_onClick+'" ><img src="'+thumb+'" /></a>';
$('<li></li>').html(imgLink).appendTo(divName+' ul');
//
});
});
}
});
</script>
</body>
</html>
Reply With Quote
Bookmarks