[Pro] magnifier?

So, a little further investigation seems that using the Modernizr script may be above my pay grade…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Seth have a look at test have added Modernizr

https://www.dropbox.com/s/mu85d1aqjy316eq/elevatezoom2.zip?dl=0


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Matt. I’ve uploaded the modernize script and added the script code to the before section but still seeing zoom on iPhone, perhaps (most likely :slight_smile: I added the code incorrectly?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

forgot to add the link…

http://theminesoflight.com/zoom2.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK, sorry, I see that you had the code in the example. I have corrected mine but still getting the zoom window in iOS.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Seth, Sorry didn’t really check thoroughly myself. will have a look further when I get the chance.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try this one - http://deltadesign.co/FW7Test/elevate-zoom.html

Rather than use the ID to instantiate the zoom javascript as in the original ie:

 $("#img_01").elevateZoom({
    	  		zoomType : "lens",
    	  		lensShape : "round",
            		lensSize    : 150
    	  		}); 

I instead added a class to my image, of .zoom-me, in the same way you added the other extended attributes.

That way I can set up any image on my page with the .zoom-me class using:

	$(".zoom-me").elevateZoom({
    	  		zoomType : "lens",
    	  		lensShape : "round",
            		lensSize    : 150
    	  		}); 

Now that I have a class as the trigger I can use a bit of javascript to remove the class at smaller screen sizes.

So my new html markup in before is this. What this does is look for an ID of img_01 (which you added to the original img using Item>Extended) and it checks what class attributes it has. Then if your screen is smaller than 769 it will remove the class of zoom-me which was used as the initial trigger. What this will not do is remove the class if you start viewing on a screen larger than 769 and then reduce the browser width (without a refresh).

<script>
		(function(doc) {
				var zoombuster = doc.getElementById('img_01'),
					remove_zoom = function() {
						zoombuster.classList.remove('zoom-me');
					};
					if ( $(window).width() < 769) {    
				remove_zoom();
				} 
				else {
					//Add your javascript for other screens here 
					}
		})(document);

	$(".zoom-me").elevateZoom({
    	  		zoomType : "lens",
    	  		lensShape : "round",
            		lensSize    : 150
    	  		}); 
</script>

There are many other ways to do this - probably better ones.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great work around Dave, this works like a charm, i can now scroll and pinch to zoom in iOS.
Many, many thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

how can i create zoom/enlarge feature for html images?


freewaytalk mailing list
email@hidden
Update your subscriptions at:

This might be worth a look, one of my precious video’s by Dan Jasker …


freewaytalk mailing list
email@hidden
Update your subscriptions at: