SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Catching <a> link click - Fancy Box

    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.

    untitled

    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.

    Code:
    $('.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.

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

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi, I've had a look at the source of your page.

    The links don't have a class of groupedImg they have a className of "className"

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The className is a reference to the variable named className

    Code:
    var className = "groupedImg";   
     $('<li><a href='+img+' class='+className+' ><img src='+thumb+' /></a></li>').appendTo('#'+secName+' ul');
    })

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Have a look at the source with firebug
    Code:
    <a class="className" href="images/Planes/01.jpg">


Bookmarks

Posting Permissions

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