Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Image scale display methods and zoom buttons

28 Jul 2008, 23:47

In the release of Imagevue beta 20080728, we added improved options for how to display and scale images in the gallery. As many of you understand, there is no straightforward solution to optimizing the display of images. You may for example want your viewers to see large good-quality images, yet you need them to be viewable on computers with both high and low screen resolutions. If everyone in the world was using the same size screens, it would have been easy, and we would have modified the gallery layout and all images for that size! Unfortunately, we are not that privileged, so we need to optimize layout and image sizes based on a compromise solution.

As an interesting example of both the scale methods and the zoom buttons, I would first like to show an example:

1. Go here!
2. Click the "Go fullscreen" button in the maincontrols at the bottom of the screen.
3. Roll mouse over image, and click the "Zoom in" button until image is at its maximum(usually 3 clicks)
4. Now enjoy a truly fullscreen and full-size image experience!

The display methods:
In the theme configuration files under the <image> node, there is now a setting called <scale> with 4 options:
Code
fitmargin, original, fitstage, croptostage
By default, it is set to "fitmargin" which allows the gallery to scale down any image to fit within the gallery margins. Let's look at the settings:

fitmargin
Allows the gallery to scale down any image to fit within the gallery margins. This allows the image to be displayed on any screen size, also providing sufficient space for the navigation. Depending on screen size and image size, the image may be displaying at its original size if it fits within the required margins, or it may be scaled down to fit within the required margins. Images are never scaled up beyond their original size.

original
This setting displays the image at its original size no matter what screen size the user has. Depending on the size of the image, and the size of the screen, the image may be entirely visible on screen, or it may be larger than the screen area, and therefore cropped. This setting is different from the 3 other settings in the way that it does not conform to screen/stage size in any way.

fitstage
This setting displays the entire image at maximum size in the screen/stage without cropping away anything from the image. This means that the image will either border the vertical- or the horisontal limits of the screen/stage. When this option is set, image may either be smaller or larger than its original size, depending on screen/stage size and original size.

croptostage
This setting covers the entire screen/stage area with the image. To achieve this, some part of the image, either horisontally or vertically, is hidden. This method scales the image proportionally until both sides hit the vertical and horisontal limits of the screen/stage. Depending on screen/stage size and original image size, the image may either be smaller or larger than the original size. This setting also depends on the aspect of the screen vs. the aspect of the image. If both aspects are landscape(which is most common), only a minimal part of the image will be hidden. If however the image is portrait, a large part of it will be hidden because the image will be scaled to fit the screen/stage width.

The zoom buttons:
The zoom buttons that appear when rolling over an image toggle through the 4 states mentioned above. However, it is quite common that there are only 3 states available. Example:

If the viewer is on a screen size that accommodates the entire original image in "fitmargin" state, then the "original" state will be excluded because it will be visually identical to the "fitmargin" state.

Another thing to be aware of, is that the stacking order of zoom states may differ. Example: In many cases, the "original" state may represent a larger image than both the "fitstage" and "croptostage" settings.

Change default display method:
Although we reocmmend sticking to the default "fitmargins", you can change the default display method by editing your theme in admin and selecting image->image->scale. Make a choice of default scale method. Keep in mind that the margin setting only applies for the "fitmargin" state.
 
User avatar
sattva
Experienced
Posts: 41
Joined: 11 Nov 2008, 08:33

24 Nov 2008, 03:58

Great zoom methods!
I have read the article copletely but it was said nothing about
any navigation window. You know, when an image is zoomed horizontally and cropped vertically (vertical borders are out of screen) it would be nice to have a window in wich I can moove the picture. We have it in Photo Shop.

Is it possible? It seems to me there was something like that in the First Version of Imagevuex gallery.

Thank you.
Alexey Latiy,
Kiev, Ukraine.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

24 Nov 2008, 04:43

Yes, we have to look into some option for this ... Thanks for the suggestion.
 
Rubens Vieira
Posts: 9
Joined: 23 Jan 2009, 10:00

30 Jan 2009, 09:41

HI!!!

