Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
Recharger cette page Fonction diporama
S'inscrire Règles FAQ Marquer les forums comme lus
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 20/09/2011, 11h59   #1
Invité de passage
 
Inscription : septembre 2011
Messages : 2
Détails du profil
Informations forums :
Inscription : septembre 2011
Messages : 2
Points : 0
Points : 0
Par défaut Fonction diporama
Bonjour, je me permets de vous contacter car j'ai un problème avec une fonction diaporama. La fonction marche très bien pour les images qui sont plus grandes verticalement qu'horizontalement. Je bloque donc la valeur de height à 300 grâce à l'appel de la fonction : $d=new PHPdiapo($path,$iddiapo,"classe",4, array("height"=>300));.

Le problème vient lorsque j'ai une image du style 1024 * 150. La fonction augmente automatiquement les dimensions de mon image et elle devient 1400 * 300. Ce qui sort de mes pages php.

Ce que je voudrais, c'est que le script ne modifie pas la largeur de l'image si sa longueur est égale ou supérieur à 1024, mais je voudrais ajouter en plus deux bandes blanches sur la hauteur pour que cette image fasse tout de même 300 de largeur, mais sans déformation, pour ne pas que ma page php ne bouge sans cesse en hauteur.

Je m'explique :
-si l'image fait 1024 * 450, le script me redimensionne l'image en X * 300 pour garder les proportions. Ceci fonction déjà tres bien.
-si l'image fait 200 * 500, le script me redimensionne l'image en X * 300 pour garder les proportions. Ceci fonction déjà tres bien.


-si l'image fait 1024 * 200, le script ne redimensionne pas l'image mais en revanche il ajoute deux bandes de chaque coté, soit (300 - 200 )/2 pour que l'image ait une hauteur toujours de 300 mais jamais une longeur supérieure à 1024. Là est mon probleme.


Fonction d'appel : $d=new PHPdiapo($path,$iddiapo,"classe",4, array("height"=>300));.

Code diapo :

Code :
Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<?php
 
class PHPDiapo {
	var $relPath;
	var $images;
	var $id;
	var $className;
	var $transition_time=3;
	var $transition_pause;
 
	function PHPDiapo ($path,$id,$className="",$timeout=3, $attrs=array()) {
        $this->attrs = $attrs;
		$this->relPath = $path;
		$this->id = $id;
		$this->className = $className;
		if ($timeout) $this->transition_pause = $timeout;
		$this->init();
		$this->write();
		}
 
    function init() {
 
 
		$this->images=array();
		$dir = $_SERVER["PATH_TRANSLATED"];
		$dir = substr($dir,0,strrpos($dir,"/")+1);
		$dir .= $this->relPath;
      	$hdl = opendir($dir);
 
		while (false !== ($file = readdir($hdl))) {
		       if($file!="." && $file!="..") {
			   // check file extension
			   $pattern = '/\.(gif|png|jpg|jpeg)$/i';
			   if (!preg_match($pattern, $file, $matches)) continue;
			   if(is_file($dir."/".$file))
			       $this->images[]="$this->relPath/$file";
                 //$test2=$test[0];
				//$this->test = $test2;
 
		//	   $this->images[]="$this->test/1200_1.jpg";
				}
		}
	}
 
	function write() {
		$this->write_func();
		$first=$this->images[0];
		$this->write_JS_init();
		echo $this->img($first,$id=$this->id,$className=$this->className);
		$this->write_JS_launch();
	} 
 
