Cherche script pour galerie images,etc...

Résolu
midiweb -  
 le new -
salut, je cherche un script, peu importe le langage, qui me permet d'afficher des images miniatures agrandies, en dessous ou sur le côté, tout en laissant les autres miniatures non encore agrandies visibles.
Un ex.: un site de peintures divisé en catégories:portraits, fleurs, animaux, paysages, regroupés en un menu.
Je clique sur "portraits" et tous les portraits miniatures s'affichent un à la suite des autres. Au dessus la bannière et le menu qui restent inchangés sur chaque page.
A présent, je veux visionner le premeir portrait en plus grand.
2 possibilités souhaitées:
1. Je clique ou je passe avec la souris et l'image s'agrandit, et recouvre les autres miniatures éventuellement.
2. Je clique ou je passe avec la souris et l'image agrandie s'affiche en dessous tout en laissant les autres miniatures visibles.

Le script doit, si possible, fonctionner aussi sous les navigateurs Firefox et Opera 7.

Qui peut m'aider? Cordialement.
A voir également:

5 réponses

Réponse 1 / 5
fanou Messages postés 448 Date d'inscription   Statut Membre Dernière intervention   146
 
Bonjour

***Pour des images cliquables :***
Dans le <head> :

<SCRIPT LANGUAGE="JavaScript"><!--
function afficheVignette(cheminVignette,cheminMaxi) {
document.write('<A HREF="javascript:afficheMaxi(\''+cheminMaxi+'\')"><IMG SRC="'+cheminVignette+'" HSPACE=0 VSPACE=0 BORDER=0 ALT="Si vous voulez le voir plus grand"></A>');
}
function afficheMaxi(chemin) {
i1 = new Image;
i1.src = chemin;
html = '<HTML><HEAD><TITLE>Photos</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=image1 onLoad="window.resizeTo(document.image1.width+14,document.image1.height+32)"></CENTER></BODY></HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menubar=0,scrollbars=0,resizable=1');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close();
} // -->
</SCRIPT>

A l'endroit de ton image :

<SCRIPT LANGUAGE="JavaScript">afficheVignette("image vignette.jpg","image agrandie.jpg");</SCRIPT>


****Pour une image qui s'agrandit au passage de la souris :****

Dans le <head>

<SCRIPT LANGUAGE="JavaScript"><!--
function afficheMaxiTempo(chemin){
i1 = new Image;
i1.src = chemin;
html = '<HTML><HEAD><TITLE>Photos</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=image1 onLoad="window.resizeTo(document.image1.width+14,document.image1.height+32)"></CENTER></BODY></HTML>';
popupImage = window.open('','popupImage','toolbar=0,location=0,directories=0,menubar=0,scrollbars=0,resizable=1');
popupImage.document.open();
popupImage.document.write(html);
popupImage.focus();
popupImage.document.close();
//FermePopup();
}
function FermePopup(){
popupImage.document.write('<script language="javascript">');
popupImage.document.write('setTimeout(');
popupImage.document.write('"self.close()');
popupImage.document.write(';",5000)');
popupImage.document.write('</');
popupImage.document.write('script>');
}
//-->
</SCRIPT>

A l'endroit de ton image

<A HREF="javascript:void(0)" onMouseOver="afficheMaxiTempo('ton image agrandie.jpg'); return false;" onMouseOut="img01.src='ton image vignette.jpg'"><IMG SRC="ton image vignette.jpg" NAME="img01" ALT="Nom de ton image" BORDER=0 onLoad="tempImg=new Image(0,0); tempImg.src='ton image vignette.jpg'"></A>
2
le new
 
Bonsoir
Cela fonctionne Merci !
Cependant il faudrait que la fenetre s'efface lorsque la souris n'est plus dessus !
0
Réponse 2 / 5
AlbB
 
Bonjour,

Si tu disposes d'une base de donnée,
tu peux utiliser picsengine: il s'agit
d'une galerie en flash personnalisable.
Je crois que cela correspond à ce que tu souhaites.
C'est en outre très facile d'utilisation et très pratique.
www.picsengine.com

Tchaow!
0
Réponse 3 / 5
lemarketeur2009 Messages postés 32 Date d'inscription   Statut Membre Dernière intervention   10
 
Sinon tu as un très bon script de galerie d'images que j'ai déjà utilisé et que je trouve pas mal du tout

Voici une démo : http://demo.4homepages.de/?l=french

Cordialement.
http://annuaire.afrique-agora.com/
0
Réponse 4 / 5
cerelog Messages postés 4588 Date d'inscription   Statut Membre Dernière intervention   736
 
quand on est aussi exigent, on le fait soi même !

mais regarde chrono show, un script pour mettre en place une belle gallerie

gestion totale en ligne

http://chrono.apinc.org
-1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
midiweb
 
Ci-dessous, un code qui me convient, il affiche les miniatures et à droite l'image agrandie.
Problème: je veux 2 ou 3 miniatures à la fois, puis le reste en cliquant sur "suivant". Il m'affiche au démarrage autant de miniatures qu'il y a d'images. J'y suis presque, il manque pas grand chose. Peux-tu m'aider s'il te plaît?Merci

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var current = 0;
var width = 4;
var max = 4;
var prefixe = "mini_";

function previous(nb) {
showWindow(false);
current = current - nb;
if (current < 0) {
current = 0;
}
showWindow(true);
}

function next(nb) {
showWindow(false);
current = current + nb;
if (current > (max - width)) {
current = max - width;
}
showWindow(true);
}

function showWindow(show) {
for(i = current ; i < current + width ; i++) {
el = document.getElementById(prefixe+i);
if (el) {
el.style.display = show?'inline':'none';
}
}
}
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body>
<a href="javascript:previous(2)">previous</a>
<a id="mini_0" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/maedchen1.jpg')"><img src="Bilder/Portraits/kleine Bilder/maedchen1.jpg"></a>
<a id="mini_1" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/portrait-dame.jpg')"><img src="Bilder/Portraits/kleine Bilder/portrait-dame.jpg"></a>
<a id="mini_2" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/maedchen-profil.jpg')"><img src="Bilder/Portraits/kleine Bilder/maedchen-profil.jpg"></a>
<a id="mini_3" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/maedchen1.jpg')"><img src="Bilder/Portraits/kleine Bilder/maedchen1.jpg"></a>
<a id="mini_4" href="javascript:changeImage('Bilder/Portraits/grosse Bilder/maedchen1.jpg')"><img src="Bilder/Portraits/kleine Bilder/maedchen1.jpg"></a>
<a href="javascript:next(2)">next</a>
<img name="mainimage" src="Bilder/Portraits/grosse Bilder/maedchen1.jpg"></div>
</body>
</html>
[/code]
-1
fanou Messages postés 448 Date d'inscription   Statut Membre Dernière intervention   146
 
Bonsoir midiweb

Je ne sais pas t'aider..
Je suis désolée
0

Discussions similaires

Dissocier les photos de ma galerie sur Google Photos
BourrinOman83 -
Pierr10 -

9 réponses
Ne plus lier galerie et google photos
Babyinplug -
Babyinplug -

4 réponses
recherche script "les visiteurs"
stoukboy -
brucine -

22 réponses
Problème avec Google photos et Galerie samsung
unesimslicourne -
Pierr10 -

5 réponses
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses