I am using colorbox to open a node in a colorbox window. Once the node is themed, this is quite simple to do, just add "colorbox" to the link classes - correct??

Except any time I call colorbox more than once, it begins to crash. It works perfectly the first time. Then I click the next user's profile, and the page goes solid black instead of with an opacity, and when I close the window - if it closes at all - it stutters, and still leaves the background completely black.

In my javascript console, this is the error I see when I try to open the next window:

Uncaught TypeError: Object  has no method 'show'
launch [athletes:258]
publicMethod.init [athletes:378]
Ka [athletes:20]
c.event.handle [athletes:65]
c.event.add.h.handle.o [athletes:58]

"athletes" being the page I'm currently on, and line 58 being a link to the colorbox_load.js script. line 65 is drupa's .extend() code. Line 20 is a system css file. Lines 258 and 378 are table tags nowhere related to the colorfox functions, so I don't know what that's all about..

Interestingly, when I am using colorbox integration with images in a content type, this problem does not exist.

Comments

nils.destoop’s picture

nils.destoop CreditAttribution: nils.destoop commented

Same here, i open colorbox first time. Everything is ok. I close the colorbox, and open it again. Then following error is shown in firebug: ab.html(a.close).show is not a function

After closing, the overlay doesn't hide anymore. The screen stays black.

nils.destoop’s picture

nils.destoop CreditAttribution: nils.destoop commented

Problem for me, was a wrong url. I didn't add the iframe=true. After adding iframe=true, everything worked perfect.

dvega’s picture

dvega CreditAttribution: dvega commented

Try allowing colorbox-load in colorbox administration and somethig like this: 

<a href="'.url('node/xxx').'?width=500&height=500&iframe=true" class="colorbox-load">link</a>
jennypanighetti’s picture

jennypanighetti CreditAttribution: jennypanighetti commented

I noticed that this happened when I was trying to use jquery to alter the URL. I don't have access to the pure URL in Drupal so I was using jquery to append "?height=width=iframe" code to the URL, but colorbox does not recognize anything changed after load. I realized it's the same reason my colorbox window wasn't even opening if I tried to apply a class via jquery.

When I use colorbox on non-Drupal sites, I just attach it with live. Can Colorbox in drupal be hooked in this way too please??? It would make it much easier for when we don't have access to the URL or classes of the elements we need. Would it cause any performance issues?

netourish’s picture

netourish CreditAttribution: netourish commented

Hi, Zuuperman.

Thank you very much for posting this. This really worked for me.

Thank you,
Pradeep.

tomkrush’s picture

tomkrush CreditAttribution: tomkrush commented

Confirming that colorbox without an iframe in firefox and chrome breaks after multiple loads. Safari 4 functions correctly.

After looking into the issue I noted that the elements in the dom are failing to be removed. I'm assuming this is causing colorbox to be confused.

acgray’s picture

acgray CreditAttribution: acgray commented

bump

Adding &iframe=true works but isn't great cause adds scrollbars and an extra server hit and load time. The error in chrome is

Uncaught TypeError: Object has no method 'show'

dolly nyc’s picture

dolly nyc CreditAttribution: dolly nyc commented

@acgray--I had the same trouble with &iframe=true -- plus, same as without iframe, it still broke after the second attempt to open a colorbox link. The fix presented in http://drupal.org/node/1057418 works for me, maybe it will for you, too.

thismax’s picture

thismax CreditAttribution: thismax commented

I think I know why this is happening. When colorbox loads a page via AJAX (rather than using an iframe), it dynamically loads and runs all the JS files on that page -- including itself, assuming colorbox is enabled on the page you're loading. The error is then caused by a namespace collision within the two colorbox scripts.

thismax’s picture

thismax CreditAttribution: thismax commented

I just verified this. The culprit is jQuery's .load() function. It will load *all* the scripts on the page that's being dynamically loaded, stick them in the of the original page, run them, and then remove the references to the script. (This makes the problem especially difficult to debug, because Chrome's web inspector and Firebug can't find the original code anymore.)

So when jquery.colorbox.js exists on the page you're dynamically loading with colorbox, suddenly two copies of colorbox exist on the page at once.

