begin process at 2012 05 28 13:30:08
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > DIAPORAMA PHOTO AVEC REDIOMMENSIONNEMENT DES IMAGES

DIAPORAMA PHOTO AVEC REDIOMMENSIONNEMENT DES IMAGES


 Information sur la source

Note :
8,17 / 10 - par 6 personnes
8,17 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :diaporama, album, photo, javascript Niveau :Débutant Date de création :20/04/2006 Date de mise à jour :30/11/2008 11:05:58 Vu / téléchargé :34 953 / 4 564
Auteur : beshop78

Ecrire un message privé
Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <!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>
<!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.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

21 avril 2006 11:09:36 :
merci à kiki2sirom pour ces explications et remarques que j'ai pris en compte. n'hésitez pas à me faire des remarques constructives pour faire évoluer mon code.
28 avril 2006 09:44:24 :
Cette mise a jour concerne le chargement des images, j'ai rajouté un test qui vérifie que l'image, qui va etre affiché, est completement chargé en mémoire.
20 octobre 2006 20:25:57 :
un dernier problème subsistait lorsque en utilisant les touches de changement d'images avant et arrière; les commentaires et les lieux ne correspondaient plus à l'image affichée. merci Mitchoumy de me l'avoir rappeler. J'ai donc corrigé le script afin de régler à ce problème. j'ai aussi amélioré le script sur d'autres points (création des array et des variables gérant les images...) désolé pour le temps passer entre le dernier commentaire et ma mise à jour.
30 novembre 2008 11:05:58 :
apres quelques remarques concernant le centrage du bouton index au milieu de la photo. j'ai réalisé une petite modification dans le scipt qui devrait ravir tout le monde.

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CENTRAGE D'IMAGE AVEC PETIT EFFET par kazma
Source avec Zip Source avec une capture LIGHTBOX DIAPORAMA par kazma
GALERIE PHOTO DYNAMIQUE EN JAVASCRIPT "JQUERY" par zertyx
Source avec Zip Source avec une capture CAROUSELLE 3D par kazma
Source avec Zip Source avec une capture FAIRE DEFILER DES IMAGE A LA MOLETTE OU SOURIS par kazma

Commentaires et avis

Commentaire de johann1 le 21/04/2006 08:18:34

Je ne suis pas encore un champion en javascript, amis jusque là je vois une chose: c'est que ca fonctionne très bien!

Bonne continuation beshop78 !

Commentaire de kiki2sirom le 21/04/2006 10:34:11

je ne suis pas champion non plus en javascript mais bon je pense que 2 évènements onLoad dans le tag body, c'est pas permis du tout...

le deuxième, onload="tableau[index]", est inutile en l'occurence

ce que tu peux faire par exemple : un onload qui lance une fonction dans laquelle tu lances plusieurs fonctions :

function charge(){
    foo1();
    foo2();
}
<body onLoad='charge()'>

* de plus remplacer : <script language="JavaScript"> par <script type='text/javascript'>
l'attribut type est obligatoire dans les balises <script> <style> pour le HTML4.01

* et là je pinaille, mais c'est pour ton bien, le validateur W3C nous dit aussi que l'attribut alt d'une image est obligatoire, même si vide, et l'attribut src également

conseil amical : http://validator.w3.org/

tu peux ainsi valider ta source, c'est intéressant comme ça de connaitre le bon codage

Bonne source, à faire évoluer, car la base est bonne, et tu peux en faire qqch de plus "costaud"

kiki

Commentaire de econs le 21/04/2006 13:51:54 administrateur CS

Simple à comprendre et bien fait.
Mieux vaut quand même ne pas avoir 50 photos dans le diaporama...

Commentaire de maisseluc le 24/04/2006 22:44:54

pour un débutant en création de site, ce petit script me convient parfaitement, j'ai juste un peu rétréci les images.

Commentaire de kiki2sirom le 25/04/2006 09:36:53

je t'ai mis 9 pour les modifs que tu as faites... plus on apprend à coder correctement dès le départ, mieux ce sera pour la suite quand tu rentreras dans quelque chose de plus compliqué
surtout : les automatismes, ne plus avoir à réflechir à comment on écrit tel ou tel tag.

allez, je vais pinailler jusqu'au bout ;)

