Position of image in the centre of window by javascript - php

Question

I'm trying to made made zoom preview image. It's almost work but I need to show it in the centre of my window by Y and move left right with cursor. Now my large image move in X and Y. How to fixed it? I understand that I have to change e.pageY but for what?
this.product_img_link = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
/* END CONFIG */
$("a.product_img_link").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='product_img_link'><img src='"+ this.rel +"' ' alt='Image preview' /> "+ c +"</p>");
$("#product_img_link")
.css("top",(e.pageY -100) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#product_img_link").remove();
});
$("a.product_img_link").mousemove(function(e){
$("#product_img_link")
.css("left",(e.pageX + yOffset) + "px");
});
};
$(document).ready(function(){
product_img_link();
});
And this is my template:
<script type="text/javascript" src="/modules/productimage/js/zoomi.js"></script>
<link media="all" type="text/css" rel="stylesheet" href="/modules/productimage/css/product_zoom.css">
{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clear">
{foreach from=$products item=product name=products}
<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
<div class="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<p class="compare">
<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} />
<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
</p>
{/if}
</div>
<div class="center_block">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" rel="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="gallery thumbnail" /></a>

Answer 1

If you want to find the center "y" point for the window, using jQuery:
$(window).height() / 2
This will find the height of the window and divide by two to find the center.
You could replace "e.pageY" with this, however the image will still appear a bit off-center.
To fully center it, you will also want to adjust the image's "y" position up a bit so that the center point of the image is at the center point of the window. So, we can do something similar to the paragraph holding the image to find its center point, leading us to code that looks like this:
($(window).height() / 2) - ($('#product_img_link').height() / 2)
...making your full jQuery css statement look like this:
$("#product_img_link")
.css("top",( ($(window).height() / 2) - ($('#product_img_link').height() / 2) ) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");