Sujet Précédent Sujet Suivant

Gerer la luminosite des images de votre galerie

saipassa Messages postés 5 Date d'inscription lundi 20 octobre 2014 Statut Membre Dernière intervention 27 octobre 2014 - 20 oct. 2014 à 22:27
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 31 oct. 2014 à 12:25
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

Réponse 1 / 6
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
21 oct. 2014 à 00:34
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. ..

0
Réponse 2 / 6
saipassa Messages postés 5 Date d'inscription lundi 20 octobre 2014 Statut Membre Dernière intervention 27 octobre 2014
21 oct. 2014 à 08:39
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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
21 oct. 2014 à 09:03
Ok.
Et maintenant. ..le code que tu as écris et qui ne fonctionne pas ?
0
Réponse 3 / 6
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
21 oct. 2014 à 11:34
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

0
Réponse 4 / 6
saipassa Messages postés 5 Date d'inscription lundi 20 octobre 2014 Statut Membre Dernière intervention 27 octobre 2014
21 oct. 2014 à 22:23
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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
21 oct. 2014 à 22:25
Non il ne faut pas importer plusieurs fois jquery...c'est ce que je t'ai marqué. ..
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
saipassa
22 oct. 2014 à 21:34
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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
22 oct. 2014 à 23:38
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) ?
0
Réponse 6 / 6
saipassa Messages postés 5 Date d'inscription lundi 20 octobre 2014 Statut Membre Dernière intervention 27 octobre 2014
23 oct. 2014 à 21:50
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é.
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
Modifié par jordane45 le 23/10/2014 à 21:53
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....)
0
saipassa Messages postés 5 Date d'inscription lundi 20 octobre 2014 Statut Membre Dernière intervention 27 octobre 2014
27 oct. 2014 à 22:25
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.
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
28 oct. 2014 à 22:11
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).
0
saipassa
31 oct. 2014 à 11:59
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 !
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
31 oct. 2014 à 12:25

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........*
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
comment faire une galerie d'image
Malamute7 -
Malamute7 -

7 réponses
sweetAlert
ckrisL -
ckrisL -

15 réponses
Récupérer toutes les class d'un élément
cs_flexx -
flexx -

2 réponses
Incrémentation d'une variable globale en javascript
forcels -
forcels -

4 réponses
Rejoignez-nous