Discussion :

[totojordi]

Bonjour,

Mon but est de pouvoir naviguer entre plusieurs images, et de donner le focus à ces images pour pouvoir utiliser mes fonctions de zoom.

En suivant le tutorial :

http://ritter-jack.developpez.com/tu...da-slider-v-2/

J'ai donc réussi à mettre en place ce slider, en intégrant des images à l'intérieur des slides.

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
 
<div class="coda-slider preload" id="coda-slider">
 
 <!-- L'id de ce div est important pour js-->
<div class="panel"><!-- Slide 1-->
  <div class ="panel-wrapper">
 
<h2 class="title">Page 1</h2>
 
 
<img id="docannote" name="image1"
 
style="margin-bottom : 70px; z-index:0" onload="redimensionnement(this)"
 
src=XXX.jpg width=100% height=100%  onmouseup="zoomdscadre(event);
 
// Chargement de mes fonctions persos
onload="redimensionnement(this)" 
clicsouris(0, event)" 
onmousemove="scroll(event); cadre(event);" 
onmouseup="zoomdscadre(event); clicsouris(0, event)"
onmousedown="clicsouris(1, event);"
ondblclick="AddNote(<?php echo $id, $page, event)"/>
 
</div></div>
 
<div class="panel"><!-- Slide 2-->
 
   <div class ="panel-wrapper">
 
        <h2 class="title">Page 2</h2>
 
<img id="docannote" name="image2" 
 
style="margin-bottom : 70px; z-index:0" 
 
 
 
src=XXX.jpg width=100% height=100%  onmouseup="zoomdscadre(event);
 
// Chargement de mes fonctions persos 
onload="redimensionnement(this)" 
clicsouris(0, event)" onmousemove="scroll(event); cadre(event);" 
onmouseup="zoomdscadre(event); clicsouris(0, event)" 
onmousedown="clicsouris(1, event);" 
ondblclick="AddNote(<?php echo $id, $page, event)"/>
</div>

Mes fonctions de zoom marche seulement sur le slide 1 du document, celui qui s'affiche en premier, et lorsque je change de slide, les fonctions de zoom continue de fonctionner sur le slide 1.

Je pense que c'est une histoire de focus mais je suis bloqué sur la syntaxe à utiliser.

Merci de votre aide !

[totojordi]

Je pense que j'ai une piste :

Voici la fonction javascript de coda slider qui permet de changer de page

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
 
 
 
// Left arrow click
		$("#coda-nav-left-" + sliderCount + " a").click(function(){
			navClicks++;
			if (currentPanel == 1) {
				offset = - (panelWidth*(panelCount - 1));
				alterPanelHeight(panelCount - 1);
				currentPanel = panelCount;
				slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('li:last a').addClass('current');
			} else {
				currentPanel -= 1;
				alterPanelHeight(currentPanel - 1);
				offset = - (panelWidth*(currentPanel - 1));
				slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().prev().find('a').addClass('current');
			};
			$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
			if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
			return false;
		});

Donc, il faudrait que je récupère l'id de mon slide, et lors du changement de page, faire un "setfocus" ou quelque chose du genre.

[totojordi]

Ma fonction zoom marche à partir de l'id, comme toutes mes images ont le meme id mais pas le meme name, faut que je change ma fonction pour qu'elle zoom par rapport au "name".

Je vais tester ça.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function zoom(multiple, event)							//Fonction de zoom sur le document
{
	coef = (coef*multiple) || multiple;					//On modifie le coefficient global
	var newwidth = Math.round(document.getElementById("docannote").width * multiple);	//on redefinit les dimmentions de l'image
	var newheight = Math.round(document.getElementById("docannote").height * multiple);
	document.getElementById("docannote").style.width=newwidth+'px';
	document.getElementById("docannote").style.height=newheight+'px';
	placementcom(multiple);								//On déplace les annotations en conséquence
}

[totojordi]

Résolu !

Il faut gérer le zoom par l'id de l'image et non pas le nom.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function zoom(multiple, event)							//Fonction de zoom sur le document
{
	var imageactive = "doc" + currentPanel;
	coef = (coef*multiple) || multiple;					//On modifie le coefficient global
	var newwidth = Math.round(document.getElementById(imageactive).width * multiple);	//on redéfinit les dimensions de l'image
	var newheight = Math.round(document.getElementById(imageactive).height * multiple);
	document.getElementById(imageactive).style.width = newwidth + 'px';
	document.getElementById(imageactive).style.height = newheight + 'px';
	placementcom(multiple);								//On déplace les annotations en conséquence
 
}

Merci à moi d'avoir trouvé la solution