Donner le focus à un slide (Avec Coda-Slider)

Version imprimable

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:

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">  <div class="panel"> <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"> <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 !

Je pense que j'ai une piste :

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

Code:

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.

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:

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
}

Résolu !

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

Code:

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 :ccool: