First, I've used colorbox on a few non-Drupal sites and it works great and I love it. Good job. I'm working on my first Drupal 6.x website and I've run into an issue. From what I can tell I have the Colorbox module installed and configured correctly. What I'm looking to do is have a text link open up an iframe colorbox window. Simple enough. But this text link is for logging in using the CAS module, so I'm not able to add the class="colorbox-load" to the tag. I didn't think this should be a problem since on my non-Drupal websites that use Colorbox I would add the following code in the tags:

$(document).ready(function(){ $("#block-menu-menu-cas-login-menu a").colorbox({width:"100%", height:"100%",scrolling:false, iframe:true}); });

The above code will add the Colorbox support to the tag located within the div id of lock-menu-menu-cas-login-menu.

How do I accomplish the same thing with the Colorbox module in a Drupal site?

Is there a simple way to verify that Colorbox is working properly in Drupal?

Thanks in advance.

Comments

bobthebuilder’s picture

bobthebuilder commented

I forgot to add that I created a node for testing and added the following html code for in it:

This is my first story. Launch <a class="colorbox-load" href="http://www.google.com?width=500&height=500&iframe=true">Google</a>.

When I view the node and click the link, no Colorbox window appears and instead I'm taken to google.com in the main window.

frjo’s picture

frjo commented

Have you installed the Colorbox plugin?

Make sure the path becomes like this:

/sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js

After that you may use the plugin manually as you are used to by adding the necessary Javascript to your theme or to a custom module.

The Colorbox module automatically integrated the Colorbox plugin with things like imagefields, views etc. Many module have also built in support for Colorbox, se the project page for that. The project page has a couple of screencasts that will explain things as well.

bobthebuilder’s picture

bobthebuilder commented

Thanks for the reply. Colorbox is not working at all. Here's my setup:

Drupal 6.20

Colorbox:
version = "6.x-1.x-dev"
core = "6.x"
project = "colorbox"
datestamp = "1305806810"

jquery_update
version = "6.x-2.x-dev"
core = "6.x"
project = "jquery_update"
datestamp = "1303258490"

image picker
version = "6.x-2.13"
core = "6.x"
project = "imagepicker"
datestamp = "1301569569"
-----------------------------------
I've enabled each of the above modules and have configured them. When I load the home page in Drupal, the following source files are included:

<link type="text/css" rel="stylesheet" media="all" href="/drupal-6.20/sites/all/modules/colorbox/styles/default/colorbox_default_style.css?V" />
  <script type="text/javascript" src="/drupal-6.20/sites/all/modules/jquery_update/replace/jquery.min.js?V"></script>
<script type="text/javascript" src="/drupal-6.20/sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js?V"></script>
<script type="text/javascript" src="/drupal-6.20/sites/all/modules/colorbox/js/colorbox.js?V"></script>
<script type="text/javascript" src="/drupal-6.20/sites/all/modules/colorbox/styles/default/colorbox_default_style.js?V"></script>
<script type="text/javascript" src="/drupal-6.20/sites/all/modules/colorbox/js/colorbox_load.js?V"></script>
<script type="text/javascript" src="/drupal-6.20/sites/all/modules/colorbox/js/colorbox_login.js?V"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/drupal-6.20/", "colorbox": { "transition": "elastic", "speed": 350, "opacity": "0.85", "slideshow": false, "slideshowAuto": false, "slideshowSpeed": 2500, "slideshowStart": "", "slideshowStop": "", "current": "{current} of {total}", "previous": "« Prev", "next": "Next »", "close": "Close", "overlayClose": true, "maxWidth": "100%", "maxHeight": "100%" } });
//--><!]]>
</script>

So as far as I can tell everything is loading in correctly. However, when I try to edit a story there's a link for the Image Picker named "Rum Image Picker" and when I hover over the text it's linked to:

https://www.mysite.com/drupal-6.20/imagepicker?width=500px&height=500&iframe=true

But when I click the link, it simply goes to a new page and not a Colorbox window as it should. And I do have the plugin installed in the following directory (when I visit the Colorbox configuration page it does not report any errors):

/sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js

Any help would be appreciated.

frjo’s picture

frjo commented

Can you send a link to your page?

bobthebuilder’s picture

bobthebuilder commented

I'm not able to send you a link to the page since I currently have the site behind a company's firewall. When I try to see what the problem is using Firebug, it reports an error of "settings.colorbox is undefined" and below that error in green text it says "slideshow:settings.colorbox.slideshow,". So I did a search for that error and came across the following:

http://drupal.org/node/1162502

So I'm not sure where to go from here....

mordek’s picture

mordek commented

You are using latest dev version of colorbox?

1. Find the file:
/sites/all/modules/colorbox/js/colorbox_inline.js

2. At line 7 there is:
var settings = Drupal.settings.colorbox;

Should be:
var settings = Drupal.settings;

3. Save, rebuild cache and check.

bobthebuilder’s picture

bobthebuilder commented

That fixed the problem, thanks. So now the question becomes, is this just a temporary fix or will be included in the next update to the Colorbox module?

greenskunk’s picture

greenskunk
Location Great Valley, NY
commented

Great job @mordek ! Thanks for the fix

frjo’s picture

frjo commented
Category: support » bug
Status: Active » Fixed

I have now committed a fix to colorbox_inline.js for this. I had already done it for colorbox_load.js but managed to miss that the same problem was incolorbox_inline.js.

This come from a bad backport from D7 by myself, sorry about that.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.