Ajout d'images au centre à l'intérieur de div en utilisant jquery

Question

J'utilise crossSlide jquery plugin pour mon diaporama. Mon conteneur est plus grand que les images à l'intérieur, donc la tendance des images est positionnée dans la gauche. Y a-t-il un moyen de les positionner centré sur le conteneur?

Voici un exemple de site 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 en utilisant jQuery:

si vous connaissez le innerWidth du parent et l'innerWidth de l'élément que vous pouvez déterminer la position à gauche, 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 auriez probablement eu envie d'associer la fonction qui effectue ce calcul avec un gestionnaire pour changer la taille du port d'affichage.

Answer 2

Vous devrez peut-être modifier le plug-in pour ce faire. Je peux être sûr sans voir ce que vous essayez d'accomplir. Cependant, cela fonctionne en utilisant la position absolue des images. Cependant, cela semble reposer sur le conteneur fournissant l'origine de la position - par exemple. l'image est toujours à (0,0) du conteneur.

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

Answer 3

Voici le jQuery pour appliquer à votre conteneur après ils sont chargés dans la fonction prêt:

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' }); 
}); 

va essentiellement par chaque image contenue dans le #crossslide et calcule la distance pour positionner le top et left (absolument positionné par rapport au #crossslide) en fonction de combien il est plus petit.

Answer 4

J'ai eu le même problème, donc j'ai cherché le fichier jquery.cross-slide.min.js pour « gauche » et trouve cette section de code:

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

Je modifié la position gauche et travaillé pour moi.