Lightbox Failure

I too have this problem at https://www.johnricharchitects.com. It’s not with thumbnails, but if you click the image before clicking ‘next’ or ‘previous’ then it just opens the image as with the above poster.

Anyone have any ideas?

jQuery is normally set up to execute functions after the page loads completely. Therefore, anything clicked before the page has loaded will just send a user to the image file alone.

You don’t need to upload at 300 dpi! That is way too big for the web. 72px is fine. Also, make sure you optimize those images as well using photoshop, gimp, or online such as https://tools.dynamicdrive.com/imageoptimizer/

I have not noticed this problem prior to reading this thread. But when I tested it, sure enough, it goes to the image itself before the page is fully loaded. Gallery
Fortunately, my pictures are small enough to have a short load time, but there will be many more in the future.

racer x, you mentioned that jQuery is set up to execute any functions after the page is finished loading. Is there any way to set javascript or jQuery to execute anyway? (Maybe telling the Javascript file to load first somehow?)
Anyone know? I myself am no javascript expert.

Any help would be much appreciated!

That is just the nature of jQuery.

jQuery uses what is called the document object model(DOM).

This DOM is like a road map of any web page. jQuery accesses certain things on your page using this road map. It says “I want to find the image inside the third paragraph and change it”. (for example)

If the page hasn’t loaded, the road map does not exist, therefore any actions (like trying to find that third paragraph in the example) that take place before the page loads will simply not allow jQuery to do its’ thing. It has no directions to that paragraph yet.

Much the same way that you couldn’t just start driving aimlessly toward someplace you have never been hoping you were going in the right direction until your GPS kicked in half hour later. You’d like to know “before” you started driving which direction to go.

Hope my goofy explanation helps!

Well, is there any way to deactivate the link until the page loads?

I don’t much like the thought of my users encountering the image itself without the javascript viewer. It takes even longer to load each individual picture, and is more of a pain for the person viewing them.

Should there be a way to avoid linking to the un-enhanced image at all?

Add style="display:none" to your link/element, then add a line into the jQuery to update it when the page has loaded, it’ll be invisible up until the point jQuery changes the display (after page load)..

Can’t give an example because i don’t use any of the plugins mentioned, but that would be my suggestion nonetheless.

I was just looking through the Codex, and look what I found!
https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers
Apparently, there is some kind of way to tell jQuery to execute certain functions before the DOM ready event.

@chhandakpradhan: I haven’t seen you post in a while. If you are sill interested in this topic, you might consider shooting an email to the developers of NGG and tell them about this problem and include this link to see if it is relevant.

I really hope to see this thing resolved!

I hate to say it, but I don’t think that will fix the problem. Just because you are forcing the code to execute doesn’t meant it will find images that aren’t even loaded on the page yet.

If you understand jQuery, I would use t310s_ method and just hide those images or not make them clickable until they are loaded.

Bummer.
Oh well, I figured it was at least worth a try.

@chhandakpradhan: Amendment. If you are still interested, NGG might want to include a feature that would automatically make the images unable to be clicked until the page has loaded. Similar resolution, different fix

Thank you, racer x, for all your knowledgeable input!

–MindBlender 3D

You’re welcome. Hey, anything is worth a try!

If you can’t alter the jQuery or get these images to not be clicked early you can still do a few things to try to cut back on users getting mixed results.

1. Make SURE the images are properly optimized! I have seen many an image at 300k+ when those could be 30k!

2. Place text over the images that instructs the user that there are multiple images loading and to be patient.

3. I think NGG has a flash display option(maybe just for slideshows?). I don’t remember if it pre-loads all images though.

4. If you have many images for one page, break them up into several sub-pages(albums) with less images to load on each page.

Best of luck!

yep… i JUST noticed this maybe 2 weeks ago? i thought i was going nuts and ignored it because i’m in the process of trying to find a new theme anyway…

however, it’s still a pain becuz i JUST figured out how to fully use the plugin. that part about smaller pics will help, but do i have to change each pic? anyone know of a better slideshow plugin for pictures that doesn’t require a lot of CSS editing, as i’m teaching myself and i haven’t gotten that far yet…?

;o)

site: Diva’s World

post where lightbox issues noticed here.

As noted in the posts above, the problem is pretty much linked to the nature and capabilities of Javascript. Any other slideshow/gallery plugin will have exactly the same problem. Unless another plugin has the link deactivation method (or similar), the limitation will be the same.

Bottom line: if there is another plugin out there, and you want that feature more than the terrific gallery management found in NGG, you can go with that. On the other hand, if you find the long list of good features NGG offers, you might want to petition the developer to add in that function.