Geek Answers Handbook

How to add zoom in / out when clicking on all img html tags?

What is the easiest way to add / zoom out when clicking on all images in an html document (img tags)?

I am editing a document in HTML and want to focus on the content of this document. Because of this, I would prefer not to add extra div elements around the img element, at least in the source document.

Is there any simple javascript module that I can just plug in for this purpose?

To clarify. Plain:

img:hover { height: 400px; }

will almost do the job for me, but:

  • he breaks the layout
  • works with a hang, and I would rather work on a click.

Based on Paulie_D's answer, here is what I came up with:

Works great in Chrome and IE9. I tried adding this script response to Paulie_D, but my editing was rejected there, so here it is:

 <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>
+6
source share
3 answers

Anything that changes the height of the image is likely to break your layout.

Accordingly, you should look at (IMO) transform: scale(x)

JSFiddle Demo (using: active as mousedown - just press and hold )

CSS

 img { transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; } img:active { -webkit-transform: scale(2); transform: scale(2); }
+16
source

add an increase / decrease when clicking on all images in the html-document (img-tags)

See this script

JQuery

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

The above code will add scaling functions to all img tags.

+2
source

There are many jQuery plugins for scaling images. Few

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

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

0
source

More articles:


All Articles