ajout d'images au centre d'un div à l'aide de jquery

Question

J'utilise le plugin crossSlide jquery pour mon diaporama. Mon conteneur est plus grand que les images qu'il contient, donc la tendance des images est positionnée à gauche. Existe-t-il un moyen de les positionner au centre du conteneur ?

voici le site d'exemple utilisant crosSlide puisque je n'ai pas de site web pour télécharger ma page d'exemple.

http://www.hashbangcode.com/blog/crossslide-jquery-plugin-test-348.html

Answer 1

Détermination du centre d'un élément à l'aide de jQuery :

si vous connaissez la largeur intérieure du parent et la largeur intérieure de l'élément, vous pouvez déterminer la position gauche que vous devez appliquer pour obtenir un "centre".

$("#crossslide img").each(function() {
  // let cl be (half parent width) - (half element width).
  cl = ($(this).parent().innerWidth() / 2) - ($(this).innerWidth() / 2);
  // we can set the left position to that value to achieve center
  $(this).css("left", cl);
});

Vous voudrez probablement associer la fonction qui effectue ce calcul à un gestionnaire permettant de modifier la taille du port d'affichage.

Answer 2

Voici le jQuery à appliquer à votre conteneur après son chargement dans la fonction ready :

var xSlideWidth = $('#crossslide').width();
var xSlideHeight = $('#crossslide').height();

$('#crossslide').find('img').each(function(i,obj) {
  var objXdiff = (xSlideWidth - $(obj).width())/2;
  var objYdiff = (xSlideHeight - $(obj).height())/2;

  $(obj).css({ 'left':objXdiff+'px', 'top':objYdiff+'px' });
});

Il passe en revue chaque image contenue dans le #crossslide et calcule la distance à laquelle il faut positionner le top y left (positionné de manière absolue par rapport au #crossslide) en fonction de sa taille.

Answer 3

Vous devrez peut-être modifier le plugin pour y parvenir. Je ne peux pas en être sûr sans voir ce que vous essayez d'accomplir. Cependant, cela fonctionne en utilisant la position absolue des images. Cependant, cela semble dépendre du fait que le conteneur fournisse l'origine de la position - par exemple, l'image est toujours à (0,0) du conteneur.

Le plugin ne semble pas avoir de moyen de vous permettre de changer cela de manière simple. Cependant, si vous regardez les options de l'option "L'effet Ken Burns" il semble avoir un moyen de le faire. Je ne sais pas s'il est possible de configurer un ensemble d'options qui produiront l'effet que vous souhaitez, mais ce serait mon point de départ.

Answer 4

J'ai eu le même problème, j'ai donc cherché "left :" dans le fichier jquery.cross-slide.min.js et j'ai trouvé cette section de code :

.css({position:"absolute",visibility:"hidden",top:0,left:14,border:0})

J'ai modifié la position de gauche et ça a marché pour moi.