www.webdeveloper.com
Results 1 to 2 of 2

Thread: Fancybox (Lightbox) - Last image not working.

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    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 - http://fancybox.net/ to display the images.

    http://www.ttmt.org.uk/forum/6_fancybox1/

    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.

    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);
        }
                   
        $.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>

  2. #2
    Join Date
    Feb 2009
    Posts
    124
    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles