Besoin de conseils pour corriger un script jQuery
Résolu
Patpierre
Messages postés
11
Statut
Membre
-
ROMAIN4 -
ROMAIN4 -
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 :
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>
2 réponses
-
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 dansattr('href', src)
que tu dois remplacer par le lien que tu souhaites ouvrir
-
