web-dev-qa-db-fra.com

Comment ajouter un zoom avant/arrière sur le clic à tous les tags HTML img?

Quel est le moyen le plus simple d'ajouter un zoom avant/arrière sur le clic à toutes les images d'un document html (balises img)?

J'édite un document au format HTML et j'aimerais rester concentré sur le contenu de ce document. Pour cette raison, je préférerais éviter d'ajouter des éléments div supplémentaires autour de l'élément img, au moins dans le document source.

Existe-t-il un module javascript simple que je peux simplement brancher à cet effet?

Clarifier. Simple:

        img:hover {
            height: 400px;
        }

ferait presque le travail pour moi mais:

  1. ça casse la mise en page
  2. fonctionne avec hover et je préférerais travailler sur clic.

Basé sur Paulie_D, voici ce que j'ai finalement trouvé:

Fonctionne bien dans Chrome et IE9. J'ai essayé d'ajouter ce script à la réponse Paulie_D mais mon édition a été rejetée là-bas, alors la voici:

<style>
        img {
            cursor: pointer;
        transition: -webkit-transform 0.1s ease
        }
    img:focus {
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        var imgs = document.querySelectorAll('img');
        Array.prototype.forEach.call(imgs, function(el, i) {
            if (el.tabIndex <= 0) el.tabIndex = 10000;
        });
    });
</script>
javascriptjqueryhtmlcss
8
agsamek

Tout ce qui change la hauteur de l'image est susceptible de casser votre mise en page.

En conséquence, vous devriez regarder (IMO) transform: scale(x)

JSFiddle Demo (using: active as mousedown - il suffit de cliquer et maintenir)

CSS 

img {
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}

img:active {
    -webkit-transform: scale(2);
    transform: scale(2);
}
21
Paulie_D

ajouter un zoom avant/arrière sur le clic à toutes les images d'un document HTML (balises img)

Voir ce violon

JQuery

$('img').each(function(){
    $(this).click(function(){
        $(this).width($(this).width()+$(this).width())
    });
});

Le code ci-dessus ajoutera une fonctionnalité de zoom avant à tous les tags img.

2
Zword

Il existe de nombreux plugins jQuery disponibles pour zoomer sur les images. Peu sont

http://plugins.jquery.com/image-zoom/

http://www.elevateweb.co.uk/image-zoom/examples

0
Vinoth