Hello everyone, I have an issue with using .each on multiple images. I have the same page that I'm including in two other pages, but the second page's animation isn't working because the image width and height are set to 0 for some reason. Here's the js:

1. $.fn.expand = function () {
           return this.each(function () {
               var imgWidth = $(this).width(), imgHeight = $(this).height();
               console.log($(this).width() + ", "+$(this).height());
               $(this).css({'z-index' : '10'});
               $(this).addClass("hover").bind("mouseenter", function (e) {
                   $(this).stop(true,true).animate({    
                       marginTop: '-10px',
                       marginLeft: '-10px',
                       top: '50%',
                       left: '50%',
                       width: imgWidth * 1.5,
                       height: imgHeight * 1.5,
                       padding: '0px'
                   }, 200);
               }).bind("mouseleave", function (e) {
                   $(this).stop(true,true).animate({
                       marginTop: '0',
                       marginLeft: '0',
                       top: '0',
                       left: '0',
                       width: imgWidth,
                       height: imgHeight,
                       padding: '0px'
                   }, 100);
               });
           });
       }
       
       $('.preview img').expand().click(function () {
           // Set target variable for close function
           btn_content = 'imageHolder';
           // Set the image source
           $('#imageHolder img:first').attr({src: "/images/" + $(this).attr('target') + ".png"});
           // Hide the content div and show the image
           $('.s_content').hide(20, function () {
               $('#imageHolder').show(200);
           });
           contactActive = true;
       });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

And the html:

1. <ul class="preview">
       <li><img src="/images/eworkpreview.png" alt="eWork" target="ework"></li>
       <li><img src="/images/foxpreview.png" alt="Fox" target="fox"></li>
       <li><img src="/images/pacpreview.png" alt="Pacfic Theatre" target="pacific"></li>
       <li><img src="/images/toypreview.png" alt="Toyota" target="toyota"></li>
   </ul>
   
   
   
   
   

It works fine for the first include, but not for the second. Ultimately, the page that holds those images is being included twice on the same index page, but I'm hiding them on page load.

Any help would be greatly appreciated.

Thanks,

Eugene "Eggers"