Site "diaporama" avec rafraîchissement toutes les minutes
Fermé
Michel K
Messages postés
9
Date d'inscription
mardi 12 novembre 2013
Statut
Membre
Dernière intervention
22 juillet 2014
-
22 juil. 2014 à 20:24
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 - 23 juil. 2014 à 15:19
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 - 23 juil. 2014 à 15:19
A voir également:
- Site "diaporama" avec rafraîchissement toutes les minutes
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site pour vendre des objets d'occasion - Guide
- Site inaccessible - Guide
2 réponses
mr_demonicon
Messages postés
828
Date d'inscription
dimanche 20 juillet 2014
Statut
Membre
Dernière intervention
9 avril 2016
126
22 juil. 2014 à 20:47
22 juil. 2014 à 20:47
Rien de plus facile avec par exemple https://amazingslider.com/
regarde ce code
regarde ce code
<!-- Insert to your webpage where you want to display the slider -->
<div id="amazingslider-3" style="display:block;position:relative;margin:16px auto 32px;">
<ul class="amazingslider-slides" style="display:none;">
<li><img src="images/2012-07-01 14.22.57 (2).jpg" alt="Réhabilitation d'une grange" data-description="Projet d'architecture d'intérieur" /></li>
<li><img src="images/2013-01-23-15.52.23.jpg" alt="La forêt enchantée" data-description="Projet d'architecture d'intérieur
Chambre de garçons" /></li>
<li><img src="images/Aviation.JPG" alt="Musée de l'aviation" /></li>
<li><img src="images/chipC2.jpg" alt="Mademoiselle" data-description="Projet d'architecture d'intérieur
Chambre de fille" /></li>
<li><img src="images/Emotion.JPG" alt="Emotion" data-description="Fusain sur feuille
75 €" /></li>
<li><img src="images/P1280606.JPG" alt="Anatomie" data-description="Fusain sur feuille
75 €" /></li>
<li><img src="images/Perenité.JPG" alt="Pérennité" data-description="Crayons de couleur A4
65 €" /></li>
<li><img src="images/Sizzla.jpg" alt="Sizzla" data-description="Fusain A3
80 €" /></li>
<li><img src="images/St gery.JPG" alt="Votre honneur" data-description="Crayon blanc sur feuille foncée
A3
75 €" /></li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li><img src="images/2012-07-01 14.22.57 (2)-tn.jpg" /></li>
<li><img src="images/2013-01-23-15.52.23-tn.jpg" /></li>
<li><img src="images/Aviation-tn.JPG" /></li>
<li><img src="images/chipC2-tn.jpg" /></li>
<li><img src="images/Emotion-tn.JPG" /></li>
<li><img src="images/P1280606-tn.JPG" /></li>
<li><img src="images/Perenité-tn.JPG" /></li>
<li><img src="images/Sizzla-tn.jpg" /></li>
<li><img src="images/St gery-tn.JPG" /></li>
</ul>
<div class="amazingslider-engine" style="display:none;"><a href="http://amazingslider.com" title="Responsive jQuery Image Slider">Responsive jQuery Image Slider</a></div>
</div>
<!-- End of body section HTML codes -->
Ysabe_l
Messages postés
12607
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
16 janvier 2025
276
Modifié par Ysabe_l le 23/07/2014 à 03:01
Modifié par Ysabe_l le 23/07/2014 à 03:01
Bonjour,
Le plus gros soucis de votre projet à mon avis c'est le nombre d'images, il va en falloir 1440 quand même.
Le côté "pleine page" est compliqué avec des images, une image ayant un ratio à respecter si on ne veut pas qu'elle soit déformée, et le ratio n'étant pas le même sur tous les écrans qui visionneront le site. Vous pouvez gérer ça facilement en mettant une image grande taille, un fond noir et définir l'image avec
ainsi il n'y aura jamais de scroll sur l'image.
Pour afficher la bonne image je vous propose la solution suivante :
- donner à chaque image le nom du moment correspond (1205.jpg pour 12h05 / 1514 pour 15h14 etc...).
- récupérer l'heure du serveur et en isoler l'heure et les minutes.
-afficher l'image correspondante
Après il reste à gérer le changement d'image toutes les minutes en mettant ça dans les balises head (en remplaçant "page.php" par le nom de la page.
Le seul inconvénient c'est qu'il rafraîchira toutes les minutes à partir de l'arrivée sur la page et pas pile au changement de minute (donc si la personne arrive à 8h45min59sec elle aura un décalage de presque une minute entre l'image et l'heure réelle).
Le changement peut être géré par un slider aussi, l'inconvénient sera un temps de chargement de la page très long (il devra charger les 1440 images ...) mais l'avantage sera un changement entre les images beaucoup plus fluide.
Le plus gros soucis de votre projet à mon avis c'est le nombre d'images, il va en falloir 1440 quand même.
Le côté "pleine page" est compliqué avec des images, une image ayant un ratio à respecter si on ne veut pas qu'elle soit déformée, et le ratio n'étant pas le même sur tous les écrans qui visionneront le site. Vous pouvez gérer ça facilement en mettant une image grande taille, un fond noir et définir l'image avec
img {
max-width: 100%;
max-height: 100%;
}
ainsi il n'y aura jamais de scroll sur l'image.
Pour afficher la bonne image je vous propose la solution suivante :
- donner à chaque image le nom du moment correspond (1205.jpg pour 12h05 / 1514 pour 15h14 etc...).
- récupérer l'heure du serveur et en isoler l'heure et les minutes.
$heure = date(Hi);
-afficher l'image correspondante
<img src="<?php echo $heure; ?>.jpg" alt="" />
Après il reste à gérer le changement d'image toutes les minutes en mettant ça dans les balises head (en remplaçant "page.php" par le nom de la page.
<meta http-equiv=refresh content="60;url=page.php">
Le seul inconvénient c'est qu'il rafraîchira toutes les minutes à partir de l'arrivée sur la page et pas pile au changement de minute (donc si la personne arrive à 8h45min59sec elle aura un décalage de presque une minute entre l'image et l'heure réelle).
Le changement peut être géré par un slider aussi, l'inconvénient sera un temps de chargement de la page très long (il devra charger les 1440 images ...) mais l'avantage sera un changement entre les images beaucoup plus fluide.
22 juil. 2014 à 21:22
Mais la création d'un slider me permettra t-elle de faire correspondre chaque image à une minute précise ? Je n'ai pas le sentiment que cela soit prévu...
Et je dois vraiment être calé sur une horloge.
Merci encore pour votre aide.
Cordialement
Michel K
22 juil. 2014 à 21:34
22 juil. 2014 à 23:09
J'ai téléchargé l'application et je vois bien la possibilité de fixer le temps entre deux slides, pas de souci, mais ce que je souhaite c'est que chaque image corresponde à une heure précise (ex. image 1 à 00h01, image 2 à 00h02...) et à aucun endroit je ne vois de d'heure associé aux images... Je ne souhaite pas que le slider démarre à l'image 1 quel que soit l'heure d'ouverture du site.
Merci encore
23 juil. 2014 à 15:19