Souci personnalisation thumbnails Fancybox + conflit scripts

**halebopp** · 03/06/2012, 02h07

Bonjour !

Tout d'abord je suis désolée par avance de venir vous embêter, si je suis là c'est que ça fait une bonne semaine que j'écume Google et les forums dans 3 langues différentes, et que je n'arrive à rien (ou presque).

Je ne suis pas développeuse, mais familiarisée avec la conception de sites, et j'apprends ce que je peux.

Mon problème provient de la maquette de mon site, au demeurant assez simple (voir PJ PHOTO.JPG) : un cahier ouvert, des zones de liens cliquables sur les différentes parties, et une galerie portfolio dans 4 pages (photo, tournages, effets spéciaux, et backstage).

J'ai pour cela utilisé une image map, qui est automatiquement redimensionnée grâce au script .rwdImageMaps.

Jusque là pas de souci majeur.

Mais ! Premier souci, au moment d'intégrer une galerie FancyBox, impossible de redimensionner les thumbnails pour que :
1) ils adoptent les dimensions du fond (largeur auto et hauteur 100%)
2) ils ne fassent pas planter la galerie dès qu'on y touche (photo s'affiche à l'arrière plan)

Y a t'il une solution pour personnaliser l'afficher et rendre les thumbnails extensibles ?

2e souci :
L'intégration du script de FBox semble faire déconner celui de rwdImageMaps, qui ne redimensionne plus.
Est il possible d'éviter le conflit entre les 2 scripts ou dois je faire un choix ?

Si l'un de vous a ne serait ce qu'une piste j'en serais immensément reconnaissante, et en attendant je vous souhaite un bon week end et je retourne fouiller !

hale bopp

**halebopp** · 03/06/2012, 02h10

Voici le code "du moment" qui manifeste les soucis dont j'ai parlé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
<head>
  <title>PHOTO</title>
  <link rel="stylesheet" type="text/css"
 href="../source/jquery.fancybox.css?v=2.0.6" media="screen">
</head>
 
<body background-position="center"
 style="text-align: center; background-color: rgb(89, 95, 102);">
 
<div style="z-index: 1; position: relative;">
 
<img
 style="max-height: 1640px; position: relative; z-index: 1; width: auto; height: 100%;"
 src="PHOTO.JPG" usemap="#PHOTO_MAP" border="0">
 
<map name="PHOTO_MAP">
 
<area shape="poly"
coords="1281,489,1282,533,1367,566,1435,546,1447,599,1486,614,1588,356,1432,292,1453,332,1321,389"
 href="http://www.mariemaquilleuse.com/TOURNAGES.html"
 alt="Tournages" title="Tournages">
 
<area shape="poly"
 coords="1280,884,1500,824,1429,554,1275,599"
 href="http://www.mariemaquilleuse.com/EFFETS_SPECIAUX.html"
 alt="Effets speciaux" title="Effets speciaux">
 
<area shape="poly" coords="1193,1066,1193,1066,1278,1064,1286,891,1369,868,1503,915,1402,1174,1180,1086"
 href="http://www.mariemaquilleuse.com/BACKSTAGE.html"
 alt="Backstage" title="Backstage">
 
<area shape="poly"
coords="211,723,385,700,395,977,618,976,622,1053,640,1070,837,1079,305,1208,191,738"
 href="http://www.mariemaquilleuse.com/CV.html" alt="CV"
 title="CV">
 
<area shape="poly"
coords="277,356,389,488,388,694,206,719,137,764,114,728,67,735,58,640,15,580,46,555,41,511,111,501"
 href="http://www.mariemaquilleuse.com/CONTACT.html"
 alt="Contact" title="Contact">
 
<area shape="poly" 
coords="3,313,619,2,381,0,1,197"
 href="http://www.mariemaquilleuse.com/ACCUEIL.html"
 alt="Accueil" title="Accueil">
</map>
 
<script src="jquery.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
 
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
 
<script src="jquery.js"></script>
<script src="jquery.fancybox.js"></script>
 
<img style="height: 25%; width: auto; max-height: 150px; z-index: 3; position: absolute; top: 27%; left: 43%;"
 src="/Users/mariegombeaudantoine/Desktop/MAJ_SITE/PHOTO/images/S1.jpg"
 alt="">
 
<script>
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</div>
</body>
</html>

**halebopp** · 16/06/2012, 15h05

Hello !

Même si ça déterre le sujet, je souhaitais juste vous dire que j'ai "résolu" mon problème, en le contournant.
Bonne journée,

hale bopp

**NoSmoking** · 16/06/2012, 17h32

Bonjour,

Envoyé par halebopp

Même si ça déterre le sujet, je souhaitais juste vous dire que j'ai "résolu" mon problème, en le contournant.

il serait sympa de nous dire comment tu as contourné ton problème, ta solution peut en intéresser d'autre.

Penses au bouton

**halebopp** · 17/06/2012, 14h34

Oui tu as raison autant pour moi !

Finalement en ce qui concerne la FancyBox, j'ai opté pour un autre pugin de galerie web :
http://tympanus.net/codrops/2011/09/...image-gallery/
qui correspondait mieux à mes besoins et que je trouvais (pour mes compétences de débutante) plus facile à customiser.

En ce qui concerne le conflit de scripts, même si je pense qu'avec l'aide de cette page :
http://www.javascriptkit.com/javatut...plejava2.shtml
j'aurais pu le résoudre, j'ai modifié le plan de mon site afin de n'avoir qu'un seul script jQuery par page.

En effet, au départ je souhaitais avoir une seule page, dans laquelle des liens répartis grâce à une image map ouvriraient des galeries photo, un cv, et un formulaire de contact.

J'ai finalement opté par une page accueil, une page par galerie, une page cv et une dernière de contact, évitant ainsi le conflit.

Le résultat est visible sur :

www.mariemaquilleuse.com

Bon week end à tous !

Souci personnalisation thumbnails Fancybox + conflit scripts

jQuery

Discussions similaires

Partager

Partager