Menu

Besoin de conseils pour corriger un script jQuery [Résolu/Fermé]

Patpierre 8 Messages postés mercredi 22 janvier 2014Date d'inscription 1 décembre 2016 Dernière intervention - 1 déc. 2016 à 17:37 - Dernière réponse :  ROMAIN4
- 1 déc. 2016 à 18:41
Bonjour,
Je cherche à faire pour mon site un mur d'image avec un zoom (sans décalage) au survol de la souris et lien vers un site au clic souris. J'ai essayé en CSS mais quand ça marche sous Firefox, ça bug sous IE...
Alors j'ai trouvé un javascript/jQuery qui fait ce que je veux au survol sauf au clic , l'image s'ouvre alors que je voudrais ouvrir le lien d'une page web.
Auriez vous l'obligeance et la courtoisie de bien vouloir me dire comment corriger ce code :


<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
box-shadow: 0 1px 7px rgba(0,0,0,0.6);
-o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
}
</style>
</head>

<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="fancybox"></a>').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<center><Img class = "fancybox" src = "antoine_fargette.jpg" /><Img class = "fancybox" src = "antoine_fargette.jpg" /> <Img class = "fancybox" src = "antoine_fargette.jpg" /><Img class = "fancybox" src = "antoine_fargette.jpg" /><Img class = "fancybox" src = "antoine_fargette.jpg" />
</body>


Afficher la suite 

2 réponses

jordane45 20001 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 février 2018 Dernière intervention - 1 déc. 2016 à 18:28
0
Utile
Bonjour,

L'ouverture du lien (ou actuellement de l'image...) se fait dans la balise <a>
 var a = $('<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="fancybox"></a>').attr('href', src).attr('title', title);

C'est donc la variable "src" qui se trouve dans
attr('href', src)

que tu dois remplacer par le lien que tu souhaites ouvrir
0
Utile
Merci beaucoup pour ton aide
et bonne soirée