Fancybox (Lightbox) - Last image not working

Fancybox (Lightbox) - Last image not working.

Hi all

This is a follow on from another problem I had with the same image gallery

I have this simple gallery that loads images from an xml file and
uses Fancybox - Fancybox - Fancy lightbox alternative to display the images.

untitled

Everything is working but the last image is not working with fancybox. The
last image just displays in it’s own window.

Can anyone see why the last image is not displaying with fancybox.


<!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 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 img_onClick = $('.single_image').fancybox(); 
              var imgLink = '<a href="'+img+'" onclick="'+img_onClick+'" class="single_image" ><img src="'+thumb+'" /></a>';
              $('<li></li>').html(imgLink).appendTo('#'+secName+' ul');
              //
            })
        });
      }
    })
         
  </script>
</body>
</html>


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


<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


var className = "."+"single_image"; 
var img_onClick = "myFun('"+className+"')";


onclick="'+img_onClick+'" 


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.


<!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>