J'ai un problème avec le plug-in imgareasElect dans Bootstrap.
Je fixe le parent dans l'initialisation de l'imgareaselect pour empêcher le déplacement de la zone de déménagement du défilement: et ceci est mon HTML: p> quand j'essaie de sélectionner un Zone, ImparaeasElect Sélectionne une zone située à l'extérieur de la photo, mais des points X1, X2 etc.) sont exactement que je veux (la fonctionnalité fonctionne correctement mais dans l'interface, il y a un problème).
Dans les plus petits appareils, l'interface imgareasElect est NIT, mais dans une situation, elle gâchez-vous!
Je cherchais beaucoup, mais je n'ai rien trouvé d'utile.
Comment puis-je résoudre ce problème? P> Mise à jour: strong>
J'ai résolu cela mon moi ...
Reportez-vous à ce lien:
github p> Nous devons supprimer ces lignes de code: p> /* Also check if any of the ancestor elements has fixed position */
if ($p.css('position') == 'fixed')
position = 'fixed';
6 Réponses :
Je veux dire que le parent div des images que vous souhaitez utiliser la zone d'image Sélectionnez dessus, doit être la position relative.
/* Also check if any of the ancestor elements has fixed position */
if ($p.css('position') == 'fixed')
position = 'fixed';
personnes qui ont des problèmes avec cela en combinaison avec vont à bootstrap.css et commencent la ligne suivante
Bien sûr, cela résout le problème, mais existe-t-il un moyen d'utiliser ImparaEsElect avec Max-largeur? Je pense qu'il doit y avoir une façon de choisir sur une image de prévisualisation redimensionnée, mais après avoir calculé les bonnes coordonnées. Je ne peux tout simplement pas faire passer. Des idées?
Je l'ai essayé mais ce n'est pas simple de mathématiques. Vous devriez connaître la quantité de pixels que l'image est mise à l'échelle et appliquer ce montant à l'imgareaselect par la suite .. Ce que j'ai fait maintenant, c'est quand un utilisateur télécharge une image, elle est réduite d'abord .. puis l'utilisateur peut utiliser imgareaselect, mais Je le réalise d'abord pour tout cela correspond à chaque écran
+1 Bien que ce soit vraiment une solution "non bonne", c'est le seul que je pouvais trouver cela résoudrait réellement (au moins temporairement le problème). Je vais toujours continuer à chercher une meilleure solution, mais jusqu'à présent, c'est tout, merci.
Vous pouvez modifier le code en imgareaselect, de sorte qu'il donne une classe au conteneur .. Ensuite, vous pouvez utiliser img.imgareaselect {max-largeur: auto;} (non testé)
Il existe plusieurs scénarios que Bootstrap.css peut affecter votre imgreaselect. Pour moi, configuration de la taille de la boîte: Contenu-box sur l'image corrigé mon problème.
<img id="cartPhoto" class="cartImageThumb" style="box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;">
html: jQuery: Solution: Utilisez l'option "Parent" pour fixer l'imgareaselect à un parent div / fenêtre.
avait le même problème.
La solution était la suivante: Vous devez définir du contenu modal en tant que conteneur parent et non d'image.
J'ai testé toutes les solutions proposées dans les commentaires, celle-ci a travaillé pour moi et n'a pas demandé la modification de l'une des bibliothèques.
Cela a fonctionné pour moi aussi. Cela devrait être cueilli comme la bonne réponse puisque elle est si simple à mettre en œuvre et fait également de sens intuitif.
J'ai eu le même problème. J'ai été recherché une solution sur ce fil, essayant toutes les options. Mais, lorsque j'ai lu la documentation, j'ai trouvé ces 2 propriétés:
http://odyniec.net /Projects/imgareaselect/USAGE.html P>
var image = $("#image");
image.imgAreaSelect({
imageHeight: image[0].naturalHeight,
imageWidth: image[0].naturalWidth
});
Génial, ce plug-in de l'imgareaselect également dans une fondation révèle. Merci
Où enlevez-vous ces lignes? Avoir le même problème
Y a-t-il une raison pour laquelle ce correctif n'a pas été accepté à imgareaselect?
Avez-vous corrigé ce problème? C'est toujours complètement dans la mauvaise position :( aucune aide serait la bienvenue!
Avez-vous supprimé la paix du code de la JS?
Cela fonctionne pour moi à Nyromodal aussi! Merci!