Diaporama photo avec rediommensionnement des images

Télécharger le projet
Commenter

Description

tres simple à comprendre; il permet d'afficher des images et de les redimmensionner de "façon automatique"; je m'explique; dans le code il est possible de paramètrer la largeur maximale ou la hauteur maximale que l'on souhaite pour l'affichage de l'image;
il y a:
- deux boutons (droite gauche pour faire défiller les images dans un sens ou dans l'autre;
- deux zones de commentaire intitulées lieu et commentaire.

Source / Exemple : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>album photo</title>
<script type="text/javascript">
var index=0;
var indexmax=3;
var indexmin=0;
photo=new Array(indexmax);
comment=new Array(indexmax);
lieu=new Array(indexmax);
for( var i=0; i<photo.lenght; i++);
photo[i]=new Image();
photo[0]="photos/ducati1.jpg";
comment[0]="commentaire 1";
lieu[0]="lieu1";
photo[1]="photos/ducati2.jpg";
comment[1]="commentaire 2";
lieu[1]="lieu 2";
photo[2]="photos/ducati3.jpg";
comment[2]="commentaire 3";
lieu[2]="lieu 3";
photo[3]="photos/ducati4.jpg";
comment[3]="commentaire 4";
lieu[3]="lieu 4";
function plus(index)
	{
	index = index+1;
	if(index>indexmax)
		{
		index = indexmin;
		}
	newimage = new Image();
	newimage.src = photo[index];
	commentaire1.innerHTML=comment[index];
	commentaire2.innerHTML=lieu[index];	
	controleChargement();	
	return index;
	}

function moins(index)
	{
	index = index-1;
	if(index<indexmin)
		{
		index = indexmax;
		}
	newimage = new Image();
	newimage.src = photo[index];
	commentaire1.innerHTML=comment[index];
	commentaire2.innerHTML=lieu[index];	
	controleChargement();
	return index;
	}

function resize()
	{
	var imgmaxhauteur = 640;
	var imgmaxlargeur = 800;	
	var imglargeur = newimage.width;
	var imghauteur = newimage.height;
	var imgrapport=imghauteur/imglargeur;
	if(imgrapport>=1)
		{
		var imgnewhauteur=imgmaxhauteur;
		var imgnewlargeur=imglargeur*imgmaxhauteur/imghauteur;
		}
	else
		{
		var imgnewhauteur=imghauteur*imgmaxlargeur/imglargeur;
		var imgnewlargeur=imgmaxlargeur;
		}
	document.image.src = newimage.src;
	document.image.width = imgnewlargeur;
	document.image.height = imgnewhauteur;
	return index;
	}

function start(index)
	{
	newimage = new Image();
	newimage.src = photo[index];
	commentaire1.innerHTML=comment[index];
	commentaire2.innerHTML=lieu[index];	
	controleChargement();	
	return index;
	}

function controleChargement()
	{ 
	if(newimage.complete == false)
		{ 
		setTimeout('controleChargement()',1000) 
		}
	else
		{
		resize()
		}
	}

  </script>
</head>
<body onload="start(index)" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<center>
<h1>Album photo en javascript<br>
</h1>
<table align="center">
  <tbody>
    <tr>
      <td align="right"> <img src="back_arrow.gif" alt="" onclick="index=moins(index)" height="18"><br>
      </td>
      <td align="center" width="50"> Index<br>
      </td>
      <td align="left"> <img src="next_arrow.gif" alt="" onclick="index=plus(index)" height="18"><br>
      </td>
    </tr>
	</table>
<table align="center">
    <tr>
      <td colspan="3" align="center"><img name="image" alt="" src="#" align="middle"> </td>
    </tr>
    <tr>
      <td colspan="3" align="center">
      <h3><span id="commentaire1"></span></h3>
      </td>
    </tr>
    <tr>
      <td colspan="3" align="center">
      <h3><span id="commentaire2"></span></h3>
      </td>
    </tr>
  </tbody>
</table>
</center>
</body>
</html>

Conclusion :


c'est mon tout premier code en javascript; avec une découverte total du language; donc je vous prie d'etre indulgent.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.