Shadowbox loading issue

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Shadowbox loading issue

theturninggate

I have a demonstration gallery posted here.

I've found that Shadowbox requires the entire page to load before it will activate. If the user clicks and image before the page finishes loading, the image is loaded into a new page, not into the shadowbox.

Is there a way to correct this, so that images will load into the shadowbox if clicked prior to load completion?

Thanks,
theturninggate
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox loading issue

bklocek
Depends on the library you are using with it, but most libraries have a function that loads the script after the text content (after the DOM loads), but before the image files.

for jquery it looks like this:

$(document).ready(function(){
   Shadowbox.init;
});

the $(document).ready function checks to see if the DOM is loaded. If so, it initializes Shadowbox.


Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox loading issue

theturninggate
That's good information. Does anyone know how to do this using Mootools?
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox loading issue

bklocek
should be something like:

window.addEvent('domready', function() {
  // SHADOWBOX INIT CODE HERE
});

do a search for "mootools DOM ready event".
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox loading issue

theturninggate
Okay, the domready code I've found is the same as what you suggested,

window.addEvent('domready', function() {
  // CODE HERE
 
});

I've tried including it a handful of ways:

1.
                window.addEvent('domready', function() {
                window.onload = function(){

2.
                window.onload = function(){
                window.addEvent('domready', function() {

3.
                window.addEvent('domready', function() {

None of which solve the problem. Regrettably, Javascript is definitely one of those things I'm not good with. Any other suggestions?

The code I'm working with, in full, is presently:

        <script type="text/javascript"> window.addEvent('domready', function() { window.onload = function(){ var options = { assetURL: "resources/", loadingImage: "images/spiralBlack.gif", animate: true, animSequence: 'wh', displayNav: true, overlayColor: '#000000', overlayOpacity: 0.85, continuous: false, displayCounter: true, counterType: 'default', viewportPadding: 20, handleLgImages: 'resize', keysClose: ['c','q','x',27], listenOverlay: true, enableKeys: true, skin: { main: '<div id="shadowbox_overlay"></div>' + '<div id="shadowbox_container">' + '<div id="shadowbox">' + '<div id="shadowbox_title">' + '<div id="shadowbox_title_inner"></div>' + '</div>' + '<div id="shadowbox_body">' + '<div id="shadowbox_body_inner"></div>' + '<div id="shadowbox_loading"></div>' + '<div id="photoNavPrevious" style="width:40%;height:80%;position:absolute;top:10%;left:0;"><h5 class="photoNav previous"><a class="photoNav" href="#"><span>{0}</span></a></h5></div>' + '<div id="photoNavNext" style="width:40%;height:80%;position:absolute;top:10%;right:0;"><h5 class="photoNav next"><a class="photoNav" href="#"><span>{0}</span></a></h5></div>' + '</div>' + '<div id="shadowbox_toolbar">' + '<div id="shadowbox_toolbar_inner"></div>' + '</div>' + '</div>' + '</div>', loading: '<img src="{0}" alt="{1}" />', counter: '<div id="shadowbox_counter">{0}</div>', close: '<div id="shadowbox_nav_close">' + '<a href="#">{0}</a>' + '</div>', next: '<div id="shadowbox_nav_next">' + '<a href="#">{0}</a>' + '</div>', prev: '<div id="shadowbox_nav_previous">' + '<a href="#">{0}</a>' + '</div>' }, handleUnsupported: 'remove' }; Shadowbox.init(options); }; }); </script>

Thanks,
Matt
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox loading issue

bklocek
Should just be like this:
 
       <script type="text/javascript"> window.addEvent('domready', function() { var options = { assetURL: "resources/", ... }; Shadowbox.init(options); }); </script>
The "window.addEvent" function should handle the "window.onload", because it's different for different browser. The window.addEvent function probably has the code to browser sniff, and load the Shadowbox.init appropriately. I'm not really familiar with MooTools, so that's as far as I can help you.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox loading issue

theturninggate
Working like a charm now, thanks! I botched the closing on my first attempt earlier in the day, }, instead of }); . You've just made my day, bklocek. Thank ya, big-big!
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox loading issue

DFC005
In reply to this post by theturninggate
Hey!

I'm having the same problem using the default onload found on http://mjijackson.com/shadowbox.


<link rel="stylesheet" type="text/css" href="global/css_shadowbox.css">
<script type="text/javascript" src="global/js_yui-utilities.js"></script><script type="text/javascript" src="global/js_shadowbox-yui.js"></script><script type="text/javascript" src="global/js_shadowbox.js"></script><script type="text/javascript"> YAHOO.util.Event.onDOMReady(function() { Shadowbox.init(); }); </script>

If a user clicks on the link too quickly, they get the target page rather than it loading in a shadowbox.