Menu
Community /Pin to ProfileBookmark
@PeterPan_321Sep 19.2016 — #Yeah thanks. I had tried a pure CSS method, and I realize you don't have to use javascript. But I guess I wanted a particular behavior, and I learn a lot coding myself. I just figured being a developer forum, I'd at least learn some techniques, or get some improvement suggestions on whatever I came up with. In the end I did roll my own in pure Javascript, and thought it was pretty coll that I even got it to work back to IE8. :-) I would like to share the code for others to use, but I tend to put all my documentation into a comments section, which of course makes it too big to cut/paste and share on the forum. Its all in a JS file I called "simpleZoom.js" in my "SCRIPTS' folder on my site, but due to the anti-hotlinking .HTACESS file, you haave to visit the site with a browser before you can directly access it.
Here's an example of use, in a page I made documenting my construction of a speaker linear array. Click on any image, and a new instance of it will expand from the middle of the screen. The expansion will stop when any screen boundary is reached, so its usefulness is limited in a tall image. But it seems to work on all versions FF, Chrome, Safari, and whatever my old android tablet came with. Works on IE too, at least back to 8. It was fun and could be improved (like allowing a few more levels of zoom and pan), but like i said, I learned a lot.
http://elfintechnologies.com/LineArray.html @PeterPan_321Sep 19.2016 — #
I like those! I could use something like that in a case where I needed to show a diagram, where small details needed to really be expanded sufficient to read. Thanks!
For now, the solution I came up with can't do all that, but it is useful for at least getting a little bit of a closeup of various images. It just expands an image to the size of the screen, whatever limit it hits first. So of course its most effective in cases where the aspect ratio of the image is similar to your screen/window. Here's an example...
[URL]http://elfintechnologies.com/LineArray.html[/URL]
As I mentioned in a previous comment, the code I wrote is called simpleZoom.js, and its linked into that page from my "scripts" folder. If you want it, all its usage and explanation is in its comments. But due to my hot-link restrictions, you have to go to a page on my site with a browser first. and THEN you should be able to fetch the script.@PeterPan_321Oct 06.2016 — #
I appreciate that, but I wasn't looking for a whole site solution here... just a utility for zooming in on photos. I know there are a million options out there when it comes to buying or using someone else's product, but every time I build my own code and method to do something, that becomes another tool I can draw on again and again. And since I wrote it, I can more easilly modify and improve it as necessary.
suggestions for techniques, presenting images with magnification
I have a hand coded site (elfintechnologies.com), and I’m learning about responsive design. I’m OK with putting images on a page and using various scaling techniques so my pages look “reasonable” on mobile or desktop browsers, or on different size windows. But I’m a little in a quandary about some of the more detailed technical paqes I have planned. There will be cases where I need to mix text and graphics, but would like the visitor to be able to look close-up and pan around to see detail, as you’d often see on e-bay sales. Perhaps even print easily if its something like a diagram. So the first question is for a recommended script for doing this. I’m pretty sure it can be done with all CSS these days, but of course I want visitors with less then very latest browsers to still be able to see. Or at least fall back to a full screen shot in a separate window if that’s all it can do. I’m aware, of course, that I should prepare at least two images, a smaller one for the text of the articles and a larger size for the closeup. But I wouldn’t mind seeing some working methods for putting it together, instead of totally starting from scratch.
The more confusing question though is what should I should do in the small mobil case! Its a good question because I seldom see anyone do something reasonable for a phone browser. I can kind of understand that maybe its just not practical, but it would be nice for a visitor with a phone to at least be able to tap an image to see it full screen, and tap again to restore.
The pages I’m planning are going to be for detailed technical specs, so its tempting to just advise phone size visitors to come back later with a full size screen if they wan’t to see the images in greater detail. But maybe there are inexpensive packages or free scripts for doing this kind of thing, with reasonable compromises for phone size screens?
Sometimes the hardest things is deciding what makes sense, before you start trying to code a solution. 😉
Sign in
to post a comment5 Comments(s) ↴
0
@PeterPan_321Sep 19.2016 — #Yeah thanks. I had tried a pure CSS method, and I realize you don't have to use javascript. But I guess I wanted a particular behavior, and I learn a lot coding myself. I just figured being a developer forum, I'd at least learn some techniques, or get some improvement suggestions on whatever I came up with. In the end I did roll my own in pure Javascript, and thought it was pretty coll that I even got it to work back to IE8. :-) I would like to share the code for others to use, but I tend to put all my documentation into a comments section, which of course makes it too big to cut/paste and share on the forum. Its all in a JS file I called "simpleZoom.js" in my "SCRIPTS' folder on my site, but due to the anti-hotlinking .HTACESS file, you haave to visit the site with a browser before you can directly access it.Here's an example of use, in a page I made documenting my construction of a speaker linear array. Click on any image, and a new instance of it will expand from the middle of the screen. The expansion will stop when any screen boundary is reached, so its usefulness is limited in a tall image. But it seems to work on all versions FF, Chrome, Safari, and whatever my old android tablet came with. Works on IE too, at least back to 8. It was fun and could be improved (like allowing a few more levels of zoom and pan), but like i said, I learned a lot.
0
@PeterPan_321Sep 19.2016 — #Do you mean something like this:
[URL]http://www.cssplay.co.uk/menu/enlarge.html[/URL]
or this:
[URL]https://www.magictoolbox.com/magiczoom/[/URL]
?[/QUOTE]
I like those! I could use something like that in a case where I needed to show a diagram, where small details needed to really be expanded sufficient to read. Thanks!
For now, the solution I came up with can't do all that, but it is useful for at least getting a little bit of a closeup of various images. It just expands an image to the size of the screen, whatever limit it hits first. So of course its most effective in cases where the aspect ratio of the image is similar to your screen/window. Here's an example...
As I mentioned in a previous comment, the code I wrote is called simpleZoom.js, and its linked into that page from my "scripts" folder. If you want it, all its usage and explanation is in its comments. But due to my hot-link restrictions, you have to go to a page on my site with a browser first. and THEN you should be able to fetch the script.
0
@PeterPan_321Oct 06.2016 — #Hello! As for me, this is not so simple, but fully possible. I think, you should use a ready-made template like those from[URL]http://www.webstarts.com/designs[/URL] so that you can immediately select the responsive design which will fit your requirements. This way, you will spend less time and effort. I've used this method for many times, it is convinient and simple. Good luck![/QUOTE]
I appreciate that, but I wasn't looking for a whole site solution here... just a utility for zooming in on photos. I know there are a million options out there when it comes to buying or using someone else's product, but every time I build my own code and method to do something, that becomes another tool I can draw on again and again. And since I wrote it, I can more easilly modify and improve it as necessary.