Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

JavaScript 1.3

  Galerie d'images avec agrandissements

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script

  Fonction
Le but de ce script est de proposer des agrandissements de vignettes dans une fenêtre volante, en actualisant également le titre de la fenêtre volante.
  Principe
Vous constituez votre page portant les vignettes réduites de vos images, chaque vignette portant un appel à une fonction ouvrant une fenêtre qui y placera la bonne image en grand format.

La gestion du titre d'une page étant différente pour Netscape et Internet Explorer, on est obligé de créer deux 'fenêtres volantes' différentes.

L'avantage de cette méthode est de ne pas nécessiter une page par image agrandie mais une (deux en fait) pour toutes.
  Le script
dans la partie <head> de la galerie
<script language="JavaScript">
// Détection du navigateur
var ns4 = (document.layers) ? 1 : 0;
var ie4 = (document.all) ? 1 : 0;

// Suivant le navigateur, le code est très différent, d'ou deux pages
if (ns4) {
var page = "popup_ns.html";
}
if (ie4) {
var page = "popup_ie.html";
}

// Création des variables pour l'image et le titre à afficher
var representation = "";
var barre_de_titre = "";

function agrandissement(vignette,titre) {

// Assignation des valeurs des variables d'image et de titre
representation = vignette;
barre_de_titre = titre;

// Création du popup
fenetre = window.open(page,'images','location=no,toolbar=no,directories=no,menubar=no, resizable=yes,scrollbars=yes,status=no,width=370,height=480, screenY=0,screenX=0');

// Appel du popup au premier plan
fenetre.focus();
}
</script>

dans la partie <body> de la galerie
<a href="javascript:agrandissement('images/grand/logo.gif','Le logo de Biblioscript');"><img src="images/petit/logo.gif" border="0"></a>
<a href="javascript:agrandissement('images/grand/photo.jpg','Une photo...');"><img src="images/petit/photo.jpg" border="0"></a>

La fenêtre volante pour Netscape
N'indiquez rien d'autre (pas d'entête, rien) !
<script language="JavaScript">
document.write('<html><head>');
document.write('<title>' + opener.barre_de_titre + '</title></head>');
document.write('<body>');
document.write('<img src="' + opener.representation + '">');
document.write('</body></html>');
</script>

La fenêtre volante pour Internet Explorer
<html>
<head>
<title>Titre d'attente</title>

<script language="JavaScript">

document.title = opener.barre_de_titre;
document.write('</head>');
document.write('<body>');
document.write('<img src="' + opener.representation + '">');

</script>

</body>
</html>
  Démonstration


  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
  • Script intégré :
    img_gal_pop.zip
    21 Ko
    telechargez le script telechargez le script
    Script séparé :
    img_gal_pop2.zip
    21 Ko
    Recherche
    aide sur la recherche
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter