Comment append une image en taille réelle au centre d’une page Web à l’aide de jQuery?

Selon la configuration de mon site, j’ai une grid de vignettes dimensionnée en fonction de la résolution de l’écran de l’utilisateur et dotée d’un mécanisme de défilement. Une autre fonctionnalité que j’essaie d’append est la possibilité de cliquer sur une vignette pour que l’image sur laquelle vous avez cliqué apparaisse au centre de l’écran en taille réelle (ou aussi proche que possible de la taille réelle sans sortir de l’écran) au-dessus de l’écran. une couche transparente noire. Je me rends compte qu’il existe des plug-ins pour cela, mais j’essaie de faire les miens pour apprendre et se familiariser.

Voici ce que j’ai jusqu’à présent.

$('a.cell').click(function() { $('
').appendTo('body').fadeIn("slow"); var src = $('img', this).attr("src"); }); 

Cette fonction est destinée à appliquer la superposition à la page entière, ce qui ne pose aucun problème, puis à extraire le chemin de l’image à partir de la vignette sur laquelle l’utilisateur clique. Les vignettes sont des balises ‘img’ qui sont les enfants des balises ‘a’ avec la classe ‘cell’, elles ont une taille de 100×100 et le ‘src’ est le chemin d’access à l’image réelle. Je n’ai pas encore de vignette séparée ni de mécanisme de redimensionnement / rééchantillonnage, mais c’est quelque chose que je prévois d’append plus tard. Après cette partie je me trouve coincé quoi écrire ensuite. L’image doit être placée au centre de la page, être fondue au fond et être redimensionnée de manière à correspondre à sa taille maximale ou à sa proximité, sans dépasser les limites du navigateur. Une autre fonctionnalité importante que j’essaie d’implémenter est d’avoir une animation de chargement au centre de l’écran qui rest jusqu’à ce que l’image soit prête à être affichée et disparaisse lorsqu’elle n’est plus nécessaire.

• jQuery onclick ne fonctionne pas sur mobile
• Plusieurs identifiants identiques dans le même document HTML
• Comment faire en sorte que la couleur d’arrière-plan de la balise div ne cesse de changer à l’aide de JQuery?
• Basculer CSS3 fondu?
• CSS / Javascript Show / Hide DIV en utilisant une classe CSS?

• Comment masquer la barre de défilement mais toujours pouvoir faire défiler vers le haut / le bas
• javascript – changer le style d’une classe
• Liste des classes CSS connues à l’aide de Javascript
• Rotation d’un div Comment définir le point central?
• Quel est le meilleur moyen de créer un menu contextuel (liste déroulante HTML de sélection)?

 #overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #000; opacity: 0.8; filter: alpha(opacity=80); } #popupImage { position: absolute; left: -99999px; top: 0; } 

 $(document).ready(function(){ $('a.cell').click(function(){ // Add overlay $('
') .hide() .appendTo('body') .fadeIn('slow'); // Add image & center $('').appendTo('body'); var img = $('#popupImage'); var imgTop = ($(window).height() - img.height())/2; var imgLft = ($(window).width() - img.width())/2; img .hide() .css({ top: imgTop, left: imgLft }) .fadeIn('slow'); // Add click functionality to hide everything $('#overlay,#popupImage').click(function(){ $('#overlay,#popupImage').fadeOut('slow',function(){ $(this).remove(); $('#overlay').remove(); }); }) }); })