Tell me more ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 2 down vote favorite

I'm trying to change the background color of a Colorbox (in which nodes are presented) based on the clicked node. See http://stackoverflow.com/questions/18173943/change-background-color-of-colorbox-using-js-based-on-node-id?noredirect=1#comment26626591_18173943

This doesn't work, although I've confirmed it working for others, and on Fiddle: http://jsfiddle.net/nevster/YSgMx/

Why doesn't this work?

The site is built on latest Zen and I've added the JavaScript code in the script.js file (inside the function that says I should put it there) and added the file in the theme .info file.

JavaScript:

$(document).ready(function () {
$(".colorbox-color").colorbox({
    onComplete: function(){
        var bg = $.colorbox.element().data('bg');
        $('#cboxWrapper').css('backgroundColor', bg);
        $('#cboxLoadedContent').css('backgroundColor', bg);
    }
});
});

I'm using Drupal 7 with Views to show the nodes, together with Colorbox and Colorbox Node.

share|improve this question
1  
Instead of applying the CSS like that why not have the css in a seperate .css file, have !important on these statements. Then simply change the class of the colour box wrappers instead, this way the colours will override anything and they are easier to edit through a .css rather than looking through javascript for values. – Daniel Waters Aug 21 at 11:35
Thank you Daniel W, but how would you propose to actually do this? Each node will have a separate color. – Daniel Holm Aug 22 at 16:31
Nodes have individual identifiers #node-1 etc, so you could use those to differentiate. I may not be quite understanding what you're trying to do here fully. As a side note, Colorbox isn't very good on Mobile devices, and can be frustrating on tablets and other touchscreen devices. I wouldn't recommend it for content. – Daniel Waters Aug 22 at 16:41
Ah. Well, I tried using "article-$nid" of the opened Colorbox, but that did not change the bg color of the whole box. – Daniel Holm Aug 22 at 16:46

This question had a bounty worth +50 reputation from Daniel Holm that ended 12 hours ago; grace period ends in 11 hours

This question has not received enough attention.

I still am unable to make this code work, and get no error messages. I really need this to work.

4 Answers

up vote 4 down vote

You shouldn't include the ready function, the latest Zen wraps your script in a custom behavior. Try putting your code directly inside the custom behavior that is already included in the script.js file.

(function ($, Drupal, window, document, undefined) {

Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {

    $(".colorbox-color").colorbox({
      onComplete: function(){
        var bg = $.colorbox.element().data('bg');
        $('#cboxWrapper').css('backgroundColor', bg);
        $('#cboxLoadedContent').css('backgroundColor', bg);
      }
    });

  }
};

})(jQuery, Drupal, this, this.document);
share|improve this answer
Thank you very much, but still no background color changed. – Daniel Holm Aug 15 at 19:49
1  
@danielholm Have you tried removing your code and just adding an alert("test") or console.log("test")? Then you can narrow it down to whether the code is running or not. Any js errors in firebug/chrome? – Patrick Ryan Aug 15 at 21:31
alert("test") works. Will try to find any JS errors using Firebug. – Daniel Holm Aug 16 at 12:49
nope. No errors or anything. I dont understand? – Daniel Holm Aug 19 at 21:23
Are you sure that all the selectors exist when the page loads? I never used colorbox, but for example, in lightbox the content only loads when you opens the lightbox. Add console.log() with the selectors you are using and see if it is defined.. – Rotem Aug 20 at 19:01
show 3 more comments
up vote 0 down vote

Instead of changing the background color on the onComplete event, try to add it on the onOpen event. Maybe the onComplete is never called because of a load error ...

$('.colorbox-color').colorbox({
    onOpen: function(){
        var bg = $.colorbox.element().data('bg');
        $('#cboxWrapper').css('backgroundColor', bg);
        $('#cboxLoadedContent').css('backgroundColor', bg);
    }
});
share|improve this answer
No change, unfortunately... – Daniel Holm Aug 22 at 16:35
up vote 0 down vote

Its unclear in your post how you are rendering the images (ie, views, display suite, etc.) so I'll give a generic (static) example for a html page or block. Also, I'll assume you're using the colorbox module to supply the library to Drupal.

  1. Using your JSFiddle example (http://jsfiddle.net/UFtrK/112/), I made a basic page with Full HTML as the text format. The only thing that differs is the classes. For example:
<a class="colorbox-color colorbox inline" data-bg="#ccf" href="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg" title="On the Ohoopee as an adult"><img src="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg"/></a>

2. In scripts.js I added the following code in between

(function ($, Drupal, window, document, undefined) {

and

})(jQuery, Drupal, this, this.document);

Drupal.behaviors.cbox = {
      attach: function (context, settings) {
        $(".colorbox-color").colorbox( {
          rel:'colorbox-color',
          onComplete: function(){
            var bg = $.colorbox.element().data('bg');
            $('#cboxWrapper').css('backgroundColor', bg);
            $('#cboxLoadedContent').css('backgroundColor', bg);
          }
        });  
      }
};

3. Go to admin/config/media/colorbox and make sure that "Enable Colorbox inline" is selected.

4. Clear your cache and give it a try!

share|improve this answer
demo of this solution at d7.dev.mindig.net/node/226 – mrP Aug 20 at 22:40
Did not help. Inline is selected, cache is clear, code is where it should be. What is this? – Daniel Holm Aug 22 at 16:37
Can you share an example of one of your linked images rendered markup? For completeness, the demo I referenced is using jQuery 1.7.1 and jQuery UI 1.10.2 with Colorbox plugin 1.4.27. – mrP Aug 24 at 18:47
up vote 0 down vote

Have you tried using context?

$('#cboxWrapper', context).css('backgroundColor', bg);

It makes sure your CSS is ran with the new markup.

Did you check that your selector actually works?

console.log($('#cboxWrapper')); // Then check your console
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.