Diaporama d'images avec liens

Soyez le premier à donner votre avis sur cette source.

Snippet vu 84 015 fois - Téléchargée 29 fois

Contenu du snippet

Diaporama d'images, avec lien individuel. Chaque image s'affiche en sa propre taille, dans une div centrée horizontalement et verticalement, ici non dimensionnée.
Formulaire d'arrêt et de reprise du diaporama, ainsi qu'un affichage ralenti ou accéléré.
Chaque image ayant son lien propre, il est paramétrable en popup ou même fenêtre, ou sans lien. Popup de dimension unique pour toutes.

------------

Source / Exemple :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
<META NAME="GENERATOR" CONTENT="notepad">
<META NAME="Author" CONTENT="Thierry Denele"> 
<META NAME="Date" CONTENT="2006-10-24"> 
<head> 
<script type="text/javascript" language="JavaScript"> 
var info = null; 
var bBoucle = true; 
var nim = new Number(-1);
var nimurl= new Number(0);
var plv = new Number(10000);
 
function ow(theURL,larg,haut) 
    { 
larg = Math.ceil(screen.width * (larg/100)*(1024/screen.width)); 
if(larg > screen.width) {larg = Math.ceil(larg*(95/100));} 
haut = Math.ceil(screen.height * (haut/100)); 
    if (info) 
        { 
            info.close(); 
            info =    window.open(theURL,"info","scrollbars=yes,menubar=yes,resizable=yes,width="+ larg +"px,height="+ haut +"px,outerwidth="+ larg +"px,outerheight="+ haut +"px,top=5,left=5,screenX=5,screenY=5"); 
            info.focus(); 
        } 
    else    { 
            info =    window.open(theURL,"info","scrollbars=yes,menubar=yes,resizable=yes,width="+ larg +"px,height="+ haut +"px,outerwidth="+ larg +"px,outerheight="+ haut +"px,top=5,left=5,screenX=5,screenY=5"); 
            info.focus(); 
        } 
    } 
  
//--- Partie Panorama d'images ----------------------------------------------- 
var imge=new Array();
imge[0]="photo_nebuleuseducone.jpg";
imge[1]="photo_trapezedorion.jpg";
imge[2]="photo_ugc10214.jpg";
imge[3]="icomlogonew.gif";
imge[4]="photo_papillon.jpg";
imge[5]="photo_tournesol.jpg";

var imgname=new Array(); 
imgname[0]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[0]; 
imgname[1]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[1];
imgname[2]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[2];
imgname[3]="http://www.internet.com/img/"+imge[3];
imgname[4]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[4];
imgname[5]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[5];
  
var imgpreload=new Array(); 
    for (i=0;i<=imgname.length-1;i++) 
        { 
            imgpreload[i]=new Image(); 
            imgpreload[i].src=imgname[i]; 
        } 
  
var imgurl=new Array(); 
imgurl[0]="http://www.javascriptfr.com"; 
imgurl[1]="http://www.javascript.com"; 
imgurl[2]="http://www.allhtml.com"; 
imgurl[3]="http://www.internet.com"; 
imgurl[4]="http://www.webreference.com/js"; 
imgurl[5]="#"; 
  
var imgdest=new Array(); 
imgdest[0]="popup"; 
imgdest[1]="popup"; 
imgdest[2]="self"; 
imgdest[3]="popup"; 
imgdest[4]="popup"; 
imgdest[5]="none"; 
  
//------- arrêt
function stopvaa() 
    { 
        bBoucle = false; 
        nim=0
    } 

//------départ-----------
function runvaa(nim) 
    { 
        bBoucle = true; 
    } 
  
//------- Changement image : images[0] implique ce soit la 1ère de la page, à changer sinon-----------------
function changeImg(nim) 
    { 
        nimurl=nim; 
        document.images[0].src = imgname[nim];
    } 
<!---//------ Ouverture de la popup suite au click sur l'image -----------------> 
function runurl(nim)
	{
        nim=nimurl; 
// si le paramètre self a été entré dans les données imgdest -> remplacement document courant
        if ( imgdest[nim] == "self" ) 
            { 
                document.location.href = imgurl[nim];
		if (info) { info.close(); }
            } 
        else 
            { 
// si none on ne fait rien
                if ( imgdest[nim] == "none" ) 
                { 
                void(0); 
                } 
// sinon on ouvre en 75% de large, 65% de haut
                else
                { 
                ow(imgurl[nim],75,65);
                } 
            } 
    } 
// fonction plus vite - moins vite

function pvite(pmv) { 
if (pmv == 0) { plv = (plv + 2000); 
    alert((10-plv/1000)/2);} 
else { if (plv > 1000) 
    {plv = (plv - 2000); pmv = 1;} 
    else {void(0);} 
alert((10-plv/1000)/2); 
    } 
} 

