Colorbox + jQuery 1.8.0

[mririgoyen]

When using jQuery 1.8.0, the "elastic" transition method fires from the top left corner of the screen the first time Colorbox is called. Every time after, it doesn't transition; it just pops up on the screen.

It also looks like the loading animation portion is completely broken, as it doesn't show up. Doing some fooling around in the web developer tools in Chrome, I can see the divs are there, however, they have a height of 0px.

[tozz]

I've also noticed this, the fade transition just breaks horribly here, only showing a ~ 20x20px box.

[jackmoore]

I've tested with 1.8 and haven't had any issues yet. Can you provide any more details on how to reproduce the problem you are having?

[jackmoore]

I didn't test old versions of colorbox, so if it isn't the most recent one let me know.

[mririgoyen]

I'm using 1.3.19 with jQuery 1.8.0. This is an "out-of-the-box" copy of Colorbox. I also have the issues on another site, same versions, with a slightly modified Colorbox script (I added the ability to apply a custom class to the colorbox).

Here are the defaults I have set:

defaults = {
         transition: "elastic",
        speed: 300,
        width: false,
        initialWidth: "600",
        innerWidth: false,
        maxWidth: false,
        height: false,
        initialHeight: "450",
        innerHeight: false,
        maxHeight: false,
        scalePhotos: true,
        scrolling: true,
        inline: false,
        html: false,
        iframe: false,
        fastIframe: true,
        photo: false,
        href: false,
        title: false,
        rel: false,
        opacity: 0.9,
        preloading: true,
        current: "image {current} of {total}",
        previous: "previous",
        next: "next",
        close: "close",
        open: false,
        returnFocus: true,
        reposition: true,
        loop: true,
        slideshow: false,
        slideshowAuto: true,
        slideshowSpeed: 2500,
        slideshowStart: "start slideshow",
        slideshowStop: "stop slideshow",
        onOpen: false,
        onLoad: false,
        onComplete: false,
        onCleanup: false,
        onClosed: false,
        overlayClose: true,     
        escKey: true,
        arrowKey: true,
        top: false,
        bottom: false,
        left: false,
        right: false,
        fixed: false,
        data: undefined
    }

And here's my call to the ColorBox:

$.colorbox({
        scrolling: false,
        overlayClose: false,
        width:'800px',
        initialWidth: 300,
        initialHeight: 100,
        opacity: 0.75,
        escKey: false,
        href: '/support/incidents/incident.phtml',
        data: {'incident': incident, 'lastview': update}
    });

[tozz]

I've tested with latest one, shouldn't be anything weird in my setup.

https://gist.github.com/3350238

[jackmoore]

Here is a demo using 1.8 with both fade and elastic transitions:
http://jsfiddle.net/XJCrM/

Do either of you experience a problem with it?

[mririgoyen]

The fiddle works correctly. I copied all the code over to my server, still worked correctly. Changed the links to the files on my server, still worked correctly. Obviously, something I'm doing on my end is causing the issue, whether it be style or script. I'm looking into it further. I apologize for the false report.

[jackmoore]

Do you happen to be using jQuery UI? I had one report of a UI user with an issue that I haven't looked into yet.

[mririgoyen]

Yes, it is jQuery UI. I was just preparing the fiddle: http://jsfiddle.net/hY4ZZ/
With the UI library included, it recreates the issue. Latest version of UI, btw. 1.8.22

[tozz]

I can confirm that jQuery UI is the trouble maker here too.

[jackmoore]

It seems like jQuery UI is modifying jQuery's animate method. In instances where the animation speed is 0, animate is supposed to set the CSS properties to their final step. When jQuery UI is added, it seems to skip that step. Found an open ticket for this exact issue: http://bugs.jquery.com/ticket/12273

Updating to jQuery-ui 1.9 beta solved the issue.

But, I went ahead and added a workaround to ColorBox. Only the jquery.colorbox.js file changed, so you can grab that from here or the minified (UglifyJS) from the zip on my site. Thanks for bringing it to my attention.

[karikatur]

First of all Colorbox is great. I hae an issue about numbers. Problem is; i have 4 pictures but it shows 5 . I want to correct {current} and {total} parameter but i cant. I can i fix this issue. It dublicate the first image. ( i mean 1 of 5 and 2 of 5 is the same picture and also i have 4 pictures at total not 5)