saywhat49

Module Carrousel d'images

Messages recommandés

PeterRabbit    295

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 (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
Iron    6
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
creatifmen    12

@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 (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
pascal    1

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

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
PeterRabbit    295
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 (Voir l’historique des modifications)
  • Like 1

Partager ce message


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

 

  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
CroqueWeb    91

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

 

 

 

 

 

  • Like 1

Partager ce message


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