Photos not rendering in the colorbox when I create an image style via a custom module for a gallery that I made with a view. I am using this code in my module:

function imagestyles_image_default_styles() {
  $styles = array();

  $styles['colorbox'] = array(
    'effects' => array(
      array(
        'name' => 'image_scale',
        'data' => array('width' => 600, 'height' => 600, 'upscale' => 0),
        'weight' => 0,
      ),
    )
  );

  return $styles;
}
 

Photo only renders when the "none (original image)" is selected for the colorbox image style selector in the view. Instead of the image I am getting some machine code(?)...see attached photo.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ahsipila’s picture

Similar issue: Colorbox renders the first image, sometimes the first 3 but then it hangs the browser, and maybe after a period returns with similar picture as in original issue submission.

No special code, just using Views.

I did reload colorbox module and the library, no help.

Problem did not appear on development at localhost, but in the hosted server installation this appeared.

dddave’s picture

Assigned: rabellamy » Unassigned
Category: support » bug

I am casually setting this to bug report as I am now the third person encountering this.
This happens to me on an live install where for some content types colorbox works perfectly fine but on all uploads with pixgather colorbox breaks down (http://drupal.org/project/PixGather).
Example: http://fromwaydowntown.de/de/content/pixgather-photo-uploaded-mo-0311201...

I am currently not able to track this down or recreate. Perhaps I'll have some more time tonight. I tried all sorts of combinations regarding which presets I use btw. All result in the same mess. So far firebug's console hasn't tracked an error.

Server runs PHP 5.3.17

dddave’s picture

Category: bug » support

Ok, new clue: Are your pics saved with a proper file extension?

rabellamy’s picture

What would be the proper file extension?

dddave’s picture

Anything that lets colorbox "know" that the file is an image. Most likely .jpg or .gif or sth like that.

ahsipila’s picture

Let me correct myself here - on localhost the setting was: "Colorbox image style: Original image" - in the case where the error occurred I had set the style: large.

This seems to be common on mine and rabellamy's finding.

Also I am using Panels to position the view in question.

Note that this now works with the setting "Colorbox image style: Original image"

Regards,

dddave’s picture

For the record: My case is fixed. PixGather stored the images without a file-extension indicating that it was in fact an image and Colorbox choked because of that.

rabellamy’s picture

The problem occurs when I try to use an image style other than "Original image".

rabellamy’s picture

Category: support » bug
Priority: Normal » Critical

Could this be a bug?

frjo’s picture

Does you image style work with the core image formatter?

Have you tested with an image style you create via the UI?

meridiandigital’s picture

I can confirm that there seem to be issues between Colorbox and Colorbox Node that result in this sort of behavior. Enabling Colorbox Node causes Colorbox image formatting within nodes to fail.

rabellamy’s picture

A Colorbox image only works 100% of the time when the Colorbox image style "None (original image)" is selected. When i use any other style it works about a third of the time. The problem first occurred when image styles were created via the UI.

clcl’s picture

I have the same issue. I get some weird characters (showing me garbage data) and errors about executing the script. Always pointing in this direction and saying that the internetsite could not find the item where you are asking for (see attach):
misc/jquery.js?v=1.4.4:105
sites/all/modules/colorbox/styles/default/colorbox_style.js?mk8byz:9
misc/jquery.js?v=1.4.4:104

misc/jquery.once.js?v=1.2:53
misc/jquery.js?v=1.4.4:105
sites/all/modules/colorbox/styles/default/colorbox_style.js?mk8byz:7

misc/jquery.js?v=1.4.4:23
sites/all/modules/colorbox/styles/default/colorbox_style.js?mk8byz:9
misc/jquery.js?v=1.4.4:104
sites/all/modules/colorbox/styles/default/colorbox_style.js?mk8byz:9

There are no logfiles or warnings for this error in the logfiles.

This errors happens using colorbox image style settings display to large.
The problem disapear completely when using the original image. The original image has .png extension.
Is it possible that the colorbox can not upload because the module or jquery script does not read the .png extension or read the image without the extension?

sunilkumarpk’s picture

I also had the similar Issue and as user dddave suggested I found a setting in the jquery.colorbox.js file called "photo" Making this to true will fix this Issue.(This change is in the jquery library side not in the module).

Setting the value as true may lead to Issues when an unsupported file is rendered in colorbox. Also I know altering js file is not the solution and I will try to come up with some permanent solution.

The reason which I realized is the image style url will be always different as it has some token at the end of the file. The library is not recognizing this as an image some times, this is why user rabellamy is able to see the proper colorbox image if it is set to None(original image). As I said I will try to come up with some changes in the module level for this.

frjo’s picture

Category: bug » support
monetxxx’s picture

Hi all!

I'm having the same issue, photos are not rendering correctly all the time.
It works OK most of the time but for some reasons sometimes it fails randomly (it does not have to do with file naming, etc).

I've checked all the possible issues, I've also changed the js to "photo=true"... Still have the same issue.

Could you please help!? I'm a bit lost here!

Thanks in advance!

Tom76’s picture

I was having the same problem. As a workaround, I made changes in jquery.colorbox-min.js and jquery.colorbox.js. Changed photo:false to photo:true and photo:!1 to photo:!0. Cleared the caches, and the issue was over.

Wappie08’s picture

Version: 7.x-2.3 » 7.x-2.4
Category: support » bug

Hi frjo,

think this is really a bug!

- using only views, no custom code
- just updated from colorbox 1.3 to 2.4 (and changed jquery.colorbox-min.js location one dir up), but problem was allready there (that was actually the reason to update!)
- like #1 problem did not appear on development at localhost, but in the hosted server installation this appeared!
- problem seems quite random: e.g. in a slideshow with 9 pics pic 3 and 7 are not working when you start at 1 and keep pressing right. But when starting at pic 3 it works and keeps working. Sometimes other pictures drop out. Also the left-right buttons keep disappearing (also at pics that get loaded right).
- problem also persists when using original image style for colorbox display
- #18 does not work for me
- file names do not seem to be te problem, got some standard IMG_00XX.jpg's and happens randomly to them too
- although the colorbox is sometimes empty it does have the right dimensions.
- actually I see cBoxPhoto img class with the right img in it in my inspector but it isn't displayed.

see smit wester man (dot) nl/projecten/zep-leisure-park (please remove spaces).

dolly nyc’s picture

@wappie08, @ahsipila

--You might want to compare PHP versions on your local vs. live server. are they the same?

--You might want to compare which (if any) non-colorbox scripts are running on production that may not be running on local. i suspect it is a different .js that is loading in the head and constantly refreshing that may be conflicting with the colorbox based on what i see in chrome inspector when looking at wappie08's site

re: #14, #17, #18: just to reiterate what was mentioned above somewhere: making changes to the library jquery.colorbox.js code is NOT the best solution because if you update the colorbox library, it will overwrite any changes you have made.

if you're using the "Aggregate Javascript" option then you might want to turn that off, see https://drupal.org/node/1063970, although frjo was unable to reproduce that particular problem as described in that issue.

Wappie08’s picture

@dolly nyc

thanks a lot! I see an error in the markermanager.js which accompanies the getlocations module. Also the views_slideshow,js could be potential harmful (there is no slideshow on the page so wonder why it get's loaded anyway).

Will look some deeper into the subject in the weekend.

josetm’s picture

I get the same behavior that @rabellamy, when Colorbox try to load some style image just render the same that you seen in a text viewer if you try to open a image whith it, but if I choose Colorbox work fine. Cheking "sites/default/files/*" I could see that styles image where'nt created when Colorbox was called.

duncan.moo’s picture

Same issue here, I have tried the suggestion of changing photo:false to photo:true but that did nothing.

As with @josetm the image file for the style does not exist before I click on the colorbox link. Below is not a solution but just how the error occurs for me:

  1. Set colorbox display for an image using a style other than original
  2. Add image to content and view node (image style is not in files)
  3. Click on colorbox link for image (garbage displayed)
  4. Refresh node in browser and now Click on colorbox link for image (NO garbage displayed)

SOLUTION:

It would be great if Colorbox did this check when a node is loaded but here is my solution (in template.php):

<?php
function _helper_image_style_exists($style, $src) {
	$image_style = image_style_load($style, $src);
	
	if(empty($image_style)) {
		return false;
	}
	
	//Check if image style image has been created yet
	$dest = image_style_path($style, $src);
	if(!file_exists($dest)) {
		// Create image from image style
		image_style_create_derivative($image_style, $src, $dest);
	}
	
	return $dest;
}
?>

(credit to zznq on SE)
Then preprocess fields that are images and have a colorbox formatter

<?php
function edrr_preprocess_field(&$variables) {
	
	if ($variables['element']['#field_type'] == 'image') { // this is an image field
		
		foreach($variables['items'] as $delta => $item){
			
			if($item['#theme'] == 'colorbox_image_formatter'){ // it is colorbox
				
				// use the helper function above
				_helper_image_style_exists($item['#display_settings']['colorbox_image_style'], $item['#item']['uri']);
				
			}
			
		}
		
	}
}
?>
mvonfrie’s picture

Issue summary: View changes
FileSize
7.43 KB

I have the same issue, for me sometimes it works and sometimes not. But with the help of http://www.telerik.com/fiddler HTTP debugging proxy I found out that is not really random as reported in #1928496-17: Photos not rendering in colorbox. From these images exactly two have been displayed as garbarge, number 2 and 3.

Fiddler Log of images loaded by Colorbox

But as you can see from the urls number 7 is the same image file as 2 and 5 as 3, but they were displayed correctly. So it seems that Colorbox doesn't work without clean urls. If the image url is part of the query and not of the path Colorbox cannot recognize the file extension and extract / identify the mime type and thinks it will be a plain text resource. Because the garbage is exactly what you see when you open the image file with vi, nano, notepad or any other text editor.

X2M’s picture

Hello

I have a similar issue. I just followed this video which in fact just show how to install the module, its script, add & parameter content type, then create a content.
In my node, I have 4 pictures displayed in thumbnail 100x100. When I click on one of them, I have the "inside" of the jpg or png file, like monetxxx's screenshot instead of the 480x480 rendution of the picture.

I first I believed it was all the time, but it is not.

Any idea ?
My config is : last WAMP + last Drupal (1 week ago) + last colorbox (+script+libraries API 2)

Thanks in advance for your help.

ximx’s picture

I had the same problem but I'd fixed it uploading the thumbnails with IMCE in the directoty where they are linked: /sites/default/files/styles/"your style"/public/

I think it isn't the best way for the site's maintenance. I would appreciate if s.o. knows a better way.

mattwhelan’s picture

I think mvonfrie's explanation (comment #24) is the correct one.

In my case, I did not have Apache's mod_rewrite module enabled on my local server when installing Drupal, so the clean URLs setting was disabled by default.

After configuring an image field to use Colorbox, any images shown in the Colorbox overlay were rendered as text. Seemed a little random, as the first and second images rendered correctly from time to time, but by the third image and beyond they were always rendered as text (i.e. gibberish characters).

I enabled mod_rewrite in Apache2, restarted the server, enabled the clean URLs setting in Drupal, and the issue was resolved.

frjo’s picture

Status: Active » Closed (outdated)