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.

  • 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 '13 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 '13 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 '13 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 '13 at 16:46
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);
  • Thank you very much, but still no background color changed. – Daniel Holm Aug 15 '13 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 '13 at 21:31
  • alert("test") works. Will try to find any JS errors using Firebug. – Daniel Holm Aug 16 '13 at 12:49
  • nope. No errors or anything. I dont understand? – Daniel Holm Aug 19 '13 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 '13 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);
    }
});
  • No change, unfortunately... – Daniel Holm Aug 22 '13 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!

  • Did not help. Inline is selected, cache is clear, code is where it should be. What is this? – Daniel Holm Aug 22 '13 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 '13 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, privacy policy and cookie policy

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