Module Carrousel d'images

[Iron 11]

Pas de soucis, on patiente

[CroqueWeb 103]

Il y a 8 heures, PeterRabbit a dit :

C'est prêt

Ah ? Super ! C'est une joyeuse bonne nouvelle

Il y a 8 heures, PeterRabbit a dit :

mais mon hébergement est inaccessible. Je ne peux donc pas faire les dernières vérifications

J'espère que ton hébergeur refonctionnera bientôt, si il s'agit de pingfiles il est probable que ce soit le SSL qui bloque, dans ce cas désactive le partout, le protocole https n'est pas utile pour un site de tests.

[PeterRabbit 434]

Le s'agit bien de PF, mais ce n'est pas la cause. Je les ai contactés et relancés, mais aucun changement pour l'instant : tout est inaccessible, par http ou ftp.

[CroqueWeb 103]

En effet, tout est bloqué chez pingfiles

Leur propre site ne répond pas non plus !

[PeterRabbit 434]

D'après ce qu'on m'a répondu, ils ont eu un problème sérieux. Il semblerait même que le serveur soit irréparable. On m'a proposé une migration. J'attends la suite.

[pascal 1]

Bonjour PeterRabbit

 j'ai trouvé une solution pour mettre un carrousel je suis passé par Google slide et ensuite j'ai intégré le code de mon slide

 

Pour les grands débutants comme moi qui veulent comprendre la manip n'hésitez pas à me demander

 

[pascal 1]

voici le lien pour voir le carrousel

http://www.artisans-correze.fr/ZWII

[cybertaf 179]

il y a 3 minutes, pascal a dit :

Bonjour PeterRabbit

 j'ai trouvé une solution pour mettre un carrousel je suis passé par Google slide et ensuite j'ai intégré le code de mon slide

 

Pour les grands débutants comme moi qui veulent comprendre la manip n'hésitez pas à me demander

 

Une petit tuto ?

[cybertaf 179]

Ce thread a tellement de succès qu'un module officielle serait peut-être opportun...

[pascal 1]

1) Commencer par créer une présentation dans Google slide ensuite aller dans le menu Fichier aller en bas du menu et cliquez sur publier sur le web dans la fenêtre qui apparaît cliquez sur le bouton intégré cocher les cases démarrer le diaporama dès que le lecteur est chargé et redémarrer le diaporama après la dernière diapositive ensuite mettre à l'échelle la taille de votre présentation 

cliquez sur le bouton  en bas a gauche sur Publier (bouton bleux) de la va apparaître un code juste au-dessus que vous allez copier

 

Retourner sur zwii cliquez sur le signe (+)dans la barre d'outils dans le menu cliquez sur media lorsque la fenêtre apparaît cliquez sur intégré et coller le code que vous aviez précédemment copier et le tour est joué

Aidez-vous de la fonction tableau pour faire vos mise en page

Modifié 2 septembre 2018 par pascal

[PeterRabbit 434]

Content que tu aies trouvé ta solution, @pascal, je ne pensais pas que c'était ce que tu cherchais...

Dans le même genre, il y avait déjà l'intégration de Lychee proposée par @McGregor pour @omega.

 

Bon, je remballe mon plugin et je retourne dans mon trou, d'autant que Pingfiles n'est toujours pas venu à bout de ses incidents techniques. Dommage, c'est de loin le meilleur (quasi) gratuit du web.

 

 

Modifié 2 septembre 2018 par PeterRabbit

[CroqueWeb 103]

'ffectiv'ment !

[Iron 11]

Il y a 3 heures, PeterRabbit a dit :

Bon, je remballe mon plugin et je retourne dans mon trou, d'autant que Pingfiles n'est toujours pas venu à bout de ses incidents techniques. Dommage, c'est de loin le meilleur (quasi) gratuit du web.

 

 

 

Arf non...... si je peux éviter Google, ça m'arrangerait bien !

[Iron 11]

Tiens au passage, mon ami Timo nous a pondu ça :

A voir

[creatifmen 27]

@PeterRabbit hehe surtout ne retourne pas dans ton trou ,mais plutôt vas y fonce ont est avec toi enfin moi hiii ,google c'est de la daube une usine a GAZ (c est pas parce-que ça marche que c est bien) mieux vaut faire un truc comme tu pensais...

courage .

a++

Modifié 10 septembre 2018 par creatifmen

[pascal 1]

Bonjour crocweb ,

 

Il y a 13 heures, CroqueWeb a dit :

'ffectiv'ment !

Bonjour, CroqueWeb
sur mon site le carrousel fonctionne ce matin  ,des copains ont testé mon site d'essais http://www.artisans-correze.fr/ZWII/ 
avec différend navigateur et cela fonctionne