One of my clients complained that my website is scaling up my photos over the real size in his screen (Mac 24") and messing up allover the pixtures (pixelling).

All my pictures is 1024 (larger side).

I've checked and it's setted to "fitmargin", so this could not be happenning.

Could you somebody double check it for me:

www.rubensvieira.com

It's the X2 firt realease. :roll:
 
User avatar
Nick
Imagevue Hitman
Posts: 2872
Joined: 02 May 2006, 09:13

30 Jan 2009, 12:01

Dunno, everything seems fine, which one is getting distorted?
firedev.com
 
Paul
Posts: 11
Joined: 21 Sep 2008, 15:42

27 Mar 2009, 10:04

Is it possible to restrict the zoom amount ... say, if it goes above full size it stops?

Otherwise too much zoom on a web friendly image can look badly pixelated.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

30 Mar 2009, 02:43

Paul wrote:Is it possible to restrict the zoom amount ... say, if it goes above full size it stops?

Otherwise too much zoom on a web friendly image can look badly pixelated.
Unfortunately, no. You can either turn it zoom capabilities off completely, or it will have the default zoom features. Maximum zoom is either image original size, or image scaled to full screen(no borders).
 
sxeguy
Posts: 8
Joined: 15 Apr 2009, 17:05

21 Apr 2009, 14:43

I don't have this option under my theme edit menu.

I went to edit the theme and under images there is no option to change the size
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

22 Apr 2009, 01:48

sxeguy wrote:I don't have this option under my theme edit menu.

I went to edit the theme and under images there is no option to change the size
That setting is now located under "settings", and not under "themes"
 
sxeguy
Posts: 8
Joined: 15 Apr 2009, 17:05

22 Apr 2009, 18:15

Awesome, Thank you so much!!!
 
omriamos
Posts: 18
Joined: 24 Jul 2009, 11:45

26 Mar 2010, 11:12

Today I saw this website:
http://www.lachapellestudio.com/

See the "full screen" slideshow of the images? really cool imho.
Basically is it just using the image as some kind of a background image that fills the entire browser window. Then the menu comes over the image, and are kept hidden/half-transparent when not in use.

This gives a really nice effect, and put much importance to the image itself.
I really liked the idea. What do you thing?

Is it possible with imagevueX somehow?
If not, could that be added in the future?
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

31 Mar 2010, 00:38

omriamos wrote:Today I saw this website:
http://www.lachapellestudio.com/

See the "full screen" slideshow of the images? really cool imho.
Basically is it just using the image as some kind of a background image that fills the entire browser window. Then the menu comes over the image, and are kept hidden/half-transparent when not in use.

This gives a really nice effect, and put much importance to the image itself.
I really liked the idea. What do you thing?

Is it possible with imagevueX somehow?
If not, could that be added in the future?
i agree, its really cool. It has to be said though, that Imagevue can already display images like this, by setting max scale (croptostage). Of course, the gallery in your link is optimized for displaying images like this so the basic navigation scheme works better, and also the images have been optimized for displaying like this. In Imagevue, there are a lot of navigation elements you would need to think how you want to use when showing images like this ...

The gallery in your link is more of a concept/stylized gallery, and as you see there is not really any interface for navigation for the gallery, no thumbnails, no description etc, and im not sure we can merely twist imagevue in this direction. Possibly it would have to a separate module. It certainly is going in my list for inspirational ideas, and we still aim to be creating additional fronted gallery styles after we release the new admin!
 
MikeR
Experienced
Posts: 216
Joined: 29 Sep 2006, 09:58

Re: Image scale display methods and zoom buttons

06 Jan 2012, 05:12

I refresh this old topic, because I would like to use an image as an background slideshow like here : http://www.lachapellestudio.com/

my parameters :

In settings/settings :

I choose "image" for as a "startmode" for my "startpath" OK

In settings/image :

the margin was set to 0
the scale was set to "croptostage"
and I use the original optimized parameter

In settings/slideshow:
The slideshow was set to "Autostart"

And I didn't use frame in my theme


I've copy large files 1920*1200 px in my startpath. It works, the images displays as a background slideshow. It's almost perfect !!!!

There are only one problem : for users with smaller screen than 1920*1200 they can "pan" (move) inside the image and I would like only to crop the image (if the screen is smaller than the image).

I didn't find the parameter to prevent the move inside a larger image. Thank you
 
User avatar
Martin
Experienced
Posts: 651
Joined: 30 Jan 2011, 23:24

Re: Image scale display methods and zoom buttons

07 Jan 2012, 14:43

MikeR wrote:I didn't find the parameter to prevent the move inside a larger image. Thank you
I'm afraid there is no such parameter....
Otherwise 'croptostage' would need to know which part of the image should be shown.
Should it clip the upper (or left) part, the lower (or right) part... or should it center the image and clip both the outer parts...
 
MikeR
Experienced
Posts: 216
Joined: 29 Sep 2006, 09:58

Re: Image scale display methods and zoom buttons

08 Jan 2012, 05:03

Thank you Martin, I think (maybe I'm wrong) it was possible in previous version of imagevue (maybe Karl or Nick can confirm) before they introduce zooming possibility.

For cropping, it can use an (new) alignment parameter :

if the image is aligned on bottom center, if needed it will crop left-right and top part of the image (by default)
if the image is aligned on bottom-left, if needed it will crop right and top part of the image
if the image is aligned on bottom-right, if needed it will crop left and top part of the image

if the image is aligned on top center, if needed it will crop left-right and bottom part of the image

and so on...

Others examples I like :

http://www.jasondeweyphoto.com/#/PORTFOLIOS/residential interiors (aphotofolio template)
http://www.johnwrightphoto.com/

I hope Karl or Nick can take a look.