Centering Loading / Closing Shadowbox on IMG click

[blakerblaker]

I have two minor/major problems with shadowbox that I can't solve...

1. I can't figure out how to center the loading.gif image so that it remains in the center of the page at all times (and doesn't move around all crazily to the top left corner)

2. Most other lightbox-like scripts make it so when the image is clicked it fades out (instead of having to click the background or "close" button)... is there any way I can do this with shadow box?

Any help would be much appreciated.

[Wizzud]

1. Cant do (without changing the skin and the code). Changing just the css for the img and span will centre it horizontally, but not vertically; it can be offset from the top but if the height of the shadowbox window changes then the loading will move up/down accordingly.
2. Yes. Example (using mootools)...
    $('shadowbox_body_inner').addEvent('click', function(e){
        new Event(e).stop();
        Shadowbox.close();
      });
BUT don't use with handleLgImages set to 'drag', or releasing the drag will close shadowbox!
Also, this works for images, not necessarily for other types of media (you wouldn't want to do it for iframed pages, for example).

[blakerblaker]

Thanks, but it's not working... is there anything else I should know? Firefox is giving the error....
$("shaddowbox_body_inner") has no properties

thanks again.

[Wizzud]

try using the correct spelling of shadowbox_body_inner (ie. 'shadowbox...' not 'shaddowbox...').
Oh, and make sure it comes after Shadowbox_init(); !

[blakerblaker]

Yeah I've been trying just that, but still no tomato... I'll continue to play with it, but you can have a look at the site w/ the problemo here

[Wizzud]

Everything needs to go inside the 'onload' or 'DOMready' function.
You currently have the window.onload set to run just the Shadowbox.init function. The code to add the click event to the body inner would not wait for the document to be loaded, so it would fail because the shadowbox had not been initialised, hence no body inner would exist to attach the event to.

Try using this instead of your current inline script...

window.addEvent('domready', function(){
  Shadowbox.init();
  $('shadowbox_body_inner').addEvent('click', function(e){
    new Event(e).stop();
    Shadowbox.close();
  });
});

If you really want to stick with the window.onload, the it's...

window.onload = function(){
  Shadowbox.init();
  $('shadowbox_body_inner').addEvent('click', function(e){
    new Event(e).stop();
    Shadowbox.close();
  });
};

[blakerblaker]

perrfect... thanks soo much!

[Illunion]

Howdy,

I added the exact code in my header, but all it does is disable the shadowbox entirely.
Are tools like MooTools or jQuery a must to make this work? If not, please explain to me what I'm doing wrong.

Thanks!