Discussion :

[yotman]

Bonjour à tous,

Je ne sais pas si je suis dans le bon endroit !

J'ai développer une application pour stocker des fiches (jpeg) avec un remplissage d'un formulaire.
Le résultat des recherches est affiché sous forme de tableau qui regroupe les info important et un lien vers la fiche concernée.
le problème est que quand je clique sur le lien, l'image s'affiche sur le navigateur (puisque c'est un href).
ce que je veux faire c'est d'afficher cette image avec une visionneuse des que je clique sur le lien.

Est ce que c'est possible ? si oui, comment puis je faire ?

merci à vous

[nicosmash]

Bonsoir,

Vous pouvez faire une fonction de zoom en CSS quand vous passez sur l'image :

Code html :

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

1
2
 
<img class="zoom" src="toto.jpg"/>

Code css :

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

1
2
3
4
5
6
7
8
9
 
.zoom img {
width:200px;
height:200px;
}
.zoom img:hover {
width:400px;
height:400px;
}

[yotman]

merci mais je cherche pas à faire ça.

Les résultats sont affichés sous forme de tableau où on trouve dans une case un lien vers la fiche en question (après l’exécution d'une requête bien sur).

Elle est affiché sous forme de lien href.

je veux que la personne clique sur (ouvrir la fiche) et la elle apparaît dans une visionneuse et pas dans le navigateur.

[nicosmash]

Ok donc JS ou jQuery.
Ce doit être idem que pour une galerie image ...

Mais une visionneuse pour chaque image ou de faire une sorte d'album avec des flèches dans la visionneuse pour naviguer ?

[yotman]

je vais essayer de creusé coté js.

J'ai peut etre utiliser mal le mot visiooneuse, ce que je veux c'est juste afficher l'image après un clique et pas l'afficher sur navigateur.

merci

[rodolphebrd]

Bonjour,

Peut-être cherchez-vous à réaliser une fenêtre modale ou lightbox

[nicosmash]

C'est peu être moi qui est mal compris.

Vous pouvez vous servir de ceci :
http://lokeshdhakar.com/projects/lightbox2/
http://www.cabel.name/2008/02/fancyzoom-10.html
http://lokeshdhakar.com/projects/lightbox/

Ou bien CSS3 :

Code html :

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

1
2
3
4
 
<figure tabindex="0">  
   <img src="toto.jpg"/>  
</figure>

Code css :

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
 
figure {  
	position: relative;  
	float: left;  
	margin: 20px 37px;  
	z-index: 100;  
	width: 200px;  
	background: #fff;  
	border: 10px solid #fff;  
	-webkit-border-radius: 8px;  
	-moz-border-radius: 8px;  
	border-radius: 8px;  
	-webkit-box-shadow: 0 3px 10px #ccc;  
	-moz-box-shadow: 0 3px 10px #ccc;  
	box-shadow: 0 3px 10px #ccc;  
	-webkit-transition: all 0.7s ease;  
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease;  
	transition: all 1s ease;  
}  
figure img {  
	width: 100%;  
} 
figure:focus {  
	outline: none;  
	z-index: 200;  
	margin-top: 100px;  
	-webkit-transform: scale(1.8);  
	-moz-transform: scale(1.8);  
	-o-transform: scale(1.8);  
	transform: scale(1.8);  
	-webkit-box-shadow: 0 3px 10px #333;  
	-moz-box-shadow: 0 3px 10px #333;  
	box-shadow: 0 3px 10px #333;  
}

Ca devrait être bon mais à tester.