11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Taille d'une image en jQuery

Bonjour

Je rencontre depuis deux jours un problème que je n'arrive pas à résoudre.

Ce que je veux faire:
- J'ai une page qui contient des "thumbnails" d'affiches.
- Quand je clique sur un "thumbnail" je veux afficher l'affiche en grand, mais en limitant à taille à la taille réelle de l'image, sans pour autant qu'elle dépasse 80% de la hauteur et de la largeur de la page

La feuille d'essai est à l'adresse http://www.alma-musica.net/tests/popup-test.html

Ce qui ne marche pas: la limitation de la taille. Tout se passe comme si la largeur était systématiquement 80% de la largeur de la page, par contre elle ne se limite pas à la taille réelle de l'image, et en ce qui concerne la hauteur rien n'a l'air d'être pris en compte.
Edit: je viens de constater que la largeur du bloc est calculée en fonction de la première affiche et ne s'ajuste pas aux images suivantes... c'est donc encore pire que ce que j'avais constaté précédemment!

J'ai tout mis dans la même page (HTML, CSS et Javascript) pour faciliter les échanges.
Voici la fonction JavaScript qui est sensée faire le travail et que je n'arrive pas à corriger
Je suppose qu'il doit s'agit comme d'habitude de quelque chose qui est évident et que je ne vois pas.
Tout ce qui s'appelle "popup" quelque chose concerne le bloc où s'affiche l'image en grand (popupBlock, popupImage, ...)
Merci de m'éclairer de vos lumières.

          function imgResize() {
                var $img = $('#popupImage');
                var maxWidth = $(window).width() * 0.8;
                var maxHeight = $(window).height() * 0.8;
                var Ratio = Math.min($img.width() / maxWidth, $img.height() / maxHeight);
                if (Ratio < 0.1) {
                    setTimeout(imgResize, 250);
                    return;
                }
                if (Ratio > 1) $img.css('width', Math.floor($img.width() / Ratio));
                $('#popupBlock').css('z-index', 100);
            }

Modifié par PapyJP (16 Apr 2015 - 11:59)
Modérateur
Bonjour,

$().width donne la largeur de l'élément (pas de l'image) et fournira la largeur de l'image si celle-ci n'est pas limitée par du CSS.

Comme tu définis une largeur fixe sur cette balise en CSS, le second appel à width() te retournera cette valeur.

Je vois trois solutions:
1) Au lieu de changer l'attribut à l'ouverture de la popin, ajouter une nouvelle balise IMG
2) Avant de changer le src, faire un .removeAttr('style') pour nettoyer la balise.
3) Utiliser les attributs du DOM, en HTML: naturalHeight et naturalWidth, qui retourneront la taille réelle de l'image (et non de l'élément). (IE9+)
Modifié par kustolovic (16 Apr 2015 - 12:12)
Merci Kusto, voilà au moins une piste de recherche.

J'avais déjà fait des essais dans cette direction (naturalWidth) qui n'ont rien donné.
J'ai également essayé d'utiliser $img.replaceWith() et ça n'avait pas donné grand chose non plus.
Je suppose que le(s) bug(s) devai(en)t être ailleurs....

Je vais regarder ce soir en rentrant chez moi.
Merci Kusto
J'ai suivi tes recommandations et j'ai fait

var $img = $('#popupImage');
$img.removeAttr('style');
$img.attr('src', imgPath);

au lancement du chargement de l'image, et la fonction litigieuse est devenue

function imgResize() {
    var $window = $(window), maxWidth = $window.width() * 0.8, maxHeight = $window.height() * 0.8;
    var img = $('#popupImage')[0];
    var imgWidth = img.naturalWidth, imgHeight = img.naturalHeight;
    var wRatio = imgWidth / maxWidth, hRatio = imgHeight / maxHeight;
    var Ratio = (wRatio < hRatio ? hRatio : wRatio);
    if (Ratio < 0.1) {
        setTimeout(imgResize, 250);
        return;
     }
                
     if (Ratio > 1) {
        imgWidth = Math.floor(imgWidth / Ratio);
        img.style.width = imgWidth + 'px';
        imgHeight = Math.floor(imgHeight / Ratio);
     }
     var imgTop = $window.scrollTop() + 20;
     var imgLeft = $window.scrollLeft() + (maxWidth - imgWidth) / 2;
     var $popupBlock = $('#popupBlock');
     var $popupTitle = $('#popupTitle');
     $popupBlock.attr('style', 
         'top:' + imgTop + 'px;left:' + imgLeft + 'px;width:' + imgWidth + 'px;height:' + (imgHeight + $popupTitle.height()) + 'px;z-index:100;');
}


J'ai encore des difficultés à distinguer ce qui peut être fait avec $img ou avec $img[0]
Par exemple est-ce qu'on peut retrouver naturalWidth depuis $img?
Modifié par PapyJP (16 Apr 2015 - 19:52)
Modérateur
Non,
$img est un objet jQuery,
$img[0] ou $img.get(0) retourne l'objet du DOM. (tel que retourné par un getElementById)

naturalWidth est une propriété de l'image dans le DOM. Dans certains cas jQuery offre des méthodes équivalentes, mais pas ici, notament pour des raisons de compatibilité.
kustolovic a écrit :
Non,
$img est un objet jQuery,
$img[0] ou $img.get(0) retourne l'objet du DOM. (tel que retourné par un getElementById)

naturalWidth est une propriété de l'image dans le DOM. Dans certains cas jQuery offre des méthodes équivalentes, mais pas ici, notament pour des raisons de compatibilité.

Ok, c'est ce que j'avais plus ou moins présumé par essais et erreurs.
Sujet clos
Aller à