WordPress.org

Ready to get started?Download WordPress

Forums

Lightbox Failure (13 posts)

  1. chhandakpradhan
    Member
    Posted 4 years ago #

    Hi
    I have a site up and running for the past couple of months.
    Link- http://chhandakpradhan.com

    During this time I have noticed a minor glitch in this otherwise awesome theme. If I click on one thumbnail BEFORE all the thumbnails have loaded, then the lightbox fails to load and I am taken to the individual picture. This problem however isn't there when all the thumbnail pics have appeared.

    I have noticed this in other WPFolio users as well. I am using the plugins- NextGEN Gallery (ver 1.3.1) and Lightbox 2 (Ver. 2.8.2)

    Also would appreciate if you can tell me an optimal pic size for the web. I currently upload at 828px by 550px at 300 DPI.

  2. danoprey
    Member
    Posted 4 years ago #

    I too have this problem at http://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?

  3. racer x
    Member
    Posted 4 years ago #

    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 http://tools.dynamicdrive.com/imageoptimizer/

  4. WP Voyager
    Member
    Posted 4 years ago #

    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!

  5. racer x
    Member
    Posted 4 years ago #

    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!

  6. WP Voyager
    Member
    Posted 4 years ago #

    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?

  7. Mark / t31os
    Moderator
    Posted 4 years ago #

    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.

  8. WP Voyager
    Member
    Posted 4 years ago #

    I was just looking through the Codex, and look what I found!
    http://codex.wordpress.org/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!

  9. racer x
    Member
    Posted 4 years ago #

    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.

  10. WP Voyager
    Member
    Posted 4 years ago #

    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

  11. racer x
    Member
    Posted 4 years ago #

    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!

  12. wwtfworld
    Member
    Posted 4 years ago #

    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.

  13. WP Voyager
    Member
    Posted 4 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic