Discussion :

[miltonis]

Bonjour à tous

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

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

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.
Ça a l'air super compliqué écrit comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devyan

[miltonis]

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.

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.
Ça a l'air super compliqué écrit comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[miltonis]

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

[devyan]

Bonjour,

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

devyan

[miltonis]

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é

[devyan]

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

[miltonis]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

[devyan]

Bonjour,

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

[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 ?

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

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

[miltonis]

Là je ne vois pas ce que je peux faire de plus
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

[devyan]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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