Discussion :

[apdf1]

Bonjour,

J'ai un Carrousel que j'aimerai amélioré.

J'ai une bonne centaine de photos à insérer et je voulais voir s'il était possible de faire une boucle dans mon code.

Une partie de mon code:!

Code HTML :

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
	<div class="slideshow">  
    	<ul>
    		<li><img src="Photos/Pascale%20Boyer.jpg"         alt="Pascale Boyer"      width="120" height="160" /><Div Class="titre" texte align="center">Pascale Boye</Div></li>
    		<li><img src="Photos/Petit%20Maud.jpg"            alt="Petit Maud"         width="120" height="160" /><Div Class="titre" texte align="center">Petit Maud</Div></li>
    		<li><img src="Photos/Sophie%20Mette.jpg"          alt="Sophie Mette"       width="120" height="160" /><Div Class="titre" texte align="center">Sophie Mette</Div></li>
    		<li><img src="Photos/Val%C3%A9rie%20Boyer.jpg"    alt="Valérie Boyer"      width="120" height="160" /><Div Class="titre" texte align="center">Valérie Boyer</Div></li>
            <li><img src="Photos/Sophie%20Panonacle.jpg"      alt="Sophie Panonacle"   width="120" height="160" /><Div Class="titre" texte align="center">Sophie Panonacle</Div></li>
    </ul> 
 
    </div>  
 
 
	<script type="text/javascript" src="js/carousel_jquery.min.js"></script>
 
    <script type="text/javascript">
                $(function(){
                        setInterval(function(){
                                $(".slideshow ul").animate({marginLeft:-350},800,function(){
                                        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
                                })
                        }, 3500);
                });
        </script>

Je vous remercie de votre aide

Max

[Invité]

Bonjour,

oui, c'est possible.

• soit en PHP, à partir d'un array PHP ou de données récupérées d'une BDD
• soit en JS, à partir d'un objet JS, contenant les données.

[apdf1]

Bonjour jreaux62

Je te remercie mais en JS comment?

Max

[Invité]

A toi de nous dire d'où proviennent les données...

• Bdd ?
• "en dur" dans le script ?
• d'un fichier (json) ?

Ensuite, il suffit de construire dynamiquement les <li>, avec une boucle for.

[apdf1]

Re,

Toutes les images viennent d'un fichier dans le même dossier

Max

[Invité]

Montre le contenu du fichier, alors !

[apdf1]

Re,

Voila une partie de mon fichier

Max

[Invité]

Bonjour,

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="slideshow"></div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.slideshow li img { 
  display:block;
  width:120px;
  height:160px;
}
.slideshow li div.titre { 
  text-align:center;
}

Code JavaScript :

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
'use strict';
const images = [
  { 'src':"Photos/Pascale%20Boyer.jpg" ,'alt':"Pascale Boyer" ,'titre':'Pascale Boye'},
  { 'src':"Photos/Petit%20Maud.jpg" ,'alt':"Petit Maud" ,'titre':'Petit Maud'},
  { 'src':"Photos/Sophie%20Mette.jpg" ,'alt':"Sophie Mette" ,'titre':'Sophie Mette'},
  { 'src':"Photos/Val%C3%A9rie%20Boyer.jpg" ,'alt':"Valérie Boyer" ,'titre':'Valérie Boyer'},
  { 'src':"Photos/Sophie%20Panonacle.jpg" ,'alt':"Sophie Panonacle" ,'titre':'Sophie Panonacle'},
];
const slideshow = document.querySelector('.slideshow');
const slideshow_ul = document.createElement('ul');
slideshow.appendChild(slideshow_ul);
images.forEach( function(image){
  let li = document.createElement('li');
 
  let img = document.createElement('img');
  img.src = image.src;
  img.alt = image.alt;
  li.appendChild(img);
 
  let div = document.createElement('div');
  div.classList.add('titre');
  div.textContent = image.titre;
  li.appendChild(div);
 
  slideshow_ul.appendChild(li);
});

Maintenant, s'il s'agit d'aller chercher automatiquement les images dans le dossier "Photos", c'est une autre affaire...
Mais comme tu ne sais pas répondre en faisant plus d'une phrase.................

[apdf1]

Bonjour jreaux62

Je te remercie.

Maintenant, s'il s'agit d'aller chercher automatiquement les images dans le dossier "Photos", c'est une autre affaire...

Oui c'est le problème mais comme je ne sais pas répondre au question je fait se que je peut.

Merci

Max

[Invité]

Tu ne fais pas beaucoup d'efforts pour répondre, non plus...
Tu es aussi très avare de ...

"parcourir dossier images"
Ça peut se faire en PHP.
Et ça permet de remplir automatiquement l'objet JS "images" (à supposer qu'en "titre" et "alt", on reprenne le nom de l'image).

• Parcourir un dossier d'images

[Invité]

Comme je n'ai rien d'autre à faire...

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
<div class="slideshow"></div>
<?php 
//nom du répertoire contenant les images ? afficher
$nom_repertoire = './Photos';
//on ouvre le répertoire
$pointeur = opendir($nom_repertoire);
 
//on stocke les noms de fichiers images dans un tableau
$tab_image = [];
while ($fichier = readdir($pointeur))
{
        $extension_file         = strtolower( pathinfo($nom_repertoire.'/'.$fichier, PATHINFO_EXTENSION) );
        $extensions_array       = array('gif','jpg','jpeg','png');
        if ( in_array($extension_file, $extensions_array) )
        {
                $tab_image[] = utf8_encode($fichier);
        }
}
//on ferme le répertoire
closedir($pointeur);
//on trie le tableau par ordre alphabétique -> FACULTATIF !
array_multisort($tab_image, SORT_ASC);
// OU : mélange aléatoire -> FACULTATIF !
// shuffle($tab_image);
?>
<script>
'use strict';
$(function(){
	const images = [
<?php   foreach($tab_image as $image){ 
        $image_file = htmlspecialchars($nom_repertoire.'/'.$image);
        $image_name = htmlspecialchars(pathinfo($image_file, PATHINFO_FILENAME));
?>
  { 'src':"<?php echo $image_file; ?>" ,'alt':"<?php echo $image_name; ?>" ,'titre':'<?php echo $image_name; ?>'},
<?php   } ?>
];
	const slideshow = document.querySelector('.slideshow');
	const slideshow_ul = document.createElement('ul');
	slideshow.appendChild(slideshow_ul);
	images.forEach( function(image){
	  let li = document.createElement('li');
 
	  let img = document.createElement('img');
	  img.src = image.src;
	  img.alt = image.alt;
	  li.appendChild(img);
 
	  let div = document.createElement('div');
	  div.classList.add('titre');
	  div.textContent = image.titre;
	  li.appendChild(div);
 
	  slideshow_ul.appendChild(li);
	});
	setInterval(function(){
	$(".slideshow ul").animate({marginLeft:-350},800,function(){
	  $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
	})
	}, 3500);
});
</script>

[apdf1]

Re,

Je te remercie mais j'ai plus rien a l'écran et comme je ne sais pas travailler avec PHP?

[Invité]

Tant pis ?

Il faut un langage "coté serveur" pour parcourir un dossier.
Comme PHP.

JavaScript est un langage "coté client".