plugin jCarousel. Centrer les images dans la page

Bonjour à tous :D

Je découvre JQuery, je suis actuellement en train d'essayer de modifier (un peu) le fameux script JCarousel trouvé ici.

J'ai réussi à apporter quelques modifs comme la taille, les espacements, lé fréquence de slide... Mais je bute sur quelque chose qui a son importance : centrer les images dans le bloc conteneur.

J'ai mis mon test en ligne ici, et ça fonctionne plutôt pas mal :) mais je voudrais qu'au chargement de la page (et le reste du temps) chaque image slidée soit centrée et laisse entrevoir les autres dans l'espace qui reste de chaque coté (selon la résolution et la taille de l'écran).

Un exemple de ce que je cherche à faire : http://miltonis.free.fr/000.gif

Savez-vous comment faire svp ? Pour ma part je sèche... :?

merci

Bonjour,

Je ne sais pas ce que tu as modifié exactement mais il n'y a pas de raison que mycarousel ai son width qui varie au cours du fonctionnement. :aie:

Pour le centrage, il faut modifier le calcul de left afin d'ajouter un offset valant la moitié de la différence entre les largeurs de l'image et de la zone de visualisation.
8O Ça a l'air super compliqué écrit comme ça :mrgreen:

Code:

---

offset = (mycarousel.width - imagevisible.width) / 2

---

devyan

Citation:

---

Envoyé par devyan

Bonjour,

Je ne sais pas ce que tu as modifié exactement mais il n'y a pas de raison que mycarousel ai son width qui varie au cours du fonctionnement. :aie:

Pour le centrage, il faut modifier le calcul de left afin d'ajouter un offset valant la moitié de la différence entre les largeurs de l'image et de la zone de visualisation.
8O Ça a l'air super compliqué écrit comme ça :mrgreen:

Code:

---

offset = (mycarousel.width - imagevisible.width) / 2

---

devyan

---

Merci de ta réponse Devyan,
Mais c'est JCaroussel, et la taille ne varie pas, où est-ce que tu vois cela ?

Concernant le code, je ne vois pas ou je dois ajouter/modifer la ligne de code.
Tu sais où c'est ?

Merci

Bonjour,

Si tu prends le lien de la démo, avec Firebug tu peux voir que LEFT varie mais que WIDTH reste inchangée.

Si tu prends le lien de ton exemple, avec Firebug tu peux voir que LEFT ne cesse de diminuer et que WIDTH augmente.

devyan

Citation:

---

Envoyé par devyan

Bonjour,

Si tu prends le lien de la démo, avec Firebug tu peux voir que LEFT varie mais que WIDTH reste inchangée.

Si tu prends le lien de ton exemple, avec Firebug tu peux voir que LEFT ne cesse de diminuer et que WIDTH augmente.

devyan

---

Oui je vois, je peux tout reprendre à zéro, pas de problème :)

Concernant le code, je ne vois pas ou je dois modifer le calcul de left comme tu me conseilles.
Tu sais où c'est ?
je te remercie

EDIT : j'ai trouvé porquoi le width s'incrémente à chaque fois, c'est parce que j'ai mis l'attribut Circular à Wrap
wrap: 'circular',

Mais je ne sais toujours pas où appliquer ton conseil ;)

Bonjour,

Vu le résultat actuel de ton exemple en lien tu as fini par trouver "où appliquer mon conseil" :)

devyan

Citation:

---

Envoyé par devyan

Bonjour,

Vu le résultat actuel de ton exemple en lien tu as fini par trouver "où appliquer mon conseil" :)

devyan

---

EN fait ce que j'ai fait c'est retoucher par le CSS au padding left-right du conteneur. Mais ça ne lui donne pas une largeur fluide.
L'idéal serait que la largeur s'adapte à la taille de l'écran et/ou la résolution.

Donc ma question reste toujours d'actualité :)

Je viens de faire un test avec la démo circular du jcarousel et Firebug ...

Ma conclusion est la suivante :

• dans $.ready() de calculer (comme indiqué dans une de mes réponses précédentes) l'offset nécessaire au centrage de l'image et mémoriser cette valeur.
• soustraire la valeur de l'offset à la position "left" de UL#mycarousel.
• lors d'un redimensionnement du jCarousel il faut réajuster le centrage et mémoriser la nouvelle valeur del'offset.

devyan

Je suis désolé, je ne comprends pas ce qu'il faut faire concrètement. je vois tout à fait ton conseil mais pas comment et où l'appliquer... :/

J'ai bien trouvé cette ligne correspondant au c.ready dans le fichier jquery-1.4.2.min.js mais je n'arrive pas à savoir qu'est-ce qui fait quoi. Comme je le disais au début de ce post, je ne connais pas le JQuery et ne suis pas réellement développeur... :oops:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

