2010-11-02 15 views
0

Je construis une page qui a deux Colorbox.Comment spécifier 2 positions différentes pour Colorbox sur la même page?

En ce moment, je suis parvenu à faire de Colorbox en général apparaître dans une position fixe en réglant le fichier colorbox.css:

#colorbox, #cboxOverlay {position: absolute; en haut: 0; gauche: 0; indice z: 9999; débordement: caché;} #cboxWrapper {position: fixed; marge: 0 auto; indice z: 9999; débordement caché; droite: 0; top: 18px;}

Cependant, j'aimerais vraiment pouvoir positionner mes deux Colorbox séparément. Ma pensée pour cela est d'avoir deux CSS différents (par exemple colorbox.css et colorbox2.css) et de faire des ajustements en conséquence, mais comment puis-je dire quel Colorbox suivre quel fichier CSS? Je suis un peu entre les niveaux débutant et intermédiaire si cela a du sens, donc ce serait génial si quelqu'un pouvait m'aider avec ça.

Merci!

Répondre

0

il vous suffit d'ajouter une classe pour une colorbox et de remplacer les règles de position pour cette classe.

+0

vous dire comme ceci: J'ai essayé cela avant et ne semble pas fonctionner. peut-être que je n'ai pas bien fait? – Hasanah

+0

Je ne vois aucun cours ajouté? Il me semble que JQuery fournit une fonction "addClass". – MatTheCat

+0

Oh, je suis désolé, je ne suis vraiment pas familier avec la fonction addClass. Faut-il ressembler à ceci: \t $ (document) .ready (function() { \t \t $ ("popupa. ") Colorbox ({iframe:. Vrai, transition:" fade", largeur: 500, hauteur: 500, ouvert: true}); \t \t $ ("colorbox. ") addClass (" testing "); \t \t $ (" de popupb. ") colorbox ({iframe:. vrai, transition:" fade",. largeur: 375, hauteur: 800}); \t \t \t}); Cependant, cela ne semble toujours pas fonctionner. – Hasanah

0

la meilleure façon est de configurer le colorboxed avec des arguments différents

$(".colorbox1").each(function(i) { 
    $(this).colorbox({top:200}); 
}); 

$(".colorbox2").each(function(i) { 
    $(this).colorbox({top:100}); 
});