Hey all,
I’ve created a little image upload feature for my website, where all images for my current page are preloaded into a JS array of image objects. I resolved my issues for resizing the images according to maximum x,y values, however, I can’t seem to get the images to center.
[B]HTML
<div id=”image_window”><a href=”media.php”><img src=””></a></div>
<a onclick=”prev( );”>prev</a>
<a onclick=”next( );”>next</a>
[B]Javscript
function next_image( )
{
image_current = ( image_current == image_total-1) ? 0 : image_current+1;
image_window.firstChild.firstChild.width = image_array[image_current][3];
image_window.firstChild.firstChild.height = image_array[image_current][4];
image_window.firstChild.firstChild.src = image_array[image_current][0].src;
}
function prev_image( )
{
image_current = ( image_current == 0) ? image_total-1 : image_current-1;
image_window.firstChild.firstChild.width = image_array[image_current][3];
image_window.firstChild.firstChild.height = image_array[image_current][4];
image_window.firstChild.firstChild.src = image_array[image_current][0].src;
}
[B]CSS
#image_window
{
width: 315px;
height: 280px;
text-align: center;
vertical-align: middle;
}
Image_current and image_total are obvious globals. The image_window is a global referencing the div object and image_array contains the src @ [current][0], x value @[current][3], and y value @[current][4].
I have tried a lot of ways, but haven’t found one yet to center the images in the div. Does anyone have any ideas or advice?
-matt