Forum d'entraide PHPFrance

Bonjour,

Je cherche le moyen d'atteindre un élément de mon caroussel jquery sans recharger la page (ajax donc).

Quelqu'un a une idée du comment faire ?

Dans une liste html j'aurai testé la valeur php postée et j'aurai fait un echo selected mais là

Mega

Bonjour,

Il faut que tu regardes dans la doc du carrousel que tu utilises (Jquery a plusieurs dizaines de plugins de carrousels).
En général, il y a toujours une fonction javascript à appeler pour démarrer le carrousel par l'élément que tu souhaites.

Merci @rthur de ton retour (toujours les mêmes )

Bah en fait j'utilise celui-ci :
https://gist.github.com/dongyuwei/58646 ... arousel-js

Je vois bien un truc "first" mais j'ai pas l'impression qu'on puisse l'utiliser comme paramètre.

Mega

Effectivement, c'est le script de carrousel le + rustique que je connaisse, et ils n'ont pas prévu cela facilement.

2 possibilités :
- soit tu modifies le code javascript de ton carrousel existant pour ajouter à la fonction move() la possibilité de prendre un index en paramètre qui devra alors calculer où positionner le viewport.
- soit tu changes de script de carrousel pour en prendre un qui fait tout comme un grand :
Exemples issu du top 3 proposé par jQuery :
http://kenwheeler.github.io/slick/ => méthode slickGoTo() pour positionner le carrousel où tu veux.
http://sorgalla.com/jcarousel/ => méthode jcarouselControl(target)
http://fotorama.io/ => méthode show()

Un grand MERCI à toi @rthur pour ton coup d'oeil.

Pour le challenge je serai tenté de modifier le viewport avec le temps que ça prendra (sachant que j'en ai pas beaucoup)
mais quand je vois la foultitude d'options de ton top3, c'est que du bonheur ! (même si j'aime pas cette expression )

Et dernier petit point, le tout est gratuit et compatible avec MAC, tous les nav, supports, etc ? Full responsive ?

Mega

Et dernier petit point, le tout est gratuit et compatible avec MAC, tous les nav, supports, etc ? Full responsive ?

Oui, avec même la gestion du slide avec le doigt sur les tablettes pour Slik et Fotorama.

Génial, merci pour ce retour d'XP !!!

Je vois qu'on peut initialiser la première diapo comme je voulais seulement pour slick il attend un numéro hors comment faire quand tes éléments ont des noms et des id qui ne se suivent pas forcément.

Tu vois la problématique @rthur ? Si j'ai :

img41
img5
img77

initialSlide ne va pas comprendre et va attendre 0 pour img41, 1 pour img5, 2 pour img77... Comment faire cette correspondance ?

Je pensais sinon récupérer l'id du parent mais là pour le coup le "slicker" n'est pas encore instancié donc je ne peux même pas (enfin je crois)

Mega

Le numéro qu'attend Slick, c'est l'index donc le n° de page en qq sorte.

Comme c'est toi qui insère dans ton code HTML chaque image a afficher dans un certain ordre et bien tu as juste à stocker l'ordre dans lequel tu le mets dans ta page HTML pour savoir lequel appeler

Dans mon cas c'est un plus complexe (je pense)

Je poste en ajax une valeur qui peut être img77, img41, img2...tiens ou même sans le "img" 4, 10, 50, 89...

Dans ce JS j'exécute ma page traitement.php qui va récupérer l'id passé mais aussi instancié le slicker après le if (xhr.readyState === 4) { ...

mais à ce moment là je ne connais pas encore les id à venir...

Dans ma page traitement.php, je peux instancier le slicker ?

Mega

Je ne suis pas sûr de comprendre le fonctionnement de ton système.

Si ton carrousel est créé dans ta page principale et ensuite une requête Ajax (vers traitement.php?) doit indiquer quelle image afficher.
Dans ce cas, il faut que tu mettes dans un tableau javascript dans ta page principale, l'identifiant des images (img77, img41 ou 77, 41...) avec leur position dans le carrousel.
Et quand tu vas avoir ton retour ajax qui indiquera d'afficher l'image img41, tu auras juste à utiliser le tableau de correspondance pour savoir en quelle position il est dans le carrousel.

Re @rthur et merci pour ta patience.

Non justement mon slider est créé après, au retour de l'ajax.

Si je le fais avant, sur la première page, je poste pour le coup des id d'affichage et non les vrais id de mes images.

Mais comment re-récupérer la valeur initialSlide ? Ou faire un setAttribute sur mon slider depuis l'ajax...?

Mega

Je comprends toujours pas où est le problème.
Tu envoies quoi en paramètre dans ton appel ajax et tu reçois quoi en réponse ?

Si c'est la liste des images qui constitue la carrousel que tu reçois en réponse et celui qui doit démarrer l'affichage, et bien tu as simplement à appeler les fonctions de création (comme dans l'exemple "Add & Remove" de Slick) et de faire un GoTo sur l'index de celui qui t'intéresse.

Bonjour @rthur,

Voilà la donne imaginée j'ai une div avec un SELECT * FROM clients qui m'affiche tous mes clients ou une partie selon un affichage A.

Quand je clique sur un client je cherche à recharger cette même div avec d'un côté mon slider slick arrêté sur le bon client et de l'autre côté les infos propres à ce client.
Sachant que mon client peut avoir l'id1, puis 15, puis 27, il peut y avoir des trous, etc...

A la base je voulais poster le nom+id de mon client sauf que le slicker attend un integer donc du coup j'ai vu la chose différemment avec un $i=0; qui s'incrémente.

Comment ferais-tu la chose toi ?

Je ne sais pas/plus à quel moment initialiser mon slider. Au moment du post de la variable ? Sur une div cachée mais comment récupérée sur ma page principale la valeur postée via ajax ?

Mega

re re @rthur, (g posté au dessus mais à 2h du mat j'ai pas vérifié mes mails désolé la tête dans le slicker ^^)

Je te joins juste mon ajax, si tu peux me dire ou je faile stp :

[javascript]function jepostemavaleur(mavariable) {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
throw new Error("Ajax is not supported by this browser");
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status == 200 && xhr.status < 300) {
document.getElementById('madiv').innerHTML = xhr.responseText;
$('.your-class').slick({
infinite:true,
vertical:true,
slidesToShow: 3,
slidesToScroll: 1,
initialSlide: mavariable
});
}
}
}
alert(mavariable);//m'affiche bien l'id de l'élément posté
xhr.open('POST', 'traitement.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
}[/javascript]

Pour le coup le slicker s'arrête bien sur l'élément mais perd les pédales dès que je clique sur prev. Si je remplace initialSlide par une valeur en dur, pas de soucis

Merci pour ton aide.

Mega

Je veux bien ton avis sur mes derniers posts puisque tu sembles mieux caler que moi...

Ton "sharing" m'importe vraiment.

Bon, apparemment l'ajax couiné car la valeur postée était un string et non un integer (Merci PHP ! surtout à moi gros beta), me trompe-je ?

J'adore PHP car globalement pas besoin de typer ses variables, mais JS c'est pas PHP, oubli par manque de... de tout en fait (pratique, fatigue...)

Maintenant ça marche, p'tite correction :

[javascript]alert(mavariable);
var initial = parseInt(mavariable);
$('.your-class').slick({
infinite:true,
vertical:true,
slidesToShow: 3,
slidesToScroll: 1,
initialSlide: initial
});
alert('Vive le roi ');[/javascript]

Mega


Ps : @rthur, c'est ton prénom ou un hommage ?