Main-Slide-Image change of zoom-direction

Hey guys!

I am working on a STOREFRONT-page at www.cool-o-mat.com/zentrum/cms actually.

Is there any possibility to change the direction of the zoom when resizing the page?

Standard is that the image is fixed at the left top side and grows when enlarging the page to the left in several steps.

My preferred way would be this:

The image is CENTERED at the TOP - and grows smoothly without these growing steps and - when reaching the fixed scaling-point zooms CENTERED to both sides.

Any ideas how this can be fixed?

Thank you very much for your support!

The image is CENTERED at the TOP - and grows smoothly without these growing steps and - when reaching the fixed scaling-point zooms CENTERED to both sides.

I don't think that this is possible because the image resize according to CSS media queries which of course are create for some particular browser window size not for every pixel. With Image Rotator it will be impossible, with static image you can try with background-position: cover property but in this case you can't change anything.

I think you got me wrong with this issue.

If you open the page e.g. on a highres 27" Mac-monitor, there is the maximum scale of the image reached.
From the last zoom-step the image is scaled, so that the left and the right image-borders are fixed to the borders of the window.

I would like this feature to be applied to the smaller zooming-scales, too.

Right now it is this way in the smaller zooming-scales:
The image is fixed to the left border of the browser's window - and when scaling the window, the image is displayed more and more from the right side. (see attached SCREEN2 for details)

screen2.jpg

I need the images to be fixed to the left AND the right border and only scale in the heigth - like at the maximum scale.
(see attached image SCREEN1 for details)

screen1.jpg

I don't think that this is possible because the image resize according to CSS media queries which of course are create for some particular browser window size not for every pixel. With Image Rotator it will be impossible, with static image you can try with background-position: cover property but in this case you can't change anything.

But there IS a zoom as I want it at the maximum step of zooming.
I only would like to get this way of zooming applied to the smaller size-steps.

Do you have any information, where these zooming levels are located in the CSS files?
Then I will figure it out.

Thank you very much for your support!

If I understand your point you want to stretch image horizontally while keeping the same height, yes?

Not exactly. I want the image stretched horizontally and the height can grow (as it is in maximum zoom).

Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

.gkIsWrapper-gk_storefront .gkIsSlide {background-size: contain; }


and then just remember to enable "Use override CSS" option in template advanced settings tab. Please only note that this style is prepared only for 'cover' background so you may meet some problems with smaller screen resolution.

That is going straight into the right direction.
But now there is a grey border under the slides. The height of the module should stay as it was - only the photos should slide as in maximum value...

With this type of display the height will be generated automatically based on width and there is no other way to display it. The module was designed to use image as cover and the way how the image resize is not something that we can change - it is browser issue.

Could you please name the file(s) where the sliding / zooms etc. of the slideshow are configured?

I mean: There must be a place in the code, where the three positions (if browser width reaches XXX px, zoom to this size, if browser width = xxxx px zoom to that size ...) - maybe you can show me where this code is located so I can try a bit on my own.

Thank you very much!

I think that you mix two different things - responsive styles and browser behaviour when the image is set as a 'cover' property. There are no rules which say when browser window is xxx resize image. Image is always set to 100% wide. The only thing that change is the module content I mean font-size inside module. This styles are located inside mobile.css and tablet.css file but you will find there only rules for font not for the background image.

Ok, understood.
Maybe you can tell me in which css-file the zooming behaviour is being setup?
Then I could try some changes on my own.

Maybe this helps:
I would need the zooming-behaviour be likte on this one:
http://proimmo.hard-media.net/

So you need to use totally different Image Show or just create custom HTML. With this template the background is displayed as a cover and there is no way to change this behaviour without custom changes.