-
Zoomable image on webpage
Hi all,
I'm hoping to make an educational resource which will have old maps on each page. Is there a way/third-party addition to have an image 'zoomable'? I really need to have a quite large scale map zoomable to quite a high level.
I'd really appreciate any ideas!
Yours,
Robert
-
Re: Zoomable image on webpage
Use Website Properties > Image > Photo Pop-up. Start with the full size image, reduce the size to a thumbnail, and enter the maximum size as Pop-up Width.
-
Re: Zoomable image on webpage
If you want to use a javascript external one, perhaps this is what you're after. Theres a link to the source code on the page;
SEE IT HERE
-
Re: Zoomable image on webpage
Some more zoom options. http://gwpriester.xara.hosting/three-zooms/ The first uses a mouse over link to a pop-up layer.
The bottom two are Zoom widgets found in the Online Content Catalog.
-
Re: Zoomable image on webpage
Great examples Egg and Gary! Making me think about some experimenting myself.
-
Re: Zoomable image on webpage
I would Import Landscape Cloud Inner Zoom.
Double-click to get to the Edit Widget window.
Replace the current image with the high resolution one you have.
Open the Names Utility.
Find WTag:image(768):imagebig and rename to WTag:image(4096):imagebig.
Save the changes.
Back on your design page, resize the widget to taste.
Acorn
-
Re: Zoomable image on webpage
Quote:
I would Import Landscape Cloud Inner Zoom.
Where's that Acorn?
-
Re: Zoomable image on webpage
Quote:
Originally Posted by
Egg Bramhill
Where's that Acorn?
Inner Zoom 1 Widget,
Acorn
-
1 Attachment(s)
Re: Zoomable image on webpage
Not working for me Acorn, because DPX and WD has a website max pixel limitation of 230dpi. And renaming the widget does not change this (as far as I can see).
The image imported is 5,000 x 3332px but comes into Xara at 800px @ 230dpi.
If I bring the image into a non web window, it is 800px @ 600dpi. But once you bring it into the Website window the resolution drops.
What am I missing here?
-
Re: Zoomable image on webpage
Gary, you need to be in Widget page to change, not add, the WTag.
try that first and then we'll talk through getting a full scale image in.
Acorn
-
Re: Zoomable image on webpage
Xara aren't really helping users by naming a widget "Inner Zoom 1 Widget" which can be found via the online Content Catolgue Search but naming it "Landscape Cloud Inner Zoomer " within the widget which can't be found via the online Content Catolgue Search :(
I did get your zoomer to work, however I don't understand (and it's not intutive) to need to:
Find WTag:image(768):imagebig and rename to WTag:image(4096):imagebig.
-
Re: Zoomable image on webpage
Ah, OK I missed that part. Now how do I override the 230dpi issue?
-
Re: Zoomable image on webpage
Quote:
Originally Posted by
Egg Bramhill
I don't understand (and it's not intutive) to need to:
Find WTag:image(768):imagebig and rename to WTag:image(4096):imagebig.
It's not intuitive as I am changing a Name set up by Xara.
with the Select tool, click on the image.
Open the Names Utility.
Highlight the WTag.
Click on the Rename button.
Change and save everything.
Acorn
-
Re: Zoomable image on webpage
So, I repeat my question. How do I override the 230dpi maximum resolution issue.
The same image that imports at 600dpi in the drawing window, is reduced to 230dpi in the web design window. Even if I drag and drop, import, or anything else. I think Xara determined at 96dpi that 230dpi would cover most screens. But it does not and the resolution and sharpness of the image is lost when you stretch the image.
-
Re: Zoomable image on webpage
I'm sorry Acorn, I wasn't making myself clear. I know how to do it, WHY am I doing it is the part of the operation I don't understand.
-
Re: Zoomable image on webpage
I don't know why this is Gary but try loading it into a print document, copy and paste into a web document brings it in at the right pixel size.
-
Re: Zoomable image on webpage
Here's a Landscape Cloud Inner Zoom using a very large image Gary, inserted using the copy/paste mentioned above:
https://www.dropbox.com/s/0v258kfhg0...oomer.xar?dl=0
-
Re: Zoomable image on webpage
Egg and Acorn - This is what I am speaking of. http://gwpriester.xara.hosting/stretch/
Even pasting the image at 1200dpi and setting the image to stretch does not take advantage of the image resolution.
I created a 1900px wide version of the same image, optimized to 96dpi and add a small amount of Unsharp Mask. The 96dpi image at full screen (for me) is magnitudes sharper.
-
Re: Zoomable image on webpage
Surely Gary, the image doesn't have a resolution only a size in pixels.
-
Re: Zoomable image on webpage
You're splitting hairs. An image at a certain physical dimension has a specific resolution. Especially true in terms of print. But that is not my point. My point is that the stretched image, even though pasted into Xara's website design window at a resolution that at 1:1 is almost double my 24" monitor width, is exported reduced and at full screen is not as sharp and as crisp as my 1900 pixel wide image at 96dpi. You and Mike Wenzloff can debate pixels and resolution til the cows come home and that is fine with me. Images stretched to fill the screen should have a higher resolution.
-
Re: Zoomable image on webpage
Quote:
Originally Posted by
Egg Bramhill
I'm sorry Acorn, I wasn't making myself clear. I know how to do it, WHY am I doing it is the part of the operation I don't understand.
Egg, the why is to magnify the image at present (768) is the width of the presented image so hardly any scaling if the rollover was 512 px wide (x1.5 magnification).
Setting to 1024, 2048, 4096, 8192 are all power of two values so if your rollover image was 512 px wide, you would have magnifications of x2, x4, x8 or x16 times.
Clearly you need a very high resolution image to show off.
Acorn
-
Re: Zoomable image on webpage
Ah! Thanks Acorn, now that makes sense.
-
Re: Zoomable image on webpage
Quote:
Especially true in terms of print.
True, but on terms of websites the resolution is meaningless. Even 96dpi is meaningless, it's just the pixel width & pixel height that matter.
Exporting a site with retina images ticked doesn't make a 96dpi and a 192dpi it just creates a retina image (@2) twice as wide and twice as high in pixel sizes.
So if you want to get a good quality stretchy image, use a large an image as possible pixel wise. But eventually if the size of the image is less than the browser pixel width the image will degrade as it's streched.
Quote:
You and Mike Wenzloff can debate pixels and resolution til the cows come home and that is fine with me. Images stretched to fill the screen should have a higher resolution.
Hey, lighten up Gary, I'm only doing my best to help. Don't know where Mike comes into this, he hasn't even posted in this thread. I reiterate, to get a 'higher resolution' just increase the images pixel size.
-
Re: Zoomable image on webpage
Egg - I am not trying to be more argumentative than usual. http://gwpriester.xara.hosting/stretch/ What I am showing here is the image I posted was originally created for a newspaper banner image, the paper is 11" wide and the image was printed at 300ppi. I think you would agree that the image when copied and pasted into Xara shows a resolution of 1296dpi, at 1:1 the image is about 4050 pixels wide. More than adequate to meet your suggestion of using as large an image as possible. But if you look at the actual stretched image and compare to the image below with is not stretched, just extended to about 1900 pixels wide, the stretched image is not near as sharp and clean.
-
Re: Zoomable image on webpage
Hi Gary, could you post your original image (or dropbox it)?
-
1 Attachment(s)
Re: Zoomable image on webpage
Think this was the one. Shows as 10,798 x 3070
-
Re: Zoomable image on webpage
I don't know if this will make sense either Gary but I hope so. I'm just trying to prove dpi means nothing on websites, only pixel size:
http://www.parkeston.com/gary-sunset/garys-sunset.htm
https://www.dropbox.com/s/2m67ewyn19...unset.xar?dl=0
-
Re: Zoomable image on webpage
I am not arguing with you Egg. I accept actual pixel width at 1:1. All I am trying to say is the image quality for a stretched image is not very good. Maybe it has to do with the amount of compression, and the image should not be exported as a PNG, that is nuts.
My sincere apologies to ForrestHowie for hijacking your thread. We should have started a new thread instead of taking over this thread.
Have we helped you at all?
-
Re: Zoomable image on webpage
-
1 Attachment(s)
Re: Zoomable image on webpage
Here is another aproach using a slider for the zoom factor. A litte jerky and a lot potential for optimization.
I put a large image (from wikimedia) on an invisible layer and forced Xara to export it by adding a ! to the layer name.
The image, the slider and the track for the slider each have a name that defines the ID for the exported HTML.
These names are listed in the placeholder (which is used as a viewport) HTML code body. (The order is important!)
See example here.
-
Re: Zoomable image on webpage
Fantastic! The image scrolls very smoothly but as you say the slider is a bit juddery. A great resource. Thanks for sharing.
-
Re: Zoomable image on webpage
Brilliant solution siran!
-
Re: Zoomable image on webpage
Really nice. Thanks for sharing!
-
Re: Zoomable image on webpage
Thank you for sharing siran.
Ciao
Roly
-
Re: Zoomable image on webpage
siran - Love this.
At about 25% the image is at 1:1. Can I limit the percent of zoom? And can I zoom in on a certain point, such as the rose bud?
And when the page first loads the scripts briefly appear. How can I hide the scripts when the page loads?
The image got corrupted in Firefox but looks fine in all other browsers. http://gwpriester.xara.hosting/zoom-test/
-
Re: Zoomable image on webpage
Hi Gary,
you can limit the zoom factor in the code
set it to 'var maxZoom=1;' to limit to 1:1 for example.
Maybe that factor could also be set as a parameter in the placeholder code if you wish to have multiple zooming images with different max zoom factors. I could adapt the code if you need that, but I will be away for a few days, so that might take a while...
What do you mean with 'zoom in on a certain point'? Shall the 'pushing around' be disabled and the zoom should try to center a specific pixel? That also could be done by adapting the code and would take a few days.
It surely is possible to hide the code, but it will become a little more complex (for example <div someattrname="<old code>"></div> would do), and off course the code will have to be adapted again... :(
Strange problem with firefox. Did you observe the problem with both (your and mine) examples?
-
Re: Zoomable image on webpage
No rush. You can get back when you get back.
Yes, I am having problems with the image disappearing for both my example and yours. I just tried yours and when I got to the maximum slider setting the image disappeared. On my example various things, such as leaving the page and coming back makes the image disappear.
And where do I add the var maxZoom=1; code? (You are dealing with a coding-challenged person) :rolleyes: The last time I worked with coding was Basic back in the 80s.
-
Re: Zoomable image on webpage
This all looks perfect! So many options and, yet again, so much support.
Thank you all
Robert
-
1 Attachment(s)
Re: Zoomable image on webpage
Hi Gary,
finally got back to get back here. ;)
So this is my first attempt to address the issues you pointed to. Please check it out and post back if there are still problems.
The placeholder code has changed and now looks like this:
HTML Code:
<div data-zoomableAttr="largeMap01, zoomSlider01, zoomTrack01, 2.0, 800, 1400"></div>
You may change the values inside of the doublequotes to fit your needs, but you should not change anything else.
The values are very much like before.
1. (largeMap01) is the name you have given to the large image that you want to display zoomable in the viewport (defined by the placeholder).
2. (zoomSlider01) is the name you have given to the slider handle. (This is the object that you can drag horizontally to change the zoom level.)
3. (zoomTrack01) is the name you have given to the slider track. (This is the object that defines the range the zoom handle can be moved. It does not have to be visible.)
4. (2.0) is the maximum zoom level. (Default is 4.0)
5. (800) is the horizontal pixel position (in the unscaled image) that the code tries to center. (This is ignored if value 6 is missing.)
6. (1400) is the vertical pixel position (in the unscaled image) that the code tries to center.
Values 4 to 6 are optional, but if you want to specify a "zoom to" position you also have to specify the max zoom level.
Please see result online here.
Some things to mention:
The javascript code is placed at the page head, but you can also move it to the placeholder head for example or place it in an external .js file (without the <script> and </script> tags at the beginning and end) and attach that to the placeholder (using CTRL + SHIPT + ALT + A).
The drag operation ends when the mouse button is released or the mouse pointer leaves the HTML body element. (The only simple and consistent cross browser method that worked for me.)
This might not be what you want. You can force the body element to fill the browser window by adding stretching elements (one horizontal and one vertical if required) to your design. If you don't want them to be visible you can make them 99% transparent.
Firefox seems to have a problem with large images. The javascript code (at the page header) uses a workaround to try to address this problem, but still the maximum map picture size might be limited.
There is a theoretical limit of 32767 pixels width and height, but you will get error messages disappearing images or other stragne effects at much lower resolutions.
I have removed the centering to viewport at small zoom levels. That just looks smoother to me. The image can now almost freely be dragged around at any zoom level.
I have made no test on mobile devices.
-
Re: Zoomable image on webpage
Awesome. Thanks. I'll try it out and let you know how it works.
Does not work on my iPhone however.