// Initiate, en fait la fonction de rotation des images.

function initiate() 
    { 
// incrémentation du numéro d'image
        nim++;
        if (nim>imgname.length-1) 
            { 
            nim=0;
            } 
        if (bBoucle) 
            { 
// commande de changement d'image 
           changeImg(nim); 
            } 
        if (bBoucle) 
            { 
// relance après un certain temps
            setTimeout("initiate()",plv); 
            }
// mise à jour de l'affichage du nom
	actualise_nomimage();
    } 

function actualise_nomimage() {
document.forms[0].elements[0].value = nim + 1;
document.forms[0].elements[1].value=imge[nim];
}
</script> 
</head> 
<body onload="runvaa(1);initiate();">
<div style="font-family:'Arial', sans-serif;font-size:10px;font-weight:700;text-align:center;vertical-align:middle;">
<p><a href="#" onclick="javascript:runurl(nim);return false;">
<!-----//------ script affichage de l'image ----------------------------->
<script type="text/javascript" language="JavaScript"> 
document.write("<img src='http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imgname[0]+"' style='border:0px;' alt='Cliquez ici...'></a>");
</script>
</p>
<!--//-------------------- Ligne de commandes ------------------------------------------->
<p><a href="#" onclick="stopvaa(); return false">Arrêter le panorama</a> - <a href="#" onclick="runvaa(1);initiate();return false">Reprendre</a> - <a href="javascript://" onClick="pvite(1)">Plus vite</a> - <a href="javascript://" onClick="pvite(0)">Moins vite</a> - Cliquez sur l'image !</p>
<!----//--------------------- Formulaire pour affichage du numéro et nom de l'image ----------------------->
<form name="noms">
<p>image numéro : <input type="text" name="numero" style="width:10px;color:darkblue;font-weight:700;background-color:#DDEE00;margin-right:10px;">
  Nom : <input type="text" name="nomimage" style="width:200px;color:darkblue;font-weight:700;background-color:#DDEE00;">
</p>
</form>
</div>
</body> 
</html>

Conclusion :


J'ai repris ici les images déjà mises dans le script images en background de perso.astroweb2000 (toujours merci à lui). On retrouve également le script que j'ai déjà mis dans Manipulation de 4 fenêtres popup : ow0 qui ouvre des popup avec ow0(url,x,y)
x et y étant les pourcentages d'écran en largeur et hauteur.
Donc dans les var imgwidth et imgheight, ce sont ces pourcentages qu'il faut mettre.
Dans imgdest, popup ouvre en popup, self dans la même fenêtre et none ne fait pas de lien (on s'en douterait).
Vous pouvez visiter les liens insérés, javascript ou pour webmasters e-business.

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
jeudi 11 février 2010
Statut
Membre
Dernière intervention
11 février 2010

Bonjour, Bravo pour le travail !

J'ai cependant un soucis ... soit je suis aveugle, soit j'en sais rien .. mais je ne vois pas le lien pour voir la démo, ni celui pour télécharger le script ...

donc si c'était possible d'avoir au moins la démo svp !

Merci.
Messages postés
6
Date d'inscription
lundi 16 mai 2005
Statut
Membre
Dernière intervention
21 février 2009

vos diapo sont tres belles sauf que j'ai essayé de les insérer dans une balise div mais ca ne marche pas
pouvez vous m'apporter de l'aide.
merci d'avance.
Messages postés
1
Date d'inscription
samedi 20 octobre 2007
Statut
Membre
Dernière intervention
16 novembre 2008

voila j'ai moi aussi utiliser ce diaporama fort interessant mais je n'arrive pas a l'intégrer a l'endroit voulu

http://www.cyclismactu.net/index.php

il me change l'image du header et non celui de la selection photo

malgres l'include

Notre Sélection de photos


<?php include('include/diaporama/test.php'); ?>



merci de votre aide
Messages postés
2
Date d'inscription
jeudi 3 août 2006
Statut
Membre
Dernière intervention
25 juin 2007

Bonjour Deny,

tu avais raison, ce diaporama fonctionne très bien. J'ai juste le même soucis que Passionnails. J'ai des photos en format portrait et d'autres au format paysage.
Lorsque je fais :
.........nebuleuseducone.jpg" style="border:0px; width:40%;
height:40%;"
Ca marche super dans Mozilla firefox, ca ne marche pas dans IE :-((
Si je fais :
.........nebuleuseducone.jpg" style="border:0px; width:200; height:300;"
Ca marche sur Mozilla et IE par contre les photos format portraits sont écrasées.
Je n'ai pas encore trouvé le bon compromis sauf éviter de faire des photos au format portrait ;-))
Messages postés
1
Date d'inscription
vendredi 22 juin 2007
Statut
Membre
Dernière intervention
22 juin 2007

merci
Afficher les 17 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.