I fixed it on my site by including a GET parameter whenever I am loading a page with colorbox, and then in my theme, running through all the scripts and deleting any that contain the word colorbox. It's pretty hacky, but it works:

  <?php
    // The following code is in my html.tpl.php  

    // If we are loading in a colorbox, then delete all colorbox scripts.
    // We don't want to run them twice.
    if(isset($_GET['colorbox']) && $_GET['colorbox'] == 'yes') {
      $scripts = explode('<script', $scripts);
      $newScripts = array();
      foreach($scripts as $script) {
        if(!strpos($script, 'colorbox') || strpos($script, 'jQuery.extend')) {
          $newScripts[] = $script;
        }   
      }   
      $scripts = implode('<script', $newScripts);
    }   
  
  ?>

Good luck to anyone else trying to fix this issue.

d.olaresko’s picture

d.olaresko CreditAttribution: d.olaresko commented

Has the same error. I cannot use iframe coz in my case I need fluid width and height.
Problem is not solved for me

suhailanwar’s picture

suhailanwar CreditAttribution: suhailanwar commented

thanks for the post. in my case i was not using drupal but this post helped me alot. i used

$(".iframe").colorbox({iframe:"true", width:"50%", height:"80%"});

in header script. and all my issues went off.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Status: Active » Fixed

just add "class=colorbox-load rel=iframe" to the base link in your node.tpl.php ...of course without the "" !

regards

konsul

simohell’s picture

simohell CreditAttribution: simohell commented

I am using colorbox 6.x-1.1 for images (imagecache and insert) and a specific "popup" content type.

Having a custom page template for the content excluding header, sidebars etc. the best solution for me was also just to drop all scripts from the page template '<head>'. Works as well.

Status: Fixed » Closed (fixed)

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

Daemon_Byte’s picture

Daemon_Byte CreditAttribution: Daemon_Byte commented

I took your idea but I used a hook (hook_js_alter) instead and it worked wonderfully for me. Seems to make more sense to do the processing outside of templates. Maybe the colorbox module itself could implement this hook?

function example_js_alter(&$javascript) {
if((isset($_GET['colorbox']) && $_GET['colorbox']) && !(isset($_GET['iframe']) && $_GET['iframe'])) {
foreach($javascript as $key => &$value) {
if(stripos($key, '/colorbox/') !== false) {
$value['scope'] = 'removed';
}
}
}
}

eradeepak’s picture

eradeepak CreditAttribution: eradeepak commented

"class=colorbox-load rel=iframe" this is working fine thanks to konsul

eradeepak’s picture

eradeepak CreditAttribution: eradeepak commented

"class=colorbox-load rel=iframe" this is working fine thank you konsul

akamaus’s picture

akamaus CreditAttribution: akamaus commented

I took your idea but I used a hook (hook_js_alter) instead and it worked wonderfully for me. Seems to make more sense to do the processing outside of templates. Maybe the colorbox module itself could implement this hook?

@Daemon_Byte, Brilliant idea! Have been harassed by this misbehavior for several days until stumbled upon this issue. Your code works for me. I vote too for incorporating such a functionality into colorbox. I see a potential problem with this approach though. We have redundant flags now, the class 'colorbox-load' and 'colorbox' attribute in the query string.

jrabeemer’s picture

jrabeemer CreditAttribution: jrabeemer commented

#13 worked for me!

pelicani’s picture

pelicani CreditAttribution: pelicani commented
Version: 7.x-1.0-beta2 » 7.x-2.4
Status: Closed (fixed) » Active

I think believe this issue is fixed.
We have a setup that displays a view.
The image field we have setup to rewrite as a link.
This link has the colorbox load class and the iframe del setup.
We still get multiple colorboxes on subsequent tries to open the modal.

gagoo’s picture

gagoo CreditAttribution: gagoo commented

Hi,

I think the simplest fix is to disable the load of colorbox.js in the colorbox-load target pages.

You can do this by filling the target pages path in the "Advanced settings"/"Show Colorbox on specific pages" section of admin/config/media/colorbox

Hope it will help :)

Sridar’s picture

Sridar CreditAttribution: Sridar commented
Issue summary: View changes

#22 Works here. Thank you so much.

But in my case, i have to load a webform inside a colorbox, after submitting the form i have to show the thank you page in the colorbox popup itself. Can someone help me out ??

Neslee Canil Pinto’s picture

Neslee Canil Pinto
he/him
Primary language English
CreditAttribution: Neslee Canil Pinto at Specbee commented
Status: Active » Closed (works as designed)
sivaguru_drupal’s picture

sivaguru_drupal CreditAttribution: sivaguru_drupal commented

Issue: colorbox 7.x-2.x. multiple overlay and colorbox div triggers on each click of link.
Solution: #22 works. i removed colorbox links/page which display on popup.
Thanks gagoo..