je ne suis pas assez calé pour te dire pourquoi tu as eu ce message (peut êtres que au moment ou tu étais sur le site je 
faisais mes expériences lol du carrousel

merci de ton retour

[CroqueWeb 103]

Test à l'instant avec Firefox sans aucun module :

 

Résultat :

 

Test avec un autre navigateur (Midori) :

 

Difficile de dire ce qui bloque, le code de ce diaporama étant propriétaire.

Je te recommande d'utiliser un diaporama open-source, tel que celui proposé par @PeterRabbit

[PeterRabbit 434]

Il y a 20 heures, creatifmen a dit :

@PeterRabbit hehe surtout ne retourne pas dans ton trou ,mais plutôt vas y fonce ont est avec toi enfin moi hiii ,google c'est de la dauble une usine a GAZ (c est pas parce-que ça marche que c est bien) mieux vaut faire un truc comme tu pensais...

courage .

a++

 

Merci pour tes encouragements, @creatifmen et votre insistance, @CroqueWeb et @Iron.

Vous allez être contents : vu que les problèmes de PigFiles semblent définitifs, j'ai ouvert un compte chez 000Webhost. C'est un peu baroque, l'adresse est à coucher dehors, mais la 8.312 fonctionne très bien.

Je peux donc faire les vérifications et finaliser la chose. Encore un peu de patience : le laïus explicatif, c'est encore ce qu'il y a de plus long à faire. 

Modifié 3 septembre 2018 par PeterRabbit

[PeterRabbit 434]

Il y a 21 heures, Iron a dit :

Tiens au passage, mon ami Timo nous a pondu ça :

A voir

 

Cool, le carrousel, @Iron, et facile à intégrer. 

[Iron 11]

@PeterRabbit : Bah oui, si ça peut vous aider à nous pondre un carrousel tiptop

[CroqueWeb 103]

Il y a 2 heures, PeterRabbit a dit :

Cool, le carrousel, @Iron, et facile à intégrer

Oui, super cool

il y a 11 minutes, Iron a dit :

Bah oui, si ça peut vous aider à nous pondre un carrousel tiptop

 

En copiant les données indiquées sur :

Le 02/09/2018 à 21:17, Iron a dit :

Tiens au passage, mon ami Timo nous a pondu ça :

A voir

 

Sans rien changer :

 

En modifiant les variables de tailles et de temps, toujours avec les photos de l'exemple (https://picsum.photos/)

 

 

Résultat :

 

Avec un peu de mise en page :

 

Donc, @Iron, le "slider" de ton ami Timo est des plus simples à intégrer, si on s'en donne un minimum la peine, évidemment

 

[CroqueWeb 103]

Pour copier-coller le code :

  <div id="my-slider">
  	<div id="my-slider-inner">
	   <img src="https://picsum.photos/570/270/?random&1" alt="Slide 1" />
	   <img src="https://picsum.photos/570/270/?random&2" alt="Slide 2" /> 
	   <img src="https://picsum.photos/570/270/?random&3" alt="Slide 3" />
	   <img src="https://picsum.photos/570/270/?random&4" alt="Slide 4" /> 
	   <img src="https://picsum.photos/570/270/?random&5" alt="Slide 5" /> 
	   <img src="https://picsum.photos/570/270/?random&6" alt="Slide 6" /> 
	   <img src="https://picsum.photos/570/270/?random&7" alt="Slide 7" />
	</div>
</div>

Ci dessus le code html et ci-dessous le script à insérer entre les balises <script></script>

'use strict'
// amount of images in the slider :
var amountImg = 7;
// width of one image (in pixels)
var widthImg = 570;
// waiting interval (in milliseconds)
var waitTime = 4000;


var deltaX = 0;
var slider = document.getElementById('my-slider');

 window.setInterval(doSlide, waitTime);

function doSlide() {
	deltaX += widthImg;
	deltaX %= amountImg*widthImg;
	console.log(deltaX);
	slider.querySelector('#my-slider-inner').style.marginLeft = '-' + deltaX + 'px';
}

Ces deux codes sont à insérer dans le code de votre page en mode édition du code

 

Ci dessous le css à ajouter la ou il va bien :

#my-slider {
	width: 570px;
	height: 270px;
	overflow: hidden;
	font-size: 0;
	margin: 0 auto;
}

#my-slider-inner {
	white-space: nowrap;
	transition: margin 1s ease 0s;
}

#my-slider > #my-slider-inner > img {
	display: inline-block;
	width: 570px;
	height: 270px;
}

Tout ceci est bien sur à adapter à la taille que vous souhaitez donner à votre diaporama, et par conséquent à la taille de vos photos.

 

Pour cela modifiez dans le html la source des images, tq :

<img src="/site/file/source/images-diapo/01.jpg" alt="diapo 1" />
<img src="/site/file/source/images-diapo/02.jpg" alt="diapo 2" />
etc...

Dans le script :

// amount of images in the slider : 
var amountImg = 7;// changer ce chiffre en fonction du nombre d'images dans le diaporama
// width of one image (in pixels)
var widthImg = 570;// changer ce chiffre en fonction de la taille de l'image (sa longueur en pixels)
// waiting interval (in milliseconds)
var waitTime = 4000;// modifiez le délai entre 2 diapos (en millisecondes)

Dans le CSS :

#my-slider {
	width: 570px; /* modifiez la longueur de l'image (ex: 450px) */
	height: 270px; /* modifiez la hauteur de l'image (ex: 230px) */
	overflow: hidden;
	font-size: 0;
	margin: 0 auto;
}

#my-slider-inner {
	white-space: nowrap;
	transition: margin 1s ease 0s;
}

#my-slider > #my-slider-inner > img {
	display: inline-block;
	width: 570px; /* modifiez la longueur de l'image (ex: 450px) */
	height: 270px; /* modifiez la hauteur de l'image (ex: 230px) */
}

Avis aux néophytes :

Ne modifiez que ce qui est indiqué ci-dessus.

Faites attention à la syntaxe, ne supprimez rien du code, par exemple, le point virgule est obligatoire...

 

 

 

 

 

[Iron 11]

@CroqueWeb

Hé, merci pour ce petit tuto ! Tu as été rapide sur ce coup

 

Je vous le dis, on va y arriver petit à petit tous ensemble, on va y arriver.

[CroqueWeb 103]

il y a 3 minutes, Iron a dit :

Hé, merci pour ce petit tuto ! Tu as été rapide sur ce coup

Je pensais que tu avais déjà intégré ce diaporama dans tes pages...

[CroqueWeb 103]

Ceux qui maîtrisent le CSS savent que l'on peut aussi modifier l'effet de transition :

transition: margin 1s ease 0s;