Changer la couleur de fond fancybox2

Question

Je suis en train de changer la couleur de fond de fancybox2 du noir au bleu, mais je ne peux pas parfois, je peux le changer, mais le menu contextuel devient transparent aussi bien, et un autre, il n'a tout simplement pas travail.

C'est ce que je l'ai essayé jusqu'à présent:

Option 1: (ne pas changer la couleur)

beforeShow: function() { 
       $(".fancybox-overlay").css({ 
        "backgroundColor": '#FFFFFF', 
        "backgroundImage": 'none' // optional if you prefer a solid color 
       }); 
      }, 

Option 2:

helpers : { 
     overlay : { 
      opacity : 0.4, 
      css : { 
       'background-color' : '#1E72B2' 
      } 
     } 
    } 

je l'ai vu utilise maintenant un image de fond, la seule façon devrait être de créer une nouvelle image de fond?

Toutes les idées que je pourrais faire mal? Merci! Guillermo.

Answer 1

JFK, j'ai essayé vos solutions, mais n'a pas fonctionné. Ce que j'ai fini par faire est de changer le fancybox_overlay.png qui est utilisé par fancybox2 pour la superposition. Bien sûr, j'ai gardé la transparence de celui-ci. Merci quand même!

Answer 2

Option 1: (fonctionne bien)

$(".fancybox").fancybox({ 
    beforeShow: function() { 
     $(".fancybox-overlay").css({ 
      "backgroundColor": "#FFFFFF", 
      "backgroundImage": 'none' // optional if you prefer a solid color 
     }); 
    } 
});​ 

Voir DEMO comme dans votre exemple

EDIT: DEMO mis à jour pour correspondre à la couleur bleue

Option 2: (fonctionne très bien aussi)

$(".fancybox").fancybox({ 
    helpers: { 
     overlay: { 
      opacity: 0.4, // this make the color transparent. set to 1 for solid color 
      css: { 
       'background': '#1E72B2' 
      } 
     } 
    } 
});​ 

Voir DEMO

... donc pas idée de ce que vous faites mal, mais là, il y a quelque chose que vous pouvez vérifier:

• vérifier la syntaxe (copier/coller des démos pour comparer)
• assurez-vous que vous avez un DOCTYPE approprié dans votre document
• assurez-vous que vous chargez tous les fichiers (vérifier les chemins) spécialement le fichier css fancybox (l'image de sprite doit être sur le même répertoire que le fichier css)
• charge une seule instance de jQuery d'abord, puis le reste fichiers js

• assurez-vous des scripts personnalisés sont dans la méthode .ready() comme:

  $(document).ready(function(){ 
      $(".fancybox").fancybox(); 
  });