Cherche script pour galerie images,etc...

Résolu/Fermé
midiweb - 1 oct. 2005 à 01:42
 le new - 21 juin 2010 à 21:57
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

fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
3 oct. 2005 à 11:58
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
Bonsoir
Cela fonctionne Merci !
Cependant il faudrait que la fenetre s'efface lorsque la souris n'est plus dessus !
0
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
lemarketeur2009 Messages postés 32 Date d'inscription dimanche 18 janvier 2009 Statut Membre Dernière intervention 23 juin 2012 10
29 mars 2010 à 21:11
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
cerelog Messages postés 4416 Date d'inscription mercredi 26 janvier 2005 Statut Membre Dernière intervention 24 mai 2013 735
1 oct. 2005 à 13:44
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
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 jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
13 oct. 2005 à 22:03
Bonsoir midiweb

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