VIVEZ LE
FOOTBALL !

Posez votre question Signaler

Opacité shadowbox [Résolu]

lambartillustration 21Messages postés 24 octobre 2009Date d'inscription 18 octobre 2011Dernière intervention - Dernière réponse le 18 oct. 2011 à 10:42
Hello! ,
J'ai créé une galerie shadowbox pour mon futur site. J'ai suivi les instructions du site http://www.shadowbox-js.com/.
ça fonctionne pas mal mais , j'imagine, par défaut, lorsque mon image ou ma galerie s'affiche, le fond a une couleur grisâtre. j'aurais voulu inclure de l'opacité pour que l'on voit un peu la page de départ ( comme, leurs exemples ). J'ai essayé le code "overlayopacity:0,5;" mais je ne sais pas où le placer...
Merci de votre réponse !
Lire la suite 

Opacité shadowbox »

17 réponses
Réponse
+0
moins plus
Par défaut c'est déjà transparent, overlayOpacity déjà 0.5.
Les options sont à mettre dans la méthode "init".
Shadowbox.init({
    option: 'valeur',
    option2: 'valeur'
});
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour, merci de votre réponse !

ça ne fonctionne pas dans mon cas :-(

Voici ce que j'ai demandé de faire à mon ordinateur :

<link rel="stylesheet" type="text/css" href="../shadowbox.css">
<script type="text/javascript" src="../shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: true
overlayOpacity:'0,5'
});
</script>

il doit manquer une virgule ou quelque chose ...
Ajouter un commentaire
Réponse
+0
moins plus
C'est un nombre à virgule qu'il faut indiquer, pas une chaine.
<script type="text/javascript" src="../shadowbox.js"></script> 
<script type="text/javascript"> 
Shadowbox.init({ 
    handleOversize: "drag", 
    modal: true,
    overlayOpacity: 0.5
}); 
</script>

Ajouter un commentaire
Réponse
+0
moins plus
Je viens de le faire mais ça ne fonctionne pas non plus...

<link rel="stylesheet" type="text/css" href="../shadowbox.css">
<script type="text/javascript" src="../shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: true ,
overlayOpacity: 0.5

});


J'ai un autre script Js pour la même page ( coulissement d'images):
Peut-être que les deux interfèrent...De plus, même si ma galerie s'affiche plutôt bien, il inverse l'ordre des image (il commence par m'afficher l'image 4/4, par ex.)..Je ne sais pas si c'est lié...

Mais merci d'avoir répondu ! Je travaille dessus !
lili44300 - 3 sept. 2010 à 17:51
Bonjour,

Je tombe sur cette discussion en tentant de résoudre aussi le bug de Shadowbox, qui affiche d'abord l'image 4/4. Avez-vous trouvé comment rétablir le bon ordre d'affichage des images ?

Merci d'avance.
Cordialement,

AD.
lambartillustration- 18 oct. 2011 à 10:42
Bonjour !

Je réponds super tard !! désolé.

En fait, pour l'ordre de vos images, précédez comme il suit :

<a href="image1.jpg" rel="Shadowbox[bdj]"><img src="Image sur laquelle on clique pour avoir la shadow box.jpg" alt=""></a><a href="image2.jpg" rel="shadowbox[bdj]"></a><a href="image3.jpg" rel="shadowbox[bdj]"></a>


En espérant que ça aide...
Ajouter un commentaire
Réponse
+0
moins plus
Si tu utilises un framework JS :
http://www.shadowbox-js.com/support.html#adapters
Ajouter un commentaire
Réponse
+0
moins plus
J'ai déjà installé la blibiothèque jquery...(jquery-1.4.2) Les autres je ne les connais pas
( ce ne serait pas drôle sinon ! )

Je vais chercher encore, je ne doit pas être loin ! ;-)

Merci en tout cas, si je trouve, je tiens au courant !
Ajouter un commentaire
Réponse
+0
moins plus
Pas besoin de les installés :)
Lorsque tu télécharges Shadowbox, sélectionne "jQuery" dans la liste déroulante.
Ajouter un commentaire
Réponse
+0
moins plus
Je viens de tout remettre en place (il est vrai que je n'avais pas fais attention au menu déroulant...)

Mais ... toujours pas :-(

J'essaie alors de comprendre le code source que l'on peut trouver sur le site de bas de shadowbox :

<link rel="stylesheet" type="text/css" href="build/shadowbox.css">
<script type="text/javascript" src="build/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// a darker overlay looks better on this particular site
overlayOpacity: 0.8
// setupDemos is defined in assets/demo.js
}, setupDemos);
</script>

Peut-être que ça n'a rien à voir mais le " // setupDemos is defined in assets/demo.js
}, setupDemos);" m'intrigue...
Ajouter un commentaire
Réponse
+0
moins plus
Pourrais-je voir en ligne ?
Ajouter un commentaire
Réponse
+0
moins plus
Je vais tenter de le mettre en ligne demain, en fin d'après-midi. Il me manque des photos que je n'ai pas où je suis actuellement. . . Je te tiens au courant dès que c'est faut ! Je te remercie beaucoup de ton implication !

J'espère à demain !
Ajouter un commentaire
Réponse
+0
moins plus
Re !

Je n'ai pas pu encore mettre mon site en ligne. J'espère le faire dans la nuit.
En attendant, je ne sais pas si ça peut vous aider (sans les css, le visuel et les ocdes sources :-( ). J'ai ajouté l'opacité dans un ID comme il suit :
#sb-container{position:fixed;margin:0;background:red;opacity:0.9;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}

J'ai l'opacité du background MAIS elle s'applique aussi sur l'image censée être mise en avant...

On ne sais jamais. je vous post un message dès que mon site est en ligne. Merci encore !
Ajouter un commentaire
Réponse
+0
moins plus
Ajoute ça :
#sb-container * { opacity: 1.0; }
Ajouter un commentaire
Réponse
+0
moins plus
héhé ! Je sens que l'on se rapproche...Mais ça me fait le contraire : le background est en opacité 100% mais pas l'image qui doit être mise en avant qui, elle, conserve son opacité à 0,5.. Je cherche encore ! merci en tout les cas !
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour ! Malgres qu'il reste quelques bugs, j'ai mis mon site en ligne :

http://www.lambartillustration.com.

Vous verrez ainsi mes codes. Je vous remercie d'avance car je n'ai toujours pas trouvé le problème :-(
Ajouter un commentaire
Réponse
+0
moins plus
Malheureusement, je ne serais pas expliquer pourquoi ça ne marchait pas.
Je sais que c'est rageant pour les gens qui cherchent une solution à leur problème de tombé sur un "sujet résolu" alors qu'ici, la réponse n'est pas apportée.

Cependant, je me suis retourné vers un autre code shadowbox venant d'un autre site. Je conseille donc à ceux qui ont eu le même problème que moi de reprendre, malheureusement, tout à zéro et de reprogrammer un autre code...
Ajouter un commentaire
Ce document intitulé « opacité shadowbox » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?