calling fancybox using jquery .click function

Question

I am trying to customise fancybox so that when one of the 4 images displayed on the page is clicked, this is the one that loads up in the fancybox window.

To do this I want to use the jquery .attr function to pass the image src (as a variable) to the main image holder.

My current jquery code is:

    jQuery(document).ready(function($) {

        $("a.group").click(function() {
            var image = $(this).attr("name");      
            $("#largeId").attr({ src: image});
            $("a.group").fancybox({
                      'frameWidth':966,
                      'frameHeight': 547,
                      'hideOnContentClick': false,
                   'overlayOpacity': 0.85,
                      'callbackOnShow': function() {
                                    $("#container ul#thumbnails li a").click(function(){
                                    var largePath = $(this).attr("title");
                           $("#largeId").fadeOut("fast").hide();
                                    $("#largeId").attr({ src: largePath });
                              $("#largeId").fadeIn("slow");return false;
                         });
              $("#container ul#thumbnails li a").click(function(){
              $('.active').removeClass('active');
                       $(this).addClass("active");
             });
                      }
         });

    });
});

The HTML for the main page images is:

    <ul id="images">

<li><a id="one_image" class="group" href="#hidden" title="images/1_large.jpg"><img src="Images/1.jpg" alt="MOMA NY #1" title="MOMA NY #1" /></a></li>
<li><a class="group" href="#hidden" title="images/2_large.jpg"><img src="Images/2.jpg" alt="MOMA NY #2" title="MOMA NY #2" /></a></li>
<li><a class="group" href="#hidden" title="images/3_large.jpg"><img src="Images/3.jpg" alt="MOMA NY #3" title="MOMA NY #3" /></a></li>
<li><a class="group" href="#hidden" title="images/4_large.jpg"><img src="Images/4.jpg" alt="MOMA NY #4" title="MOMA NY #4" /></a></li>

</ul>

For the Fancybox window:

<div id="main_image">

<img id="largeId" src="" alt="" title="" />

</div>

-------EDIT----------

just so you know, this mostly works if I get rid of the click function at the start, the functions within the fancybox call all work fine.

Answer 1

I think its getting overly complicated.

  jQuery(document).ready(function($) {
     $("a.group").fancybox({
                'frameWidth': 300,
                'frameHeight': 300
                });

    });

That should be all the javascript you need. Then you should move the title and the grouping onto the a tag.

<ul id="images">
    <li><a class="group" rel="group" href="images/2_large.jpg" title="MOMA NY #1"><img src="Images/3.jpg" alt="MOMA NY #1"/></a></li>
    <li><a class="group" rel="group" href="images/1_large.jpg" title="MOMA NY #2" ><img src="Images/3.jpg" alt="MOMA NY #2"/></a></li>
    <li><a class="group" rel="group" href="images/3_large.jpg" title="MOMA NY #3" ><img src="Images/3.jpg" alt="MOMA NY #3"/></a></li>
    <li><a class="group" rel="group" href="images/4_large.jpg" title="MOMA NY #4" ><img src="Images/4.jpg" alt="MOMA NY #4"/></a></li>
</ul>

Is that what you were looking for?

Answer 2

I've never used fancybox before, but from just looking at your code, I think the line that calls fancybox needs to be fixed from

$("a.group").fancybox({

to this:

$(this).fancybox({

Sorry, I haven't tested this... but I believe that was your problem.

Answer 3

Some might find this useful when you need an attribute of the link that gets clicked.

//html:
<a href="#popup" id="lnk_0">Create a new product w/ this image</a>
<div style="display:none;"><div id="popup"><h1>This is popup text.</h1></div></div>

//jquery:
$("a[href='#popup']").fancybox({
  'onStart': function(selectedArray, selectedIndex, selectedOpts)
  {
    alert(selectedOpts.orig.attr('id'));
   }
});