Bonjours, à tous je suis actuellement entrain de créer un diaporama avec php (défilement automatique, recherche des photo dans un répertoire) et je voudrais savoir comment fait-on pour que les images qu'il cherche dans le dossier soit tous à la même taille. je m'explique je voudrais que chaque photo est une taille de widht:1296px sur height:960px. Es-ce- que quelqu'un pourrait m'aider? Merci d'avance
Ps: voici mon code php et css
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 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- jQuery library (served from Google) --> <script src="http://ip/test_parfait.js"></script> <!-- bxSlider Javascript file --> <script src="http://ip/test.js"></script> <!-- bxSlider CSS file --> <link href="http://ip/test.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, // départ automatique mode: 'fade' // mode de transition ('horizontal', 'vertical', 'fade') }); }); </script> <style type="text/css"> .bxslider-wrap { width:100% max-width:1296px max-height:960px; } </style> </head> <body> echo "<body bgcolor='black'>"; <?php // 1/ RECUPERATION des IMAGES dans le DOSSIER //nom du répertoire contenant les images à afficher $repertoire = './Test'; $extensions_ok = array('gif','jpg','jpeg','png'); // extensions recherchées : images uniquement //on ouvre le repertoire $pointeur = opendir($repertoire); //on stocke les noms des fichiers des images trouvées, dans un tableau $tab_image = array(); while ($fichier = readdir($pointeur)) { if ( in_array( strtolower(pathinfo($fichier,PATHINFO_EXTENSION)), $extensions_ok) ) { $tab_image[] = $fichier; } } //on ferme le répertoire closedir($pointeur); ?> <div class="bxslider-wrap"> <ul class="bxslider"> <?php // 2/ AFFICHAGE des IMAGES if( !empty(($tab_image)) ) { // ordre aléatoire shuffle($tab_image); //affichage des images foreach( $tab_image as $image ) { ?> <li> <img src="<?php echo $repertoire.'/'.$image; ?>" alt="" /> </li> <?php } } ?> </ul> </div> </body> </html>
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 /** * BxSlider v4.1.2 - Fully loaded, responsive content slider * http://bxslider.com * * Written by: Steven Wanderski, 2014 * http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * http://bxcreative.com */ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: center; margin: 0; padding: 0; *zoom: 1; border:none; } .bx-wrapper img { max-width:1296px auto; max-height:960px auto; display: block; margin:0; border:none; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none; left: 0px; background: #000; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0) } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: 0px; width: 100%; margin:0; border:none; } /* LOADER */ .bx-wrapper .bx-loading { min-height: 0px; background: url(images/bx_loader.gif) center center no-repeat #000; height: 100% auto; width: 100% auto; position: absolute; top: 0; left: 0; z-index: 2000; margin:0; border:none; } .bx-wrapper .bx-controls-direction a.disabled { display: none; border:none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; margin:0; border:none; } .bx-wrapper .bx-controls-auto .bx-start { display: center; text-indent: -9999px; width: 1296px auto; height: 960px auto; outline: 0; background: url(images/controls.png) 0px 0px no-repeat; margin:0; border:none; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: 0px 0; margin:0; border:none; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 0px; height: 0px; outline: 0; background: url(images/controls.png) 0px 0px no-repeat; margin:0; border:none; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: 0px 0px; margin:0; border:none; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 10%; margin:0; border:none; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 0px; margin:0; }
Partager