if(!c.isReady){ alert(c.ready); if(!s.body) return setTimeout(c.ready,13); c.isReady=true; if(Q){ for(var a,b=0;a=Q[b++];) a.call(s,c);Q=null } c.fn.triggerHandler&&c(s).triggerHandler("ready") } }

---

Est-il possible de m'orienter encore un peu plus ? Si OK, je joins le fichier en question.

Merci d'avance Devyan,

Bonjour,

Je pensai être suffisamment clair mais soit... le code suivant devrait faire l'affaire.

Citation:

---

Envoyé par devyan

• dans $.ready() de calculer (comme indiqué dans une de mes réponses précédentes) l'offset nécessaire au centrage de l'image et mémoriser cette valeur.
• soustraire la valeur de l'offset à la position "left" de UL#mycarousel.

---

Code:

---

1 2 3 4 5

var offsetLeft = 0; $.ready(function () { offsetLeft = parseInt($("#mycarousel").width) - 964) / 2; $("#mycarousel").left = parseInt($("#mycarousel").left) - offsetLeft; });

---

Citation:

---

Envoyé par devyan

lors d'un redimensionnement du jCarousel il faut réajuster le centrage et mémoriser la nouvelle valeur del'offset.

---

Code:

---

1 2 3 4 5

$("#mycarousel").resize(function(ev) { var newOffset = parseInt(ev.target.width) - 964) / 2; offsetLeft = newOffset; ev.target.left = parseInt(ev.target.left) + offsetLeft - newOffset; });

---

devyan

Merci Devyan,

Ma question sur l'endroit où appliquer tes conseils est toujours là... :)
est-ce sur le fichier html ?
ou le fichier jquery-1.4.2.min.js ?

Citation:

---

Envoyé par miltonis

Merci Devyan,

Ma question sur l'endroit où appliquer tes conseils est toujours là... :)
est-ce sur le fichier html ?
ou le fichier jquery-1.4.2.min.js ?

---

Là je ne vois pas ce que je peux faire de plus :aie:

jQuery et jCarousel sont des bibliothèques. Tu n'as à priori pas à intervenir dans le code source de ces fichiers. D'autant plus quand il s'agit des distributions "min" dans lesquelles tout est "compressé" et non documenté.

devyan

Citation:

---

Envoyé par devyan

Là je ne vois pas ce que je peux faire de plus :aie:
jQuery et jCarousel sont des bibliothèques. Tu n'as à priori pas à intervenir dans le code source de ces fichiers. D'autant plus quand il s'agit des distributions "min" dans lesquelles tout est "compressé" et non documenté.
devyan

---

Bon, tu dis que ce n'est pas dans la bibliothèque elle-même qu'il faut intégrer ton bout de code. j'en déduis que c'est dans le fichier html (entre les balises <script> bien sur)
Résultat, les image s'affichent les unes sous les autres (liste), donc on perd l'animation.

Je ne comprends pas tes réponses Devyan, tu dis eu c'est clair pour toi mais ça ne l'est pas pour moi. Du coup, je me sens ponctuellement pas super intelligent...
Aussi, je me permets une dernière fois ma question, à laquelle j'espère que tu vas répondre : dans quel(s) fichier(s) j'intègre tes deux bouts de code stp ?

Excuse mon ton, mais si d'autres comprennent sans rien y connaitre en JQuery, alors là pas de souci je m'incline et j'ajoute des excuses à mes remerciements 8-)

Bonsoir,

$.ready() c'est la même chose que jQuery(document).ready()

L'initialisation que je fais du carousel peut être placée dans mycarousel_initCallback() qui doit être faite pour ça ;)

Il y a des chances que le carousel dispose d'un autre événement correspondant au resize mais là il faut regarder la doc du carousel

Sinon en ce qui concerne le code d'exemple que je t'ai donné...
Oui dans HEAD. Il n'y a aucune raison que les images change de disposition (verticales au lieu de horizontales)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<script type="text/javascript"> function mycarousel_initCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; var offsetLeft = 0; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 3, wrap: 'circular', initCallback: mycarousel_initCallback }); offsetLeft = parseInt(jQuery("#mycarousel").width) - 964) / 2; jQuery("#mycarousel").left = parseInt(jQuery("#mycarousel").left) - offsetLeft; $("#mycarousel").resize(function(ev) { var newOffset = parseInt(ev.target.width) - 964) / 2; offsetLeft = newOffset; ev.target.left = parseInt(ev.target.left) + offsetLeft - newOffset; }); }); </script>

---

devyan