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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxx</title>
<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
<link href="../x/base.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="principale">
<div id="entete">
<div id="menu">
<ul>
<li><a id="btnAccueil" href="../index.html"><span>Accueil</span></a></li>
<li><a id="btnPhoto" href="Photos.html"><span>Photos</span></a></li>
<li><a id="btnContact" href="Contact.php"><span>Contact</span></a></li>
</ul>
</div>
</div>
<div id="page">
<div class="highslide-gallery">
<?php
// on déclare un tableau qui contiendra le nom des images contenus dans le dossier
$tableau = array();
// on ouvre notre dossier contenant les miniatures
$dossier = opendir ('../x/y/petite/');
// Lecture du dossier et chargement de la table avec le nom de nos images
while ($fichier = readdir ($dossier)) {
if ($fichier != '.' && $fichier != '..') {
$tableau[] = $fichier; }
}
closedir ($dossier); // fermeture du dossier
$nbcol=5; // on défini le nombre de colonne sur lesquelles vont s'afficher nos images
$nbImage = count($tableau); // on compte le nombre d'images
$imageParPage=20; //Nous allons afficher 20 images par page.
$nombreDePages=ceil($nbImage/$imageParPage);//Nous allons maintenant compter le nombre de pages.
if(isset($_GET['page'])) // Si la variable $_GET['page'] existe...
{ $pageActuelle=intval($_GET['page']);
if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages...
{ $pageActuelle=$nombreDePages; }
} else { $pageActuelle=1;} // La page actuelle est la n°1
$premiereEntree=($pageActuelle-1)*$imageParPage; // On calcul la première entrée à lire pour chaque page
// si on a au moins une miniature, on affiche 20 images par page
if ($nbImage != 0) {
echo '<p class="centrer">'; //Pour afficher la liste des n° de page en les centrants
for($j=1; $j<=$nombreDePages; $j++) {
if($i==$pageActuelle) //Si il s'agit de la page actuelle...
{ echo ' [ '.$j.' ] ';
} else { echo ' <a href="xxxx.php?page='.$j.'">'.$j.'</a> ';}
}
echo '</p>';
echo '<p> </p>';
echo '<table>';
// recherche de la valeur maxi des images à afficher dans une page
if ( ($pageActuelle*20)<=$nbImage)
{ $result=($pageActuelle*20);
} else { $result=($pageActuelle*20)-(($pageActuelle*20)-$nbImage);}
// affichage des images
for ($i=$premiereEntree; $i<$result; $i++){
if($i%$nbcol==0) echo '<tr>';
// pour chaque miniature, on affiche l'image munie d'un lien vers la photo en taille réelle
echo '<td><a href="../x/y/grande/' , $tableau[$i],'" class="highslide" onclick="return hs.expand(this)" ><img src="../x/y/petite/' , $tableau[$i] , '" title="Clic pour agrandir" /></a></td>';
if($i%$nbcol==($nbcol-1)) echo '</tr>';
}
echo '</table>';
}
?>
</div>
</div>
</div>
</body>
</html> |
PHP et Highslide
Répondre avec citation
Partager