jQuery animate undefining another function?

jQuery animate undefining another function?

I have a function that takes thumbnails and displays a larger version of them inside a div when clicked. Some of these photos have a 16:9 aspect ratio while others have a 3:2. To compensate a wrote a function that adds padding to the top of the widescreen photos in order to have a letterbox feel inside the div they are loaded in. This works fine when I use the .css method to render the padding, but when I try to use .animate to give it a little style, the function that controls the gallery returns as undefined.

This is the gallery function that goes undefined when I use .animate:

  1.     function gallery(picid, picnum){
  2.      var ext = 'jpg';
  3.      var fullSize = 'imgs/photos/'+picid+'_large.'+ext;
  4.      $('#largeimg').attr("src", fullSize);
  5.      $('#lightboxlink').attr({
  6.      href: fullSize ,
  7.      rel: 'lightbox' ,
  8.      title: imgdesc[picid]['caption']});
  9.  
  10.      $("#lightboxlink").live('click', function(e){
  11.        $(this).filter(':not(.fb)').lightBox({
  12.        containerResizeSpeed: 900,
  13.        imageLoading: 'imgs/lightbox-ico-loading.gif',
  14.        imageBtnPrev: 'imgs/lightbox-btn-prev.gif',
  15.        imageBtnNext: 'imgs/ligtbox-btn-next.gif',
  16.        fixedNavigation: true,
  17.         txtOf : 'This is a caption'
  18.      }).addClass('fb');
  19.      $(this).triggerHandler('click');
  20.      e.preventDefault();
  21.     });
  22.      return false;
  23.     }

And here is the script which adds the padding if the image is widescreen.

  1.     $(document).ready(function(){
  2.     $("#photorow1 a").click(function(){
  3.      if($(this).hasClass('wide')){
  4.       $('#largeimg').css('padding-top' , '5%');
  5.      }
  6.      else{
  7.        $('#largeimg').css('padding-top' , '0');
  8.       }
  9.     });
  10.      });

Here is the HTML I'm attempting to animate


  1.     <div id="photolarge">
  2.        <a id="lightboxlink" href="#"><img id="largeimg" /></a>
  3.     </div>
  4.             <div id="phototable">
  5.                 <ul id="photorow1">
  6.                     <li><a class="wide" onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
  7.                 </ul>
  8.             </div> 


Edited for script mistake.

Any help would be greatly appreciated!!