Aller au contenu
Communauté Zwii et Yocto

Messages recommandés

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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

 

Partager ce message


Lien à poster
Partager sur d’autres sites
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 ? ;)

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Capture.PNG

Modifié par pascal

Partager ce message


Lien à poster
Partager sur d’autres sites

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é par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites
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 !

Partager ce message


Lien à poster
Partager sur d’autres sites

@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é par creatifmen

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour crocweb ,

 

Il y a 13 heures, CroqueWeb a dit :

'ffectiv'ment !

euh ?

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

Partager ce message


Lien à poster
Partager sur d’autres sites

Test à l'instant avec Firefox sans aucun module :

5b8d3356be2dd_Capturedu2018-09-0315-06-37.thumb.png.c8507c9269027a37aac31cff5be488f5.png

 

Résultat :

5b8d337e42a58_Capturedu2018-09-0315-05-15.thumb.png.662dfd574361e5a0398bef220528b7aa.png

 

Test avec un autre navigateur (Midori) :

5b8d33addaa6c_Capturedu2018-09-0314-48-30.thumb.png.4e3f0c44ff3fbe5eb2f8a003f6dd9c89.png

 

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

Partager ce message


Lien à poster
Partager sur d’autres sites
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. o.O

Modifié par PeterRabbit
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
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 :

slide1.thumb.png.c0af198196bcd186229417300444eadb.png

 

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

slide2.png.184b3a1a43630e3b06c9ca2fb6f40364.png

 

slide3.thumb.png.3ca0320cb7ff9b2fbc08292fae1d74f8.png

 

Résultat :

slide4.thumb.png.fcd7d4905ded96e6b80dec7b95440430.png

 

Avec un peu de mise en page :

slide5.thumb.png.b9c8126423f4cb2283ad6b635663c184.png

 

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

 

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

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

 

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

 

 

 

 

 

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
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...

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×