strange colorbox issue [solved]

registered · Site Admin Joined: Aug 22, 2007 Posts: 1775

I have written a little function to open a image in a colorbox with using a little counter, to count the views of a image. Sometimes the colorbox crashed completely, the colorbox content was not displayed and sometimes i get a error in the firebug console like this: "Image corrupt or truncated: ... "

But the content and the image in the link that should open as colorbox content was loaded, when i have tried to open it without the colorbox call. I have changed the image, with the same and with another file-extension to close out a damaged file. But the issue exists also.

The strange thing on this is, it exists only sometimes and not ever. Next stranger is, if i'm loading the image directly in the colobox without the function, then it works without a problem.

It seems this not a browser issue, because i get it on chrome, firefox and IE9.

Code:

   $cboxjs = '<script type="text/javascript">' . PHP_EOL


         . '$(document).ready(function() {' . PHP_EOL


         . '   $(\'.thumbcbox\').colorbox({opacity:0.50, maxWidth:"1040px"});' . PHP_EOL


         . '});' . PHP_EOL


         . '</script>' . PHP_EOL;


   addJSToBody($cboxjs,'inline');

Posted: Mon Mar 18, 2013 2:08 am

Read this neralex:

http://code.google.com/p/fbug/issues/detail?id=4291

Posted: Mon Mar 18, 2013 2:53 am

Thanks, but in my issue is not the firebug the problem or the favicon. It seems is an colorbox issue. The error-message from the firebug is only a result of them.

I will try it with the lightbox2. Maybe it works with a other plugin.

Posted: Mon Mar 18, 2013 3:27 am

Ok... i thought the maxWidth attribute inside the colobox call was the problem. But i get the same error again.

Posted: Mon Mar 18, 2013 3:50 am

Theres more to read in the comments neralex.
For example the PNG extension you show me in the console.
You can get errors couse of that aswell.Could you try to rename to .png instead of .PNG , and are you sure that the used png isnt a renamed extension from another image type?

Posted: Mon Mar 18, 2013 4:31 am

Yes i have it readed all and i have it tried with different file-extensions but i get the error again. The problem is the crashing colorbox how you can see it in my image. After some tests it seems its really a problem of the colorbox.

Posted: Mon Mar 18, 2013 9:54 am

After a a big tour of try & error, now i can see again the difference between client- and server-side Smile

The colorbox can catch html content only if all of them loaded in the browser cache. If i'm trying now to work with maxWidth and a html-content in the colorbox, then the colorbox can't catch the data of a not-loaded html-content and i must calculate the image-data before i can set the width and height values for the colorbox call.

So i have written the colorbox call as onclick into the a href link to my function. After that i have calculated the ratio. If now my file is bigger than 1000px, then i get the correct height value. The resize check was my final goal, to make sure to open the colorbox with a max width value and the correct ratio.

http://stackoverflow.com/questions/4405675/how-to-call-jquery-colorbox-with-javascript-onclick-event-instead-of-a-link

Posted: Mon Mar 18, 2013 10:55 am

Not sure if you got this working, or if this will suit your needs, but I would look at using the callback features of colorbox if you need to execute scripting at certain points of the colorbox process.

Code:




$(document).ready(function() {


   $(".myclass").colorbox({


      html:'<strong>hi there</strong>',


      title: "The Colorbox Title",


      onOpen:function(){


         // Callback that fires right before ColorBox begins to open.


      },


      onLoad:function(){


         // Callback that fires right before attempting to load the target content.


      },


      onComplete:function(){


         // Callback that fires right after loaded content is displayed.


      },


      onCleanup:function(){


         // Callback that fires at the start of the close process


      },


      onClosed:function(){


         // Callback that fires once ColorBox is closed


      },


      width: "800px",


      height: "400px"


   });





});

Posted: Mon Mar 18, 2013 12:25 pm

Hey spasticdonkey, thank you!

But i must check and calculate the width and height value for every id in a php while loop. So i need more as one colorbox call. That was the reason to build is as onclick solution. If i'm using your suggestion, then i have a lot of colorbox functions.