	function write_JS_init() {
		echo  "images['".$this->id."']=new Array();\r";
		for ($i=0;$i<sizeof($this->images);$i++) {
			echo  "images['".$this->id."'][$i]=new Image();\r";
			echo  "images['".$this->id."'][$i].src=\"http://doubsoccase.free.fr/ebay/".$this->images[$i]."\";\r";
			echo  "images['".$this->id."'][$i].alt=\"".$this->get_alt($this->images[$i])."\";\r";
		}
		echo "</script>\r\r";
	}
 
 
	function write_func(){
                echo "\r<script type=\"text/javascript\">\r";
 
		static $already_write = false;
		if ($already_write) {
 
                }
                else {
 
            echo "
var FRAME_PER_SEC = 20;
function set_opacity(el, op) {
    el.style.opacity = op;
    el.style.MozOpacity = op;
    el.style.KhtmlOpacity = op;
    el.style.filter = 'alpha(opacity=' + op*100 + ')';
    el.opacity = op;
}
 
function fade_in(imageId) {
    var img = document.getElementById(imageId);
    var incr = 1/((img.transition_time/3)*FRAME_PER_SEC);
    var newOp = img.opacity+incr;
    newOp = (newOp > 1) ? 1.0 : newOp;
    set_opacity(img, newOp);
    if (newOp < 1) setTimeout('fade_in(\"'+imageId+'\")',1000/FRAME_PER_SEC);
}
 
var images = new Array();
function run_diapo(diapoId) {
    obj = document.getElementById(diapoId);
    obj.src = images[diapoId][obj.index].src;
    obj.alt = images[diapoId][obj.index].alt;
    obj.title = images[diapoId][obj.index].alt;
    obj.opacity = 0.0;
 
    fade_in(diapoId);
    obj.index+=1;
    if (obj.index >= obj.length_diapo) obj.index=0;
    obj.timeout = setTimeout('run_diapo(\"'+diapoId+'\")', obj.transition_pause * 1000);
}\r";
			$already_write = true;
		}
	}
 
	function write_JS_launch() {
		$diapoID=$this->id;
		echo "\r<script type=\"text/javascript\">\r";
		echo "obj = document.getElementById('".$diapoID."');\r";
		echo "obj.transition_time=".$this->transition_time.";\r";
		echo "obj.transition_pause=".$this->transition_pause.";\r";
		echo "obj.index=0;\r";
		echo "obj.length_diapo=images['".$diapoID."'].length;\r";
		echo "obj.timeout;\r";
 
		echo "if (obj.length_diapo > 0) run_diapo('".$diapoID."');\r";
		echo "</script>\r\r";
	}
 
	function get_alt($src) {
		#  strip path
		$txt=substr($src,strrpos($src,"/")+1);
		# strip extension
		$txt=substr($txt,0,strrpos($txt,"."));
		# strip special chars
		$tostrip=array("_",",","-");
		for ($i=0;$i<sizeof($tostrip);$i++) $txt=str_replace($tostrip[$i]," ",$txt);
		return $txt;
	}
 
	function img($src,$id="",$class="") {
        $has_link = false;
		$alt=$this->get_alt($src);
        $img = "<img id='$id'  name='$id' class='$class' alt='$alt' title='$alt' src='$src'";
        foreach($this->attrs as $key=>$value)
        {
            if ($key=="href" && !$has_link) {
                $has_link = true;
                $img = "<a href=$value>$img";
            }
            else {
                $img .= " $key='$value' ";
            }
        }
        $img .= "/>\r";
        if ($has_link) $img .= "</a>";
		return $img;
	}
 }
 
?>

Merci d'avance.
casdale est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 20/09/2011, 12h10   #2
Responsable JavaScript & AJAX

 
Avatar de vermine
 
Inscription : mars 2008
Messages : 2 690
Détails du profil
Informations personnelles :
Âge : 27

Informations forums :
Inscription : mars 2008
Messages : 2 690
Points : 5 760
Points : 5 760
Par défaut Bienvenue !
Bonjour,

Nous aurions plus facile de vous aider avec le code HTML après génération.
__________________
Elen Poukram - Isegoria - Sandawe
vermine est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 20/09/2011, 13h05   #3
Invité de passage
 
Inscription : septembre 2011
Messages : 2
Détails du profil
Informations forums :
Inscription : septembre 2011
Messages : 2
Points : 0
Points : 0
bonjour, voici un code généré

Code :
Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<link href="http://doubsoccase.free.fr/miseEnVente/Commun/style.css" rel="stylesheet" type="text/css"><p align="right">Num&eacute;ro de l'objet : 2124</p><br><p id=titre>Standard téléphonique e-diatonis ASx P6LR avec batterie et téléphone Aastra D6757 et M670</p><br><div class="annonce"><p align="center">La solution packagée pour 6 utilisateurs, associant téléphonie d entreprise traditionnelle et IP pour optimiser l organisation de votre entreprise</p><p align="center">
<script type="text/javascript">
var FRAME_PER_SEC = 20;
function set_opacity(el, op) {
    el.style.opacity = op;
    el.style.MozOpacity = op;
    el.style.KhtmlOpacity = op;
    el.style.filter = 'alpha(opacity=' + op*100 + ')';
    el.opacity = op;
}
 
