scaling rollover image in JQuery

scaling rollover image in JQuery

Hi Guys,

Newbie here!

I'm currently working on a project, which requires a similar effect to the gallery rollover of what is shown here for Spry:
http://labs.adobe.com/technologies/spry/demos/gallery/

From what I have gathered from other forums, the best approach is to create a placeholder which is populated with the content that the user rolls over (ie the image), and then the placeholder gets positioned over the image, and scales up.

The HTML code is:
<div id="hoverPlaceholder">
         <a href="##" id="linkRollover"><img src="/_images/mag/hortweek.jpg" alt="" id="imageRollover" /></a>
         <div id="promoArea"></div>
      </div>
      <div class="row">
         <div class="mag">
            <a href="/magazine/page1.html" class="magazineLink" id="holder"><img src="/_images/mag/event.jpg" alt="" class="magazineImage" /></a>
            <p><a href="##">Event</a> <span>from <span class="price">&##163;20.45</span></span></p>
         </div>
         
         <div class="mag">
            <a href="/magazine/page2.html" class="magazineLink"><img src="/_images/mag/prweek.jpg" alt="" class="magazineImage" /></a>
            <p><a href="##">PR Week</a> <span>from <span class="price">&##163;20.45</span></span></p>
         </div>
</div>

The JQUERY code I have so far is:

$(document).ready(function() {
// code for positioning hover element over magazine cover
   $(".magazineImage").mouseover (function (element) {
      
// creates variables for getting position and coordinates of magazine cover
      
      var magPos = $(this).offset();
      var leftPos = magPos.left;
      var topPos = magPos.top + "px";
      
      // dimensions for scaled increase of 5%
      var scaleWidth = $(this).width()*1.05;
      var scaleHeight = $(this).height()*1.05;
      
      var origWidth = $(".mag img").width();
      var origHeight = $(".mag img").height();
      
      // create offset for position of rollover
      var offset = "-" + ((scaleWidth - origWidth)/2) + "px";
      
      var leftPosition = (leftPos - offset) + "px";
      
      
      // positions placeholder over magazine cover with absolute positioning
      $("#hoverPlaceholder").css(
         {
            left: leftPos,
            top: topPos,
            position: "absolute",
            zIndex: "5000"
         }
      );
      
      $("#hoverPlaceholder").effect("size", { to: {width:scaleWidth, height:scaleHeight} }, 200);
      
      
   });
   
   $("#hoverPlaceholder").mouseout (function (element) {
      //alert(element);
      var origWidth = $(".mag img").width();
      var origHeight = $(".mag img").height();
      
      
      $(this).hide("size", {to: {width:144, height:197}}, 200);
      
   });
});


The problem I have is that I cannot find a way to centre the placeholder over the image, as the positioning is based on the coordinates of the image. Once the resize is set, the placeholder grows, but in relation to the coordinates given.

I've also tried the scale method, but came across a few buggy problems, which caused me to use size instead.

Any help would be great, and any questions on what I'm trying to achieve (in case I've confused you) would be great too!