2

I'm trying to change the background color of a Colorbox (in which nodes are presented) based on the clicked node. See https://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.

4
  • 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. Aug 21, 2013 at 11:35
  • Thank you Daniel W, but how would you propose to actually do this? Each node will have a separate color. Aug 22, 2013 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. Aug 22, 2013 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. Aug 22, 2013 at 16:46

4 Answers 4

4

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);
8
  • Thank you very much, but still no background color changed. Aug 15, 2013 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? Aug 15, 2013 at 21:31
  • alert("test") works. Will try to find any JS errors using Firebug. Aug 16, 2013 at 12:49
  • nope. No errors or anything. I dont understand? Aug 19, 2013 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..
    – rreiss
    Aug 20, 2013 at 19:01
0

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);
    }
});
1
  • No change, unfortunately... Aug 22, 2013 at 16:35
0

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!

2
  • Did not help. Inline is selected, cache is clear, code is where it should be. What is this? Aug 22, 2013 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, 2013 at 18:47
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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