défilement de mes images?
Bonjour
J'ai besoin d'aide s'il vous plait, après avoir fais beaucoup de recherche sur le net, je n'ai pas trouvé, ou à vrai dire, j'ai pas bien pigé........:(, ça fait environs 2 semaines et..........:cry:
Ce que je veux faire c'est
j'ai dans une page des images des mes produits, avec photos, ce qui va se passez c'est quand je clique sur la photos, je transmet une variable (réf du produit) par l'adresse de la page, alors une page de photos de ce même produits va s'afficher, cette page m'affichera les photos du produits à partir d'un dossier, le problème que j'ai créer le code, les photos apparait en miniatures à gauche la fenêtre, (c'est j'ai réussi à le faire)
mais ce que je veux c'est ....au centre de ma page : les images diffileront automatique et au même temps si le visiteur pointe sur une iamge miniature, elle s'affichera au centre
j'espère que j'était clair,
voici le code de ma page photo.php
Code:
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
| <?php
$ref=intval($_GET['ref']);
?>
<?php
//nom du répertoire contenant les images à afficher
$nom_repertoire = 'photos/'.$ref;
//on ouvre le repertoire
$pointeur = opendir($nom_repertoire);
$i = 0;
//on les stocke les noms de fichiers images dans un tableau
while ($fichier = readdir($pointeur))
{
if (substr($fichier, -3) == "gif" || substr($fichier, -3) == "jpg" || substr($fichier, -3) == "png"
|| substr($fichier, -4) == "jpeg" || substr($fichier, -3) == "PNG" || substr($fichier, -3) == "GIF"
|| substr($fichier, -3) == "JPG")
{
$tab_image[$i] = $fichier;
$i++;
}
}
//on ferme le répertoire
closedir($pointeur);
//on trie le tableau par ordre alphabétique
array_multisort($tab_image, SORT_ASC);?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:152px;
top:20px;
width:582px;
height:650px;
z-index:1;
}
-->
</style>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.cycle.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready( function () {
$('#diapo').cycle({ /* #diapo signifie "le bloc ayant diapo comme id" */
fx: 'toss', /* effet choisi (voir la liste deroulante ci-dessous) */
timeout: 1000 /* temps en millisecondes (ici 2 secondes) entre chaque photo */
});
});
</script>
</head>
<body>
<table width="700" height="141" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="109">
<?php
//affichage des images (en 60 * 60 ici)
for ($j=0;$j<=$i-1;$j++)
{
$image = '<img src="'.$nom_repertoire.'/'.$tab_image[$j].'" width="60" height="60">';
?>
<div align="center">
<?php
echo $image.'<br /><br />';
?>
</div>
<?php
}
?>
</td>
<td width="591" align="center" valign="middle"><div id="diapo"> <?php for ($j=0;$j<=$i-1;$j++)
{
echo '<img src="'.$nom_repertoire.'/'.$tab_image[$j].'" width="600" height="600"><br />'; }
?>
</div>
</td>
</tr>
</table>
</body>
</html> |
si vous remarqué j'ai ajouter un effet jquery, mais......
merci pour votre aide