* il manque 2 alt dans 2 tags img (tu ne l'as mis que dans un seul)

* il faut mettre le tag <title></title> dans le <head></head> sinon tu auras une "erreur"

félicitations pour ta 1ère source

kiki

Commentaire de beshop78 le 25/04/2006 14:11:20

Merci à tous pour vos messages et remarques;
Par contre, chez moi, lorsque j'execute mon script, les images n'apparaissent pas toujours lors du premier chargement. Apres avoir fait "le tour" du diaporama; toutes les images apparaissent correctement. Existerai-t-il un moyen pour s'assurer du chargement de la photo et/ou de l'affichage de cette dernière à son emplacement désirée?

PS: lorsque je rajoute le tag <title></title> dans mon script, ce dernier n'affiche plus rien sous IE6 mais fonctionne sous firefox. est-ce normal? je ne pense pas.

@+ Beshop78

Commentaire de beshop78 le 28/04/2006 09:47:51

voila mon petit problème d'affichage d'image est resolu; J'espère que mon script sera util.

PS: Le script fonctionne parfaitement sous IE6 et Firefox.

@+ Beshop78

Commentaire de mitchoumy le 22/05/2006 15:02:13

Bonjour à tous !
Source excelente !
Seulement j'ai un petit problème avec...
Lorsque ma page s'affiche, j'ai bien ma photo1 avec le commentaire 1 et le lieu 1, mais quand je passe à la suivante, j'ai bien la photo 2 mais le commentaire et le lieux restent a 1 ! et ce décalage perciste sur toutes les photos suivantes...
Comment résoudre ce petit problème ?
Merci encore pour cette source qui va a merveille pour le site de mon mariage ! bye !

Commentaire de origamiste le 11/11/2007 20:03:49

Bonjour,

Je voulais souligner que ce code fonctionne bien. Il y a peut être une petite optimisation à faire. Lorsqu'on lance le diaporama sous IE 7 il ne centre pas le mot index entre les deux flèches de navigation.
Mais hormi ce détail ce code est intéressant. Bravo beshop78 et également merci car moi je ne suis pas encore capable de le programmer...

Commentaire de jeanclod13 le 29/11/2008 19:36:53

J'ai le meme problème que  MITCHOUMI et ORIGAMIX
leur problème a t'il été résolu ?
si oui, la correction serait la bienvenue
Merci

Commentaire de Sprsrini le 20/08/2009 11:18:29 9/10

Très bonne source.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Diaporama javascript [ par standoff ] lien sur photos en javascript [ par missFlo17 ] Bonjour bonjour,Voilà, j'ai un diaporama de photos en javascript et j'aimerai que chaque photo correspond à un lien vers une page (1 page différente p !!! Défi !!! recherche diaporama [ par tamtamdesign ] Bonjour,je suis nouvelle venue sur ce site (tr&#232;s int&#233;ressant).Voil&#224;, je recherche un script pour mes pages album photos.Mais comme j'ai lien vers photo [ par fabz01 ] Bonjour &#224; tous, Voil&#224; je suis d&#233;butant et je rame &#233;norm&#233;ment avec le javascript. j'ai un exo &#224; faire et &#231;a fait p javascript et photo [ par nico11 ] je suis d&#233;butant - un copain m'a fait un bon site de mes photographies - mais&nbsp;le copain&nbsp;n'est plus tr&#232;s accessible - alors comme j une diaporama des images avec l’audio avec javascript [ par a_moukriss ] bonjour j'espere quie je suis dans le bon endroi pour poster ma question ! je veux realiser une diaporama (avec javascript)des images avec l'audio q diaporama en javascript [ par rsempe ] Bonjour, J'aimerais réaliser un diaporama en javascript Etant donné que je débute dans le domaine j'aimerais avoir quelques conseils Si vous avez des javascript et mac ? [ par leyoy ] Bonjour,j'ai fait un site avec du java .Pour vous donner un exemple, il suffit de placer la souris sur une photo miniature pour voir apparaitre en gra Administration d'un album photo dynamique à base PHP MYSQL .. [ par bamohamed ] to be or not to beMerci à toute l'équipe javascriptfr pour m'avoir accorder une solution pour mon dernier problème ..cette fois ci j'ai un ptit truc q Diaporama Javascript [ par tug ] Bonjour, J'aimerais faire un défilement de 15 images dont 5 sont deja visibles sur la surface de pre affichage et à l'aide des boutons suiva


Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,858 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)