Bonjour,
Je vous sollicite car j'ai un petit problème. J'ai une galerie réalisé en jquery avec un menu (web, print, logos, divers, etc) et plusieurs images. Lorsque l'on clic sur un menu, les images qui correspondent à leur catégorie s'affiche. mon soucis est que le menu marche avec une certaine librairie javascript et l'ouverture de la popup (qui s'affiche au clic d'une image) avec une autre librairie...
Il n'y a pas d'erreurs javascript mais je pense que ces deux librairies entrent en conflit puisque selon l'ordre dans lesquels je les appellent, le menu marche ou le popup marche mais jamais les deux en même temps
Que puis-je faire pour les faire fonctionner toutes les deux ?
Voici mon code :
Merci d'avance.
Modifié par Kev92100 (13 Mar 2016 - 18:04)
Je vous sollicite car j'ai un petit problème. J'ai une galerie réalisé en jquery avec un menu (web, print, logos, divers, etc) et plusieurs images. Lorsque l'on clic sur un menu, les images qui correspondent à leur catégorie s'affiche. mon soucis est que le menu marche avec une certaine librairie javascript et l'ouverture de la popup (qui s'affiche au clic d'une image) avec une autre librairie...
Il n'y a pas d'erreurs javascript mais je pense que ces deux librairies entrent en conflit puisque selon l'ordre dans lesquels je les appellent, le menu marche ou le popup marche mais jamais les deux en même temps
Que puis-je faire pour les faire fonctionner toutes les deux ?
Voici mon code :
<!doctype html>
<html lang="fr">
<head>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic,bold,bolditalic,italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="robots" content="noindex">
<title>Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1; charset=utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" charset="utf-8" src="js/sorting.js"></script>
<script src="js/lightbox-image.js" type="text/javascript"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<script>
$(document).ready(function() {
$('.scrollTo').click( function() { // Au clic sur un élément
var page = $(this).attr('href'); // Page cible
var speed = 900; // Durée de l'animation (en ms)
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
return false;
});
});
</script>
</head>
<body class="home">
<!--============ JAVASCRIPT ============-->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Roboto:400,700,500:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
WebFontConfig = {
google: { families: [ 'Archivo+Narrow:400,400italic,700,700italic:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
WebFontConfig = {
google: { families: [ 'Ropa+Sans::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
WebFontConfig = {
google: { families: [ 'Lato:400,300:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
//PopUp
$(document).ready(function() {
//Lorsque vous cliquez sur un lien de la classe poplight
$('a.poplight').on('click', function() {
var popID = $(this).data('rel'); //Trouver la pop-up correspondante
var popWidth = $(this).data('width'); //Trouver la largeur
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="" class="btn_close" title="" alt="" /></a>');
//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
//Close Popups and Fade Layer
$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //...ils disparaissent ensemble
return false;
});
});
</script>
Merci d'avance.
Modifié par Kev92100 (13 Mar 2016 - 18:04)