Different screen resolutions

knorde

Joined: 2010-02-02
Posts: 64

Posted: Mon, 2012-05-14 07:06

I wonder how other users do.

My gallery is viewed by different users and working with different monitors, and therefore different resolutions.
How can i make the gallery script to use with certain resolutions?

If I make the resolution for smaller monitors the larger monitors have a very large piece of empty space.
If I make the resolution for larger monitors i have on the smaller monitors much scrolling.

It would nice if gallery grows on the basis of the resolution that is used.

Are there any solutions (modules) for gallery so you can get a good resolution on every monitor or is that not possible with gallery 3?

If not, is there any option to create links for the different resolutions?
1024x768 CLICK HERE
1280x1024 CLICK HERE
1368x768 CLICK HERE

EDIT
Something like this:
http://html5.suprsidr.com/gallery2/carbon.php?g2_itemId=190 on this thread http://gallery.menalto.com/node/101259
But then for gallery3 themes (i use browny wind)

Greets Kees.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 13:29

You only need to specify the image's width in css like:

<style>
    #gallery img {
        width: 100%;
        max-width: 1040px;
        height: auto;
    }
</style>

of course w/out seeing your gallery I'm only guessing at the #gallery element.

-s

jnash

Joined: 2004-08-02
Posts: 814

Posted: Mon, 2012-05-14 13:55

Interesting... I added this snippet at the beginning of my views/photo.html.php in my theme dir, and it definitely seems to do the trick! Nice option there suprsidr, I like!

knorde

Joined: 2010-02-02
Posts: 64

Posted: Mon, 2012-05-14 16:23

I tryed the code (i put it in screen.css from my theme) but it don't work.

The link is www.mydigitalworld.nl

Greets Kees.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 16:37

it is because your theme has a fixed width.
#doc4 is fixed at 74.923em so it does not resize, so the other elements don't resize....
try changing #doc4 to width: 100%; max-width: 74.923em;

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 16:38

Oh and your images are in:

<style>
    #g-photo img {
        width: 100%;
        max-width: 1040px;
        height: auto;
    }
</style>

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde

Joined: 2010-02-02
Posts: 64

Posted: Mon, 2012-05-14 16:47

That works!

Only the height is not correct.
Tryed:

height: auto;
height: 100%;

Any ideas?

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 17:22

I do not see
#g-photo img {
width: 100%;
max-width: 1040px;
height: auto;
}
anywhere in your css

BTW, your resizes are only 640px wide, setting a max-width: 1040px will only pixelate them when they stretch over 640.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde

Joined: 2010-02-02
Posts: 64

Posted: Mon, 2012-05-14 17:28

Now i have this in the bottom of screen.css

#doc4 {
width: 90%;
height: auto;
}

#g-photo img {
width: 100%;
max-width: 1040px;
height: auto;
}

But i have the same problem, i have to scroll (vertical, in the height).

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 17:37

remove the static width from #g-content as well

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde

Joined: 2010-02-02
Posts: 64

Posted: Mon, 2012-05-14 17:44

Same problem

Now i have this in the bottom of screen.css

#doc4 {
width: 90%;
height: auto;
}

#g-photo img {
width: 100%;
max-width: 1040px;
height: auto;
}

#g-content {
width: 90%;
height: auto;
}

Greets Kees.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 17:50

clear your browser's cache, its working for me.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde

Joined: 2010-02-02
Posts: 64

Posted: Mon, 2012-05-14 17:57

I tryed in IE and in FF.
I have cleared the browser cache.

But i have the same problem, i have to scroll (vertical, in the height).

I think you don't understand what i mean (i think my english is not so good hehe)
I mean that i don't have to scroll vertical.
If the resolution in the height is 768 or 1024 in both cases the height must be fullscreen (and no scroll).

The width is working perfectly now (thank you very much) but the height is not correct

Greets Kees.

jnash

Joined: 2004-08-02
Posts: 814

Posted: Mon, 2012-05-14 18:18

I think what knorde means is that when resizing the width to 100%, it also extends the height automatically, this causes you to have to scroll down to see the 'bottom' of the image under certain dimensions... he wants it to 'enlarge/shrink' to actually fit the whole image in the browser window size...

pseudo code:

  width = 100%
  height = auto
if height is greater than window.height then:
  height = 100%
  width = auto

This may break with either portrait or landscape... I only quickly thought it out, so not sure...

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 18:42

here is what I'm seeing http://testr.suprsidr.com/v/resize.mp4.html
If you want try switching the height to 100% and the width to auto
but you may need #g-content and #doc4 to have a height of 100%

Also looks like you need to setup margin-right for the image so it does not run into the sidebar(I hate floats)

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde

Joined: 2010-02-02
Posts: 64

Posted: Mon, 2012-05-14 19:07

This is what i mean (see attachment).
I will that the height always is the same.

Greets Kees.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 19:13

#g-photo img {
width: 100%;
max-width: 1040px;
height: auto;
}
this style only effects the resized images like you see in my view.

has nothing to do w/ the album view

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde

Joined: 2010-02-02
Posts: 64

Posted: Mon, 2012-05-14 19:40

Oh ok, and how can i have the album view correctly?

Or is that not possible?

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 19:57

that would take a major layout restructure.
it already has a responsive design, not sure what else you'd want.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde

Joined: 2010-02-02
Posts: 64

Posted: Tue, 2012-05-15 08:54

