Gerer la luminosite des images de votre galerie

Signaler
Messages postés
5
Date d'inscription
lundi 20 octobre 2014
Statut
Membre
Dernière intervention
27 octobre 2014
-
Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
-
Bonsoir,
Merci pour ce tuto (Gérer la luminosité des images de votre galerie). Simple et très efficace !!! Je débute en JQuery. J'ai une page utilisant Fancybox pour m'exercer (issue du site officiel "Fancybox") et je n'arrive pas à y appliquer votre JQuery. Est-il possible de lier deux JQuery dans une seule et même page ? Bref, comment appliquer, si cela est possible, les effets issus de votre tuto sur les seuls éléments issus d'un dossier "img" ? (je n'ai pas trouvé cette option sur fancybox :/ )
Merci pour votre aide ;)
saipa(encore)ssa

6 réponses

Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
342
Bonjour
De quel tuto parles tu ?
Donnes nous au moins le lien. ..

Pour ce qui est de ton souci. ..quel code as tu essayé de faire ?
Sans ces éléments. ..personne ne pourra te répondre. ..

Messages postés
5
Date d'inscription
lundi 20 octobre 2014
Statut
Membre
Dernière intervention
27 octobre 2014

Bonjour Jordane45,
Je parlais de ce tuto :
http://codes-sources.commentcamarche.net/faq/1121-gerer-la-luminosite-des-images-de-votre-galerie
Dont je tente de lier le JQuery avec celui-ci :
http://fancybox.net/howto.
Bonne journée
saipa(encore)ssa
Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
342
Ok.
Et maintenant. ..le code que tu as écris et qui ne fonctionne pas ?
Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
342
Sachant que :
Tu importes déjà JQUERY pour la FANCYBOX ... donc pas besoin de le remettre (même.. ne surtout pas le remettre) dans le script pour la gestion de la luminosité

Donc : ne pas mettre cette ligne :
<script type="text/javascript" src="jquery-1.4.2.js"></script>



Ensuite... si ça ne fonctionne toujours pas, utilises les outils de debogages de ton navigateur web.. ( je te conseille FIREBUG pour FireFox).
Ca te dira si il y a des erreurs de script....


Et enfin..
Si les problèmes persistent... reviens nous voir avec le code
=> Utilises la balises de code pour poster ton code sur le forum VOIR ICI : http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Messages postés
5
Date d'inscription
lundi 20 octobre 2014
Statut
Membre
Dernière intervention
27 octobre 2014

Bonsoir,
Je pense effectivement qu'il y a pas mal de conflits (doublons).
J'étais sur le point de poster mon code; mais suite à cette réponse, je vais faire un petit nettoyage :)
Mais est-il raisonnable de mélanger X JQuery sur une seule et même page ?
Bonne soirée et merci, je vous tiens au courant ^^
SPS
Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
342
Non il ne faut pas importer plusieurs fois jquery...c'est ce que je t'ai marqué. ..
Bonsoir,
Bon, voici le code (merci de vous rappeler que je débute ^^).
Pour info :
de l'aspect "image éclairée", ne me reste plus qu'une image opaque non réactive. De l'effet FancyBox, ne me reste plus que le zoom (plus de contour/ombre/légende) :/
		.fancybox-custom .fancybox-skin {
box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
}

body {
max-width: 100%;
margin: 0 auto;
text-align: center;
}
nav {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
background-color: #CC6633;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 6px;
}
.button {
background-color: #222;
color: #FFFFFF;
padding-top: 4px;
padding-left: 10px;
padding-bottom: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-collapse: separate;
border-spacing: 0px 0px;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
font-size: 20px;
line-height: 22px;
padding-right: 10px;
position: static;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
text-align: center;
margin-top: 20px;
margin-left: -6px;
}
.button:hover {
background-color: #FF6633;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.header {
background-color: #CC3300;
position: static;
width: 100%;
height: auto;
}
.full {
width: 100%;
height: auto;
}
.images_vingt-cinq {
width: 50%;
height: auto;
}
.images_vingt-cinq:hover {
background-color: #663333;
}
#main {
position: absolute;
/* [disabled]top:50%; */
cursor: pointer;
right: auto;
left: auto;
}
/*Style des images et application d'une opacité de 40% à chacune d'elles. Notez que les 3 attributs relatifs à cet effet sont nécessaires pour être compatibles avec tous les navigateurs */


#main img {
width: auto;
/* [disabled]height: 150px; */
/* [disabled]z-index: 1; */
filter: alpha(opacity=40);
opacity: 0.4;
-moz-opacity: 0.4
}

Pour les JQuery :
    	<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/

$('.fancybox').fancybox();

/*
* Different effects
*/

// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});

// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',

helpers : {
title : {
type : 'over'
}
}
});

// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,

openEffect : 'none',

helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});

// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,

openEffect : 'elastic',
openSpeed : 150,

closeEffect : 'elastic',
closeSpeed : 150,

closeClick : true,

helpers : {
overlay : null
}
});

/*
* Button helper. Disable animations, hide close button, change title type and content
*/

$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',

prevEffect : 'none',
nextEffect : 'none',

closeBtn : false,

helpers : {
title : {
type : 'inside'
},
buttons : {}
},

afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});


/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/

$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',

closeBtn : false,
arrows : false,
nextClick : true,