function fade_in(imageId) {
    var img = document.getElementById(imageId);
    var incr = 1/((img.transition_time/3)*FRAME_PER_SEC);
    var newOp = img.opacity+incr;
    newOp = (newOp > 1) ? 1.0 : newOp;
    set_opacity(img, newOp);
    if (newOp < 1) setTimeout('fade_in("'+imageId+'")',1000/FRAME_PER_SEC);
}
 
var images = new Array();
function run_diapo(diapoId) {
    obj = document.getElementById(diapoId);
    obj.src = images[diapoId][obj.index].src;
    obj.alt = images[diapoId][obj.index].alt;
    obj.title = images[diapoId][obj.index].alt;
    obj.opacity = 0.0;
 
    fade_in(diapoId);
    obj.index+=1;
    if (obj.index >= obj.length_diapo) obj.index=0;
    obj.timeout = setTimeout('run_diapo("'+diapoId+'")', obj.transition_pause * 1000);
}
images['exemple_1']=new Array();
images['exemple_1'][0]=new Image();
images['exemple_1'][0].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_10.jpg";
images['exemple_1'][0].alt="2124 10";
images['exemple_1'][1]=new Image();
images['exemple_1'][1].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_11.jpg";
images['exemple_1'][1].alt="2124 11";
images['exemple_1'][2]=new Image();
images['exemple_1'][2].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_12.jpg";
images['exemple_1'][2].alt="2124 12";
images['exemple_1'][3]=new Image();
images['exemple_1'][3].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_13.jpg";
images['exemple_1'][3].alt="2124 13";
images['exemple_1'][4]=new Image();
images['exemple_1'][4].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_14.jpg";
images['exemple_1'][4].alt="2124 14";
images['exemple_1'][5]=new Image();
images['exemple_1'][5].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_15.jpg";
images['exemple_1'][5].alt="2124 15";
images['exemple_1'][6]=new Image();
images['exemple_1'][6].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_16.jpg";
images['exemple_1'][6].alt="2124 16";
images['exemple_1'][7]=new Image();
images['exemple_1'][7].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_17.jpg";
images['exemple_1'][7].alt="2124 17";
images['exemple_1'][8]=new Image();
images['exemple_1'][8].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_18.jpg";
images['exemple_1'][8].alt="2124 18";
images['exemple_1'][9]=new Image();
images['exemple_1'][9].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_1.jpg";
images['exemple_1'][9].alt="2124 1";
images['exemple_1'][10]=new Image();
images['exemple_1'][10].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_2.jpg";
images['exemple_1'][10].alt="2124 2";
images['exemple_1'][11]=new Image();
images['exemple_1'][11].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_3.jpg";
images['exemple_1'][11].alt="2124 3";
images['exemple_1'][12]=new Image();
images['exemple_1'][12].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_4.jpg";
images['exemple_1'][12].alt="2124 4";
images['exemple_1'][13]=new Image();
images['exemple_1'][13].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_5.jpg";
images['exemple_1'][13].alt="2124 5";
images['exemple_1'][14]=new Image();
images['exemple_1'][14].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_6.jpg";
images['exemple_1'][14].alt="2124 6";
images['exemple_1'][15]=new Image();
images['exemple_1'][15].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_7.jpg";
images['exemple_1'][15].alt="2124 7";
images['exemple_1'][16]=new Image();
images['exemple_1'][16].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_8.jpg";
images['exemple_1'][16].alt="2124 8";
images['exemple_1'][17]=new Image();
images['exemple_1'][17].src="http://doubsoccase.free.fr/ebay/../../ebay/2124//2124_9.jpg";
images['exemple_1'][17].alt="2124 9";
</script>
 
<img id='exemple_1'  name='exemple_1' class='classe' alt='2124 10' title='2124 10' src='../../ebay/2124//2124_10.jpg' height='300' />
 
<script type="text/javascript">
obj = document.getElementById('exemple_1');
obj.transition_time=3;
obj.transition_pause=4;
obj.index=0;
obj.length_diapo=images['exemple_1'].length;
obj.timeout;
if (obj.length_diapo > 0) run_diapo('exemple_1');
</script>
 
