New Colorbox style and code to easily add new styles

Committed to 6-dev and 7-dev. Thanks, it looks really nice!

A very nice modern colorbox, it just jumps off the page!

@frjo, what do you think of a contribs folder for contributed styles which would automatically appear in the dropdown list?
This would save changing function colorbox_admin_settings() and function _colorbox_doheader() in the future.

hutch: Yes, that is a good idea. Do you have a patch laying around? :-).

Take the opportunity to also thanking you for helping out in the issue queue, much appreciated!

I haven't done it yet, just inside my head, but I've probably figured it out:
something like
scan colorbox/contribs folder for subdirs containing colorbox.css and add path(s) to dropdown using subdir as style name in admin_settings

In do_header add the css if selected plus a check for colorbox.js

I'll use "Stockholm Syndrome" to do it with, D6 first and if all is well I'll tackle D7 which might be trickier as dirscanning is different.

Hopefully in the next few days ;-)

Here is a patch as discussed in #4, it is on the current dev dated 27 October.
The attached tarball should be unpacked in modules/colorbox, it will create a folder 'contribs' which currently contains a folder 'stockholmsyndrome'.
This folder contains
name.txt which contains the display name of the style and is optional. The text of the display name must be on the first line.
colorbox.css which is required.
colorbox.js which is optional and will be loaded if present.
and the images of course.

I commented out the opacity setting in colorbox.css as it was preventing the override on the settings page, other than that it is all as found.

@frjo, I will leave it to you to add an explanatory note to README.txt

hutch: Thanks for taking a look at this. I think your code could be simplified by using the Drupal function file_scan_directory(). Could we not also use the "styles" subdir as now and let colorbox_get_contribs() find all styles including the default one?

http://api.drupal.org/api/drupal/includes--file.inc/function/file_scan_d...

function file_scan_directory(), why didn't I think of that?
I will attempt a rewrite, with all in styles.
Back soon

Working on this at the moment.
@frjo, do you have any objections to standardising the css filename to 'colorbox.css' and (optionally) js to 'colorbox.js' so that we will have styles/default/colorbox.css, styles/stockholmsyndrome/colorbox.css and so on. This would make it all more robust and the same as the examples.

@hutch, maybe colorbox_style.css and colorbox_style.js? Only to avoid confusion with js/colorbox.js.

@frjo, The examples use colorbox.css so the others should too otherwise we have to make an exception for the examples. However the examples do not have any js so we could use colorbox_style.js for default etc. That should avoid any accidental overwrites ;-)

Attached is a patch and tarball using colorbox.css for all styles and colorbox_style.js for default etc.

About the new style: it looks really great, but for me (tested using Chrome 8 and FireFox 4 beta), when you open a box at first time, it works great and you can switch between pictures and everything.
But you should try the following:
1) Open a Colorbox overlay, then close it by pressing Esc.
2) Repeat this procedure several times. For me, after each try the closing X on the upright corner appears slower and slower while when I reach 5 or 6 occasions, it won't ever appear again. Moreover, under Chrome, when you repeat this procedure then try to move between multiple pictures, it starts generating heavy CPU usage.

edit: maybe it's a bug in ColorBox, not in the style, I need to investigate a little bit further

fleetcommand, I can't recreate this issue in Safari 5 or Firefox 3.6. Do you get any specific errors in Firebug?

I'm not sure what causes the problem, it's interesting, since I can reproduce it with any browser including Safari 5 on our website (you can keep clicking on the pictures here), but not on the ColorPowered website where I could try out the examples.
We have the latest version of both the module and the lib... So from this point it starts not to be related to the original bug report, but if anyone has a good idea what could cause it, I'd be happy :)

Tried the link above but could not see the problem. What I did notice is that the close button in the Stockholmsyndrome style takes a long time to show, especially after opening and closing the Colorbox multiple times.

Please try out the latest 6-dev version. I have added missing "context" to the jQuery selectors in the styles JS files. This should improve the performance of the scripts.

Great, thank you :) Updated to -dev version (Dec 02), it seems to be much better now. The close button now appears as expected, and I could not kill my browser tab by reopening and/or switching between pictures multiple times.

@zoo33 and @frjo This Colorbox style is amazing!!

I have a question and perhaps a small feature request. I've got my Colorbox Stockholm syndrome working fine containing inline HTML. Its generated from a views block and I have the gallery option on.

In the bottom right, i see... "| image 1 of 3"

The thing is, the group isn't really showing "images". How can I remove this so its like the one you've got working on your screenshot. (just "| 1 of 3")

Another idea would be to allow it to use token replacement patters in a setting somewhere... eg. "| [type] # of #"

Thanks

@tribe_of_dan, Try out the 6-dev version and then go to Configuration -> Colorbox -> Styles and options -> Custom. There you can change it.

The inline and load scripts did not pick up all settings before, my mistake, but in dev that has been fixed.

Hi frjo, I tried dev but it caused "Javascript is not enable on your site" errors. Therefore I didn't get to try the changes. Do you know what could be causing this?

Closing old issues that doesn't seems to effect a lot of users.

the issue is with the cbox_complete event. Internally colorbox rebinds it every time the overlay is opened. Adding $(document).unbind('cbox_complete') @ line 14 in the colorbox_style.js file will resolve the issue. See this post for details: http://paulshapiro.livejournal.com/26604.html