JQuery - carousel
Mr.White
Messages postés
251
Date d'inscription
Statut
Membre
Dernière intervention
-
Mr.White Messages postés 251 Date d'inscription Statut Membre Dernière intervention -
Mr.White Messages postés 251 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un soucis avec un carousel en Jquery. Avant d'entré dans les détail, j'aimerai simplement m'assurer de la faisabilité de ce que je cherche à faire.
J'interviens en faite sur un site où il y a un carousel, le problème c'est que l'affichage des image est calibré sur la première image alors que toute les image ne sont pas au même format ( portrait, paysage ). Le résultat et que certaine image sont du coup déformé.
J'aimerai donc savoir s'il est possible que l'affichage s'adapte à chaque image avec un carousel. En spécifiant juste une largeur, ainsi la hauteur se fixera en fonction du type de l'image ( portrait ou paysage ).
De base, les css définisse cette largeur, mais ça ne fonctionne pas. ( J'ai bien sur testé sans les css mais le problème vien bien du code js )
D'avance, merci ^^
J'ai un soucis avec un carousel en Jquery. Avant d'entré dans les détail, j'aimerai simplement m'assurer de la faisabilité de ce que je cherche à faire.
J'interviens en faite sur un site où il y a un carousel, le problème c'est que l'affichage des image est calibré sur la première image alors que toute les image ne sont pas au même format ( portrait, paysage ). Le résultat et que certaine image sont du coup déformé.
J'aimerai donc savoir s'il est possible que l'affichage s'adapte à chaque image avec un carousel. En spécifiant juste une largeur, ainsi la hauteur se fixera en fonction du type de l'image ( portrait ou paysage ).
De base, les css définisse cette largeur, mais ça ne fonctionne pas. ( J'ai bien sur testé sans les css mais le problème vien bien du code js )
D'avance, merci ^^
5 réponses
As-tu essayé d'enlevé les attributs width et height ? Tu les efface simplement, et peut-être alors ton carrousel se fixera sur tes images, je dis bien "peut-être".
Oui, j'ai testé, c'est ce que je veut dire quand j'écrit que j'ai testé sans les css ( ce sont mes css qui définisse les tailles, width: 200px ). Quand je fait ça, les image ne sont pas réduite, mais le problème reste de le même.
Pour être plus précis, le carousel prend pour référence la première image. Il y applique le css, dans mon cas 200px, puis applique cette taille à toutes les autres images. Donc la première image n'étant pas toujours la même, des fois il affiche un format portrait ( si la première image est un portrait ) pour toutes les images, et des fois un format paysage. Et je rappel que le problème est justement que j'ai ces deux type d'images à affiché. ( si je n'avait que des images en mode paysage, il n'y aurai pas de problème )
Donc en réalité, il applique bien mon css ( qui garde les proportions ), mais ne le fait que pour la première image, gardant la même hauteur et largeur pour toutes les autres.
Pour être plus précis, le carousel prend pour référence la première image. Il y applique le css, dans mon cas 200px, puis applique cette taille à toutes les autres images. Donc la première image n'étant pas toujours la même, des fois il affiche un format portrait ( si la première image est un portrait ) pour toutes les images, et des fois un format paysage. Et je rappel que le problème est justement que j'ai ces deux type d'images à affiché. ( si je n'avait que des images en mode paysage, il n'y aurai pas de problème )
Donc en réalité, il applique bien mon css ( qui garde les proportions ), mais ne le fait que pour la première image, gardant la même hauteur et largeur pour toutes les autres.
Tu peux essayer de mettre une classe par type d'image. Une classe .paysage et classe .portrait.
Et tu mets donc cette classe directement sur l'image.
Et tu mets donc cette classe directement sur l'image.
Pas possible, le carousel utilise la class de la balise <img pour son "ciblage".
Je pense que ça se joue dans les lignes suivantes du carousel :
( Normal que l'affichage est comme ça pour afficher du code ??? )
Je pense que ça se joue dans les lignes suivantes du carousel :
( Normal que l'affichage est comme ça pour afficher du code ??? )
var setupFeatureDimensions = function() {
// Set the height and width of the entire carousel container
pluginData.containerWidth = pluginData.featuresContainer.width();
pluginData.containerHeight = pluginData.featuresContainer.height();
// Grab the first image for reference
var $firstFeatureImage = $(pluginData.containerIDTag).find(".carousel-image:first");
// Large Feature Width
if (options.largeFeatureWidth > 1)
pluginData.largeFeatureWidth = options.largeFeatureWidth;
else if (options.largeFeatureWidth > 0 && options.largeFeatureWidth < 1)
pluginData.largeFeatureWidth = $firstFeatureImage.width() * options.largeFeatureWidth;
else
pluginData.largeFeatureWidth = $firstFeatureImage.outerWidth();
// Large Feature Height
if (options.largeFeatureHeight > 1)
pluginData.largeFeatureHeight = options.largeFeatureHeight;
else if (options.largeFeatureHeight > 0 && options.largeFeatureHeight < 1)
pluginData.largeFeatureHeight = $firstFeatureImage.height() * options.largeFeatureHeight;
else
pluginData.largeFeatureHeight = $firstFeatureImage.outerHeight();
// Small Feature Width
if (options.smallFeatureWidth > 1)
pluginData.smallFeatureWidth = options.smallFeatureWidth;
else if (options.smallFeatureWidth > 0 && options.smallFeatureWidth < 1)
pluginData.smallFeatureWidth = $firstFeatureImage.width() * options.smallFeatureWidth;
else
pluginData.smallFeatureWidth = $firstFeatureImage.outerWidth() / 2;
// Small Feature Height
if (options.smallFeatureHeight > 1)
pluginData.smallFeatureHeight = options.smallFeatureHeight;
else if (options.smallFeatureHeight > 0 && options.smallFeatureHeight < 1)
pluginData.smallFeatureHeight = $firstFeatureImage.height() * options.smallFeatureHeight;
else
pluginData.smallFeatureHeight = $firstFeatureImage.outerHeight() / 2;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Donc j'ai tester différente choses, sur les css ( jusqu'a tout virer ) sur le js ( jusqu'a virer toutes les lignes concernant les tailles) mais rien n'y fait.
Donc plutôt que de cherche alors que c'est peut-être le carousel que j'utilise qui est mal fichu, je préfère vous demander vos bonnes adresse de carousel ( voir même de visionneuse ) qui permet d'avoir dans sa liste d'image des portrait et des paysages et ceux même s'il tronque les images pour qu'elles rentre dans le cadre. L'important étant qu'il ne les déforme pas.
Et au passage, si quelqu'un peut m'expliquer le fonctionnement des balises quote de l'éditeur de message de ce site. Car comme vous pouvait le voir dans mon message précédent, le résultat est pas terrible ^^
Donc plutôt que de cherche alors que c'est peut-être le carousel que j'utilise qui est mal fichu, je préfère vous demander vos bonnes adresse de carousel ( voir même de visionneuse ) qui permet d'avoir dans sa liste d'image des portrait et des paysages et ceux même s'il tronque les images pour qu'elles rentre dans le cadre. L'important étant qu'il ne les déforme pas.
Et au passage, si quelqu'un peut m'expliquer le fonctionnement des balises quote de l'éditeur de message de ce site. Car comme vous pouvait le voir dans mon message précédent, le résultat est pas terrible ^^