views:

2217

answers:

3

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.

+3  A: 

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?

Jesta
Not really! I need the rest of the items in the Fancybox function to control the window size and to call the function to work within the modal window.
DanC
Im pretty sure you can control all of that in the GET parameters on the URL. I added an example into the above.
Jesta
A: 

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.

fudgey
A: 

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'));
   }
});
atomic1