That's OK, the width and the growing of the image was the most important and that works!
Thank you so much for the help

Greets Kees.

knorde Joined: 2010-02-02 Posts: 64	Posted: Mon, 2012-05-14 07:06
	I wonder how other users do. My gallery is viewed by different users and working with different monitors, and therefore different resolutions. How can i make the gallery script to use with certain resolutions? If I make the resolution for smaller monitors the larger monitors have a very large piece of empty space. If I make the resolution for larger monitors i have on the smaller monitors much scrolling. It would nice if gallery grows on the basis of the resolution that is used. Are there any solutions (modules) for gallery so you can get a good resolution on every monitor or is that not possible with gallery 3? If not, is there any option to create links for the different resolutions? 1024x768 CLICK HERE 1280x1024 CLICK HERE 1368x768 CLICK HERE EDIT Something like this: http://html5.suprsidr.com/gallery2/carbon.php?g2_itemId=190 on this thread http://gallery.menalto.com/node/101259 But then for gallery3 themes (i use browny wind) Greets Kees.
	XUser login Username: * Password: * Create new account Request new password
suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 13:29
	You only need to specify the image's width in css like: <style> #gallery img { width: 100%; max-width: 1040px; height: auto; } </style> of course w/out seeing your gallery I'm only guessing at the #gallery element. -s

jnash Joined: 2004-08-02 Posts: 814	Posted: Mon, 2012-05-14 13:55
	Interesting... I added this snippet at the beginning of my views/photo.html.php in my theme dir, and it definitely seems to do the trick! Nice option there suprsidr, I like!

knorde Joined: 2010-02-02 Posts: 64	Posted: Mon, 2012-05-14 16:23
	I tryed the code (i put it in screen.css from my theme) but it don't work. The link is www.mydigitalworld.nl Greets Kees.

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 16:37
	it is because your theme has a fixed width. #doc4 is fixed at 74.923em so it does not resize, so the other elements don't resize.... try changing #doc4 to width: 100%; max-width: 74.923em; -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 16:38
	Oh and your images are in: <style> #g-photo img { width: 100%; max-width: 1040px; height: auto; } </style> -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde Joined: 2010-02-02 Posts: 64	Posted: Mon, 2012-05-14 16:47
	That works! Only the height is not correct. Tryed: height: auto; height: 100%; Any ideas?

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 17:22
	I do not see #g-photo img { width: 100%; max-width: 1040px; height: auto; } anywhere in your css BTW, your resizes are only 640px wide, setting a max-width: 1040px will only pixelate them when they stretch over 640. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde Joined: 2010-02-02 Posts: 64	Posted: Mon, 2012-05-14 17:28
	Now i have this in the bottom of screen.css #doc4 { width: 90%; height: auto; } #g-photo img { width: 100%; max-width: 1040px; height: auto; } But i have the same problem, i have to scroll (vertical, in the height).

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 17:37
	remove the static width from #g-content as well -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde Joined: 2010-02-02 Posts: 64	Posted: Mon, 2012-05-14 17:44
	Same problem Now i have this in the bottom of screen.css #doc4 { width: 90%; height: auto; } #g-photo img { width: 100%; max-width: 1040px; height: auto; } #g-content { width: 90%; height: auto; } Greets Kees.

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 17:50
	clear your browser's cache, its working for me. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde Joined: 2010-02-02 Posts: 64	Posted: Mon, 2012-05-14 17:57
	I tryed in IE and in FF. I have cleared the browser cache. But i have the same problem, i have to scroll (vertical, in the height). I think you don't understand what i mean (i think my english is not so good hehe) I mean that i don't have to scroll vertical. If the resolution in the height is 768 or 1024 in both cases the height must be fullscreen (and no scroll). The width is working perfectly now (thank you very much) but the height is not correct Greets Kees.

jnash Joined: 2004-08-02 Posts: 814	Posted: Mon, 2012-05-14 18:18
	I think what knorde means is that when resizing the width to 100%, it also extends the height automatically, this causes you to have to scroll down to see the 'bottom' of the image under certain dimensions... he wants it to 'enlarge/shrink' to actually fit the whole image in the browser window size... pseudo code: width = 100% height = auto if height is greater than window.height then: height = 100% width = auto This may break with either portrait or landscape... I only quickly thought it out, so not sure...

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 18:42
	here is what I'm seeing http://testr.suprsidr.com/v/resize.mp4.html If you want try switching the height to 100% and the width to auto but you may need #g-content and #doc4 to have a height of 100% Also looks like you need to setup margin-right for the image so it does not run into the sidebar(I hate floats) -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde Joined: 2010-02-02 Posts: 64	Posted: Mon, 2012-05-14 19:07
	This is what i mean (see attachment). I will that the height always is the same. Greets Kees.

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 19:13
	#g-photo img { width: 100%; max-width: 1040px; height: auto; } this style only effects the resized images like you see in my view. has nothing to do w/ the album view -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde Joined: 2010-02-02 Posts: 64	Posted: Mon, 2012-05-14 19:40
	Oh ok, and how can i have the album view correctly? Or is that not possible?

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 19:57
	that would take a major layout restructure. it already has a responsive design, not sure what else you'd want. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

knorde Joined: 2010-02-02 Posts: 64	Posted: Tue, 2012-05-15 08:54
	That's OK, the width and the growing of the image was the most important and that works! Thank you so much for the help Greets Kees.

Different screen resolutions

XUser login