Discussion :

[supertino7]

Bonjour,

je rencontre un gros problème pour intégrer un menu Fisheye, plugin qui accompagne Interface.
En fait, je n'y arrive tout simplement pas. Je n'ai que 2 images, et le menu refuse de s'afficher. Je ne sais pas d'où vient le problème.

Je développe avec Zend Framework.

mon arbo :

Code :

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

1
2
3
4
5
6
 
public/
        css /
        images /
        js / interface / interface.js
                           eyefish.js

J'insère les librairies à l'aide de

Code :

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

1
2
3
 
$view->headScript()->prependFile('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
$view->headScript()->appendFile('/js/interface/interface.js');

puis mon fichier html

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
 
<script type="text/javascript">
	$(document).ready( function() {
 
	$('#fisheye').Fisheye(
			{
				maxWidth: 50,
				items: 'a',
				itemsText: 'span',
				container: '.fisheyeContainter',
				itemWidth: 40,
				proximity: 90,
				halign : 'center'
			}
		);
 
});
</script>
	<div id="fisheye" class="fisheye" style="width: 20%; margin: auto;">
 
		<div class="fisheyeContainter">
			<a href="#" class="fisheyeItem"><img src="/images/admin/section_journaliste.png" width="30" /><span>Home</span></a>
			<a href="#" class="fisheyeItem"><img src="/images/admin/section_admin.png" width="30" /><span>Email</span></a>
		</div>
 
</div>

Résultat : je n'ai pas d'erreurs javascript, mais le menu ne zoom pas, et réagit n'importe comment (passe en vertical puis en horizontal).
je me retrouve avec ça :


Ai-je oublié quelquechose ?

Merci pour votre aide.

[danielhagnoul]

Bonsoir.

Bonjour,

public/
css /
images /
js / interface / interface.js
eyefish.js

J'insère les librairies à l'aide de :

Code :

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

1
2
3
 
$view->headScript()->prependFile('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
$view->headScript()->appendFile('/js/interface/interface.js');

puis mon fichier html

[code]

Ai-je oublié quelquechose ?

Je suis à J-1 en PHP, mais je ne vois pas un appendFile pour eyefish.js, est-ce normal ?

[supertino7]

Bonsoir.



Je suis à J-1 en PHP, mais je ne vois pas un appendFile pour eyefish.js, est-ce normal ?

Bien vu
mais je me suis calqué sur les démos par exemple http://www.ajaxdaddy.com/javascript/interface.js, où aucun n'inclut le eyefish.js . Je me suis dit que interface.js faisait appel automatiquement à ces sous classes.
Je vais refaire un essai ceci dit...

[supertino7]

Ces plugins sont ils toujours fonctionnels ?
Je suis en train de me poser des questions vu les résultats que je rencontre...
ou alors j'ai pas compris comment organiser les fichiers .js et les appeler dans mes scripts.
Je cherche, mais je ne trouve aucune doc succincte, que des démos...

[supertino7]

Ces plugins sont ils toujours fonctionnels ?
Je suis en train de me poser des questions vu les résultats que je rencontre...
ou alors j'ai pas compris comment organiser les fichiers .js et les appeler dans mes scripts.
Je cherche, mais je ne trouve aucune doc succincte, que des démos...

J'ai trouvé.

C'était le CSS qu'il fallait absolument inclure et définir.
Du coup j'ai pris celui de la démo au dessus :

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
 
.fisheye{
	text-align: center;
	height: 50px;
	position: relative;
}
a.fisheyeItem
{
	text-align: center;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	width: 40px;
	position: absolute;
	display: block;
	top: 0;
}
a.fisheyeItem2
{
	text-align: center;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	width: 40px;
	position: absolute;
	display: block;
	bottom: 0;
}
.fisheyeItem img
{
	border: none;
	margin: 0 auto 5px auto;
	width: 100%;
}
.fisheyeItem2 img
{
	border: none;
	margin: 5px auto 0 auto;
	width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
	display: none;
	positon: absolute;
}
.fisheyeContainter
{
 
	height: 50px;
	width: 200px;
	left: 500px;
	position: absolute;
}
#fisheye2
{
	position: absolute;
	width: 100%;
	bottom: 0px;
}

Ca m'étonne qu'aucune doc ne fasse référence à cette obligation.
J'imagine qu'il y a des display:block et des position:relative indispensables au bon fonctionnement.