Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

Make the popup-image-window to


Recommended Posts



Im struggeling with the popup-image-window. I want it to always show up in the middle of the screen. No matter what resolution the customer is using.


I found a good topic that describes how to pull that of. Only problem is that the script also includes a function to show a "Loading..."-image before the image is fully loaded. I want to use this Javascript, but I don't know how to just remove that function.


Greatful for help. / Zuncan



Here is the instructions for this java script:


Many of my big images are quite large size... so I came up with this to show an "image loading" while the image was loading, so people did not begin to wonder what was going on since some of my large images are big. while I was at it, I also changed the resize function to center itself (the popup window) on the screen upon the image loading.


for a live view of what exactly this is, goto http://www.madmacgames.com/mac_game.php?products_id=29 and click on any of the thumbs (they are all pretty big).


This will be included as standard in my next update of the Dynamic MoPics module, but thought I'd share it here for everyone else as well.


1st you'll need these get 2 image files... save them as catalog/images/loading.gif and catalog/images/loaded.gif respectively:




next in popup_image.php, change the javascript in the head from:


<script language="javascript"><!--

var i=0;

function resize() {

if (navigator.appName == 'Netscape') i=40;

if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);








<script language="javascript"><!--

var i=0;

function resize() {

if (navigator.appName == 'Netscape') i=10;

if (document.images[1]) {

imgHeight = document.images[1].height+60-i;

imgWidth = document.images[1].width+30;

var height = screen.height;

var width = screen.width;

var leftpos = width / 2 - imgWidth / 2;

var toppos = height / 2 - imgHeight / 2; 

window.moveTo(leftpos, toppos);  

window.resizeTo(imgWidth, imgHeight);

document.loading.src = 'images/loaded.gif';






and finally, replace


<body onload="resize();">




<body onload="resize();">

<div align="center"><img border="0" src="images/loading.gif" width="100" height="9" name="loading" onload="window.focus()"></div>



and that is all folks... upload the 2 new images and new popup_image.php. much better popups now


Ps.. I have also included the fix for netscape that was causing images to get cut off.

So what?! Who care in a hundred years anyway?

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...