Fancybox (Lightbox) - Last image not working.

Fancybox (Lightbox) - Last image not working.

Hi all

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


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.

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.  
  9.     <title>untitled</title>
  10.     <link rel="stylesheet" href="style.css" type="text/css">
  11.     <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  12. </head>
  13.  
  14. <body>
  15.   <div class="wrap">
  16.     <div id="header"><ul></ul></div>  
  17.     <div id="content"></div>
  18.   </div>
  19.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  20.   <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  21. <script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
  23.   <script type="text/javascript">
  24.           
  25.     function slideContent(div){
  26.       var $content = $('#content');
  27.       var divPos = $('#content ' + div).position();
  28.       var scrollPosition = $content.scrollTop()+divPos.top;
  29.       $('#content').animate({scrollTop: scrollPosition}, 500);
  30.     }
  31.                
  32.     $.ajax({
  33.       type: 'GET',
  34.       url: 'images.xml',
  35.       dataType: 'xml',
  36.       success: function(xml){
  37.         $(xml).find('section').each(function(){
  38.           var id = $(this).attr('id');
  39.           var secName = $(this).attr('secName');
  40.           var divName = '#'+secName;
  41.           var nav_onClick = "slideContent('" + divName + "')";
  42.           var link = '<a href="#" onclick="' + nav_onClick + '">' +secName+ '</a>';
  43.           $('<li></li>').html(link).appendTo('#header ul');
  44.           $('<div id='+secName+' class="section"><ul></ul></div>').appendTo('#content');         
  45.             $(this).find('img').each(function(){
  46.               var thumb = $(this).attr('imgName')+'_th.jpg'; 
  47.               var img = $(this).attr('imgName')+'.jpg';   
  48.               var img_onClick = $('.single_image').fancybox(); 
  49.               var imgLink = '<a href="'+img+'" onclick="'+img_onClick+'" class="single_image" ><img src="'+thumb+'" /></a>';
  50.               $('<li></li>').html(imgLink).appendTo('#'+secName+' ul');
  51.               //
  52.             })
  53.         });
  54.       }
  55.     })
  56.          
  57.   </script>
  58. </body>
  59. </html>