Image Jumping / Image Clipping

John's Avatar

John

05 May, 2010 11:46 PM

Thanks for the work! hoping to get a little hep.

When the plugin is active there are a couple of things going on that are odd.

1) The images are not hidden, therefore you can see the images "jump" into position after the script works its magic.

2) Images in a large gallery below the fold are "clipped" when you scroll down to view them, visually they are cropped so that part of the image is not visible. A refresh will reveal the entire image.

Looks like it's quiet in here, so I hope you're able to get back to me. I can provide an example URL privately. Our client does not like his site appearing in support forums.

Cheers!

  1. Support Staff 1 Posted by Drew Wilson on 05 May, 2010 11:55 PM

    Drew Wilson's Avatar

    I would need to see your example.
    Something doesnt sound right, because the code DOES hide the image before it does it's magic.... also the other things you mentioned make me thing you are not putting your images inside containers that have defined Widths & Heights.

    From the Docs:
    "t then centers the images based on it's parent element. So if you don't wrap your image in an element at all, it will center it based on the BODY element, which would not be good. So make sure you have a container element for the image to be centered against."

    Let me know if that fixes it.

    Thanks!
    Drew

  2. 2 Posted by John Lopez on 06 May, 2010 12:04 AM

    John Lopez's Avatar

    Thanks for your prompt reply!

    I've activated the plugin and turned off caching so you can review the code.
    I meant to add that it's a WordPress site, in the event that makes a
    difference.

    Let me know when you're finished reviewing so I can comment the code out
    again.

    Cheers,
    John

    *EXAMPLE:*
     http://www.baron-wells.com/category/lookbook/

  3. 3 Posted by John Lopez on 06 May, 2010 12:09 AM

    John Lopez's Avatar

    Also, forgot to mention that the gallery generator is using definition lists
    (<dl><dt><img></dt></dl>). Perhaps that's problematic?

    Thanks again.

  4. Support Staff 4 Posted by Drew Wilson on 06 May, 2010 12:20 AM

    Drew Wilson's Avatar

    definition lists are fine...
    have you tried it without the plugin that loads the images after you scroll down? I have a feeiing that may be the problem.. that plugin may be taking the images off the page before imgCenter can grab them and do the magic.

  5. Support Staff 5 Posted by Drew Wilson on 06 May, 2010 12:20 AM

    Drew Wilson's Avatar

    for me those are the only images that are mis-aligned... all other images are fine

  6. 6 Posted by John Lopez on 06 May, 2010 12:34 AM

    John Lopez's Avatar

    Actually have tried without the "mashable" loading effect, and it suffers
    the same problem.

    I'll deactivate that now so you can have a look. I'm sure you noticed the
    images jumping into place as well, yes?

    Thanks,
    John

  7. 7 Posted by John Lopez on 06 May, 2010 12:35 AM

    John Lopez's Avatar

    Realized the caching was still on. Turned that off as well.

    Thx.

  8. Support Staff 8 Posted by Drew Wilson on 06 May, 2010 12:45 AM

    Drew Wilson's Avatar

    What browser are you using?
    It all works fine for me in Safari 4, and FF 3.6, Opera 9, and Chrome ... only in Chrome to i see a slight shift in some of the images.. which is very strange ....

  9. 9 Posted by John Lopez on 06 May, 2010 01:05 AM

    John Lopez's Avatar

    FF 3.6 Mac / Safari 4.0.4 Mac -- seeing the shift in both browsers.

  10. 10 Posted by John on 06 May, 2010 04:35 PM

    John's Avatar

    wondering if setting "visibility:hidden" or "display:none" as the default state for the images will help hide the centering. will the script bring them into view once it works if I do that?

  11. 11 Posted by John Lopez on 06 May, 2010 04:40 PM

    John Lopez's Avatar

    Would setting display:none or visibility:hidden help in this situation,
    assuming the script will bring the images into view once it runs?

    Doesn't seem you're seeing the "bump" I'm talking about, but I am seeing it
    for sure on my end. Would love to find a fix if at all possible.

  12. 12 Posted by Raúl Riera on 19 Jun, 2010 02:03 AM

    Raúl Riera's Avatar

    I am having the same problem about the "jump", the images are not hiding, they do clip correctly after being shown for a little bit overlapping the content

  13. 13 Posted by Raul Riera on 28 Jul, 2010 04:13 AM

    Raul Riera's Avatar

    No updates on this? I finally was able to setup a demo page

    http://s2.el-carabobeno.com/

    You can see the images skipping there (if you scroll quickly to the center of the page you will see the really "bad ones")

  14. 14 Posted by Raul Riera on 29 Jul, 2010 04:27 PM

    Raul Riera's Avatar

    It can be seen more clearly here (less stuff)

    http://s2.el-carabobeno.com/secciones/educacion

  15. 15 Posted by rcx.smit on 03 Apr, 2012 07:53 PM

    rcx.smit's Avatar

    Hello,

    Also at my page the pictures are not hidden while loading while there is a org_image.hide(); in the code
    http://yepcheck.com/photoswipedidier/

    (also with the photoswipe disabled there is the problem)

    Hope you can help me

    Kind regards
    Rene

  16. 16 Posted by Quiteeffido on 12 Sep, 2012 06:40 PM

    Quiteeffido's Avatar

    Hello!
    pellentesque sit amet nulla mattis gravida. Duis dictum sem.

  17. 17 Posted by John Lopez on 12 Sep, 2012 07:13 PM

    John Lopez's Avatar

    John Lopez
    323.470.2330

  18. 18 Posted by Canton on 16 Oct, 2012 03:47 PM

    Canton's Avatar

    Hey there, I fixed the image jumping issue with two steps:

    Let's say your images are 200px tall/wide and you're imgcenter cropping them down to 100x100.

    What you do is

    1) hardcode the final size into your image, for example:

    <img src="my-200-by-200.jpg" width="100" height="100">

    This will result in a squished yet correctly sized image. Then:

    2) Right before your jquery imgCenter invokation, strip off the hardcoded width and height from your images:

    `
    $(window).load(function(){

        // first remove squished width/height which was set to prevent images from jumping
        $("img").removeAttr("width")
           .removeAttr("height");
        // now use imgCenter to virtually crop and center images          
        $(".artList img").imgCenter();
    });
    

    `

    This is only helpful when you've got a whole lot of images or a slow download.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

08 Feb, 2017 08:05 AM
08 Feb, 2017 08:02 AM
08 Feb, 2017 07:56 AM
08 Feb, 2017 07:53 AM
08 Feb, 2017 07:45 AM