helpers : {
thumbs : {
width : 50,
height : 50
}
}
});

/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',

arrows : false,
helpers : {
media : {},
buttons : {}
}
});

/*
* Open manually
*/

$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});

$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});

$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});


});
</script>
<script type="text/javascript">

Bonne soirée et merci !
SPS
Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
342
Bonsoir,

Plusieurs choses :
1 - Si tu mets Uniquement le code fancybox... est-ce que ça fonctionne
2 - Si tu mets commente le code fancybox et que tu ajoutes l'autre code... est-ce que ça fonctionne ??
3 - Si tu active les deux codes... qu'est ce que ça donne ?

=> As tu regardé via les outils de débogage de ton navigateur internet ( Firebug pour Firefox par exemple) si tu avais des messages d'erreurs javascript ?

4 - Comment as tu inclus les scripts dans ta page html (ou php) ?
Messages postés
5
Date d'inscription
lundi 20 octobre 2014
Statut
Membre
Dernière intervention
27 octobre 2014

Bonsoir jordane,
1- La page (demo) FancyBox fonctionne parfaitement.
(image 1)
2- La page "image éclairée" (image 2) fonctionne, excepté le fait que l'image a une opacité, et qu'elle devient non opaque lors du mouseover (l'effet inverse que celui désiré).
Le combinage des deux (codes envoyés hier) donne une page avec des images opaques (comme -1) mais non réactives, et l'effet zoom (Fancybox) fonctionne mais sans le contour, sans l'ombré.
Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
342
Et tu n'as pas répondu au reste.....
As-tu des Messages d'erreur dans ton outil de débogage de ton navigateur internet ?
As-tu installé FireBug pour FireFox par exemple ? ou Sinon Touche F12 sous IE .....

Il manque aussi la réponse concernant ta façon d'include tes script dans ton code html.....


Si tu ne réponds pas à toutes nos questions.. il va être compliqué de pouvoir t'aider.
(perso.. je n'ai pas prévu d'installer les script sur mon pc pour les tester... donc je ne pourrais que t'aider à partir de ce que tu nous remontras comme infos....)
Messages postés
5
Date d'inscription
lundi 20 octobre 2014
Statut
Membre
Dernière intervention
27 octobre 2014

Bonsoir,
J'ai tenté l'effet éclairage sur une nouvelle page utilisant fancybox. J'ai vraiment l'impression qu'il y a conflit(s). Encore une fois, fancybox perd 80% de ses effets (marge, ombré) et pas d'opacité à 100% pour ce qui est de l'effet "images éclairées". La page html fait appel à des scripts se trouvant dans la "mallette". Je n'ai rien inclus de moi-même excepté le JQuery "images éclairées" du tuto. Je vais tenté d'en savoir plus avec Firebug (que je suis en train de télécharger) mais Dreamweaver ne me signale aucune erreur de code. Je vous tiens au courant.
Bonne soirée.
Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
342
Où en es tu ?
Tu as trouvé ?
Sinon.. avais tu vu que dans le tuto lumières... il utilise le jquery 1.4 ?
A la limite... retire le ... c'est surement lui qui te génère un conflit...
<script type="text/javascript" src="jquery-1.4.2.js"></script>


Par contre... rien ne nous dit que ce script fonctione toujours avec une version jquery plus récente... (d'où l'importance de FireBug qui te remontera les erreurs éventuelles dans la fenêtre console).
Bonjour,
Firebug ne détecte rien (mais merci de m'avoir fait connaître ce module Firefox). Il y a du mieux en retirant
<script type="text/javascript" src="jquery-1.4.2.js"></script>>
:) Oui, je récupère les effets de fancybox. Par contre, toujours pas d'effet "images éclairées" (la photo reste avec son opacité définie en CSS). Pour info, les JQuery utilisés avec fancybox sont inférieurs à 1.4 (de mémoire _je ne suis pas chez moi_ c'est du JQuery 1.3.2 grand maxi). Bonne journée !
Messages postés
31093
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2021
342

our info, les JQuery utilisés avec fancybox sont inférieurs à 1.4 (de mémoire _je ne suis pas chez moi_ c'est du JQuery 1.3.2 grand maxi).

Non. l'exemple donné sur leur site utilise justement la 1.4 mais ils conseillent d'utiliser la dernière version en date....


Ce que je te conseille :
- mettre une version récente de Jquery ( la 1.11 par exemple)
=> Un seul INCLUDE en début de ton prgramme...

- Retirer TOUS(les deux...) appels vers JQUERY présents DANS tes script.

- Inclure les script dans l'ordre suivant
1 - JQUERY
2 - FancyBox
3 - Ton script

- Tester ton code.. voir si FireBug ne te remonte pas d'erreur. (active bien le mode debug/console.....)

Si ça ne fonctionne pas mieux...
retirer la ligne
jQuery.noConflict();
présente dans ton second script.

Inverser l'ordre 2/3 pour les includes... ( avec Et Sans le noConflict() )





PS: J'aurais bien voulu que tu nous postes le code HTML/PHP qui contient l' INCLUDE de tes scripts....

Tu sais .. un truc du genre :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>


Car je suppose...(j'espère..) Que tu ne colles pas directement les script FancyBox et l'autre directement dans le code de ta page........*