</p><p align="center">- une gestion des appels entrants avec annonces et musique d attente <br>- une messagerie vocale évolutive avec option répondeur simple <br>- une solution compatible avec les offres de téléphonie illimitée <br>- un produit prêt à passer à l IP (raccordement de postes IP sur votre réseau local)<br><br>la solution packagée e-diatonis ASx P6LR permet de raccorder <br>- 2 accès numéris <br>- 2 lignes réseau analogiques <br>- 2 postes dédiés <br>- 4 postes simples <br><br>Le coffret ASxP6LR est accompagné d un poste dédié 6757 spécialement conçu pour assurer la fonction opérateur (standardiste).La batterie recommandée permet de maintenir en fonctionnement l installation pendant plus d une heure en cas de coupure du secteur électrique <br><br>Module d'extension pour Aastra 6757 <br><br>    36 touches de fonctions supplémentaires<br>    Témoins lumineux LED associés aux touches<br><br>Le module d extension Aastra M 670 est conçu pour augmenter la flexibilité du poste numérique Aastra 6757. Le M670 est équipé de voyants lumineux pour chaque touches et supporte de nombreuses fonctionnalités programmables comme la prise de ligne, la numérotation rapide, lappel partagé, l indication ne pas déranger <br>Le module M670 est conçu pour les réceptionnistes, les secrétaires ou les utilisateurs qui ont besoin de superviser et de gérer un grand nombre d appels.<br>    Avec le module d extension M670, vous passez de 20 touches de fonctions à 56 touches directes programmables.</p><div class="plus2"><p align="center" id="gras">Prix constaté 1956.18 euros TTC</p></div><div class="plus1"><p align="center" id="gras">En parfait état</p></div><br><p align="center"> Cliquez pour agrandir </p><p align="center"> <a href="http://doubsoccase.free.fr/ebay/2124/2124_10.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_10.jpg" width="307.2" height="214.2" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_11.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_11.jpg" width="307.2" height="64.2" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_12.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_12.jpg" width="307.2" height="85.8" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_13.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_13.jpg" width="307.2" height="163.5" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_14.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_14.jpg" width="307.2" height="165.6" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_15.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_15.jpg" width="307.2" height="238.5" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_16.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_16.jpg" width="307.2" height="171.3" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_17.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_17.jpg" width="307.2" height="256.8" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_18.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_18.jpg" width="307.2" height="208.8" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_1.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_1.jpg" width="307.2" height="241.8" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_2.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_2.jpg" width="307.2" height="219" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_3.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_3.jpg" width="307.2" height="140.7" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_4.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_4.jpg" width="307.2" height="89.1" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_5.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_5.jpg" width="307.2" height="96.6" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_6.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_6.jpg" width="307.2" height="91.5" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_7.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_7.jpg" width="307.2" height="74.1" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_8.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_8.jpg" width="307.2" height="209.4" border="0"></a>  <a href="http://doubsoccase.free.fr/ebay/2124/2124_9.jpg"target="_blank"> <img src="http://doubsoccase.free.fr/ebay/2124/2124_9.jpg" width="307.2" height="89.1" border="0"></a> </p></div> <hr>
<p> Suppl&eacute;ment de 1 euro inclus dans les frais de 
  port, pour la manutention et l'achat d'enveloppes, cartons, scotch. Merci de 
  votre compr&eacute;hension.</p>
  <p>Je d&eacute;cline toute responsabilit&eacute; en cas de d&eacute;t&eacute;rioration, 
  casse ou perte caus&eacute;es par le transporteur pour un envoi sans assurance.</p>
<p>Le frais d'envoi sont degressifs pour les envois group&eacute;s.</p>
<a href="http://doubsoccase.free.fr/miseEnVente/Commun/port.php" target="_blank">Infomartion complementaire sur les frais de port ici</a><br>
<p>Le poids de l'objet est de : 16Kg</p>
<p>Vous pouvez pouvez trouvez les tarifs en cliquant <a href="http://www.laposte.fr/content/download/9317/67273/file/M%C3%A9tropole%20BP.pdf?espace=particulier" target="_blank">ici</a></p>
 
<object data="http://doubsoccase.free.fr/miseEnVente/Normal/promo.php" type="text/html" width="100%" height="80">
</object>
casdale est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 20/09/2011, 22h17   #4
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
Bonsoir,
rien dans ce que tu nous montres ne redimensionne l'image affichée...si ce n'est la largeur imposée dans la balise.

Il te faut donc charger l'image et tester ses dimensions avant affichage pour ajustement éventuel.
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 03h33.

Nous contacter - Developpez.com - Archives - Haut de page

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum JavaScript

Blogs

Hébergement

 
Partenaires

Hébergement Web