The gist of it is (for a Tag) that you create a new Style and in the Tag field you would add div.zoomLens
Then add the other stuff in the extended section ie the cursor/url bit and then OK it.
Now go back to the name field and delete what FW has (not so) helpfully stuck in there for you - probably something like style26 - then Tab out of the Name field checking that FW hasn’t added something back in.
Now when you OK the dialogue you will have created a new Style called div.zoomLens which you do not need to apply to anything and which will be published in your CSS.
I successfully created the style but how do i apply it to the image? It doesn’t show up in the inspector…
The point about a Tag style is that you DONT actually have to apply it to anything. It affects the Tag - in your case div.zoomLens - so for any div with a class of zoomLens it will apply.
However you should be able to see it in the Inspector - and if it isn’t there then you have not created it correctly.
Just check exactly what you have in the cursor value field it should be (if that is the correct name/url of your image)
url('http://theminesoflight.com/Resources/magnify.gif'), auto
Just to really bang this point home – you are urged never to apply this sort of style (Tag-only) to anything. You may actually break the page if you do. Trust that it will work, know that it will not appear to work in the Freeway design view, but it will work if you preview in a browser (or Freeway), as well as in the final site.
Walter
On Apr 28, 2015, at 3:16 PM, DeltaDave email@hidden wrote:
Now when you OK the dialogue you will have created a new Style called div.zoomLens which you do not need to apply to anything and which will be published in your CSS.
I’ve redone this page in a full browser width version and everything seems to work fine on a computer but the site breaks on an iPad or iPhone and doesn’t scroll. Any ideas why this is happening? http://theminesoflight.com/zoom2.html
Can I just say that I am not finding this to be a good user experience.
These premise of these sort of scripts is to provide detail on otherwise relatively small product images and to use it on such large images I find jarring and unnecessary.
The experience on iphone is worse because the standard reaction would be to pinch and zoom and this flies against that.
Can you give us an insight into your reasoning for going down this route as there may be a better way that avoids the iphone no scroll problem which unfortunately is difficult to debug without the FW file.
BTW - is does actually scroll on iphone if you grab an area outwith the zoomContainer.
This is an update (excerpt) for kickstarter supporters of a forthcoming book. These are not the final images but a test for size. The authors idea is that the crumpled paper was stolen out of his waste paper basket and spy photographed and then uploaded to this webpage. That carries forward with the sleuth thing of reading the text with the zoom lens. This will be page they they get to from a link on the sites homepage. I know, weird but thats what they want…
Back to the iOS scrolling issue… I have changed the overflow to scroll on the images as well as added -webkit-overflow-scrolling: touch but am still not able to scroll, double tap to enlarge or pinch to zoom. As Dave said you can kind of scroll if you touch the very edge of the screen…
I could use some help in disabling zoom at smaller screen size. Removing any of the extended attributes is all or none. ElevateZoom’s webpage has no reference to it and I’ve done a google search but don’t find anything relevant. I tried changing the image at smaller breakpoints but that changes it for all.
