Carrousel à modifier

Version imprimable

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:

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

10/08/2019, 09h49
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.
10/08/2019, 17h46
apdf1

Bonjour jreaux62

Je te remercie mais en JS comment?

Max
10/08/2019, 18h52
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.
10/08/2019, 19h17
apdf1

Re,

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

Max
10/08/2019, 19h34
Invité

Montre le contenu du fichier, alors !
10/08/2019, 20h04
apdf1

1 pièce(s) jointe(s)

Re,

Voila une partie de mon fichier

Max

Bonjour,

Code:

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

Code:

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:

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................. :roll:

11/08/2019, 10h01
apdf1

Bonjour jreaux62

Je te remercie.

Citation:

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
11/08/2019, 10h06
Invité
Tu ne fais pas beaucoup d'efforts pour répondre, non plus...
Tu es aussi très avare de :plusser:...

:recherch: "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

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

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
<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>

11/08/2019, 10h46
apdf1

Re,

Je te remercie mais j'ai plus rien a l'écran et comme je ne sais pas travailler avec PHP?
11/08/2019, 11h19
Invité

Tant pis ? :calim2:

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

JavaScript est un langage "coté client".