making jmpress's div scale to window resize (or even to fixed size)

[joyfortoys]

Hi,

Just started using Jmpress - have to say I really like it. One thing I can't figure out though, I'm trying to use Jmpress as a photo gallery in a web app. Essentially users can scroll through photos, and between the page's header and footer, images slide to the left and right depending on which arrow key has been pressed.

Unfortunately, these images and the divs that contain them are large enough that they overlap the footer and header at times. I just can't get Jmpress to behave in a way that allows it to dynamically size so that the photos stay in the region between the header and footer. The "#jmrpess" div I've used just doesn't resize or obey percentage CSS directives. What can I do to solve this? Any ideas?

I would be very grateful for any help I could get using this awesome plugin. Thanks!

- W

[Tobias Koppers]

hi,

i think you need the viewPort option. ( http://shama.github.com/jmpress.js/docs/#docs-viewport )

It makes the camera zoom so that a defined area is visible on the screen.

Or, if your header and footer are really large, you may switch from fullscreen mode to container mode and style the container with css. ( http://shama.github.com/jmpress.js/docs/#docs-core )

2012/8/14 joyfortoys <wi...@toytalk.com>

[Daniel May]

Just about to post, but Tobias beats everyone usually ;)

Yeah, I modify the viewport to make it fit.

You're looking at updating the parameters below.

      // kick off the slideshow

      $('#slideshow').jmpress({

        viewPort: {

          height: 800,

          width: 300,

          maxScale: 1

        }

      });

[Tobias Koppers]

yeah. Thanks to Daniel for an example :)

2012/8/14 Daniel May <dan...@thedanielmay.com>

[Will Drevo]

this is great! thanks so much.

I wasn't sure what viewport was for, glad that someone could explain.
I tried using that code, and it mostly worked. the steps scale to some
extent, it's just the offset I'm having trouble with.

a few questions:
1) what does fullscreen: false do? I tried that and the only result
was that all my jmpress steps were invisible and that transitioning
from step to step was not triggered...
2) I tried using
$("#jmpress").css("background-color", "red");
just to see where my boundaries are for the jmpress div element, but I
can never get the background color to show. I even tried adjusting the
z-index, also with no luck. any ideas on why this behavior might be
happening?
3) what event might I be able to detect to see when the step changes
size and then scale down the div accordingly?

my setup look like this:

======WINDOW=======
-----------------------------
header
-----------------------------

---- ---------
| | step |
| --> | pic | -->
| | div |
__| |_____ |

----------------------------
footer
-----------------------------
====================

and the problem is that when I add elements via jQuery (a comments
box, another icon, etc), the picture's div box changes of course, but
I can't figure out a good way to scale itself so that it doesn't
overlap with the footer. this also goes back to my problem with not
being able to see graphically the bounds of the viewport.

currently I'm just giving the photo steps a margin-top: 200px; which
is pretty hacky and not responsive.

thanks so much for the pointers everyone! it's really helpful.

- W

[Will Drevo]

also I should mention that I tried using:

containerClass: 'jmpress-container'

then

.jmpress-container {
background-color: red;
}

which did change the background color, but it was simply underneath
everything else - perhaps due to the fact jmpress thinks it is
fullscreen, not shading in just the background for the viewport which
is what I'm looking for.

- W

[Tobias Koppers]

fullscreen: true jmpress takes the full inner window. Container is body.
Fullscreen: false jmpress takes
only a div. You have to specify width and height with css, elsewise it is 0px high.

If your header is not transparent you can use  fullscreen false for your layout. If jmpress take the whole window and the header is above you should use fullscreen true.

You don't need to scale it by script. It should work with viewPort and css.

Offset for the camera was discussed here before. padding for the jmpress element.

[Will Drevo]

Thanks tobias.

One last thing - you say

> You don't need to scale it by script. It should work with viewPort and css.

While that is true initially (on moving to the first step, the
viewport zooms in or out, depending), later on, once the zoom level is
set, step divs can change size. this means they can overflow out of
the viewport and appear to be cut off. step div elements appear to
obey margin-top but not margin bottom so much. I think what I'm asking
for here is pretty hard though, so I think maybe I could somehow:

on each step transition:

var desiredMargin = 50;
if (current step div height > viewPort.height() - desiredMargin)
// zoom out somehow (not sure how to do this manually)

do you think this is a good solution?

- W

[Tobias Koppers]

You can set viewPort per step and with a script. I'll anwser it in detail after vacation...

[Will Drevo]

that sounds like just the thing I need. and no worries - enjoy!

- W

On Tue, Aug 14, 2012 at 10:41 PM, Tobias Koppers

[joyfortoys]

been digging a bit through the source, haven't gotten too far. 

perhaps I could simply adjust the size of the viewport and then it would readjust, just as jmpress does for the start slide. 

steps might be:

0) note the curent slide and what the next one will be, along with the needed size

1) deinit jmpress

2) reinit jmpress with different viewport size (to more than needed size by some factor)

3) make next slide the start slide

it seems kind of wasteful, not to mention I'd have to hide jmpress's main div while all this is happening so page doesn't look weird. 

thoughts?

[Àlvar Vinacua]

Was this thread ever settled?...

à.

On Tuesday, August 21, 2012 8:13:27 AM UTC+2, joyfortoys wrote:

been digging a bit through the source, haven't gotten too far. 

perhaps I could simply adjust the size of the viewport and then it would readjust, just as jmpress does for the start slide. 

steps might be:

0) note the curent slide and what the next one will be, along with the needed size

1) deinit jmpress

2) reinit jmpress with different viewport size (to more than needed size by some factor)

3) make next slide the start slide

it seems kind of wasteful, not to mention I'd have to hide jmpress's main div while all this is happening so page doesn't look weird. 

thoughts?

On Tuesday, August 14, 2012 11:41:17 PM UTC-6, Tobias Koppers wrote:

You can set viewPort per step and with a script. I'll anwser it in detail after vacation...

Am 15.08.2012 02:32 schrieb "Will Drevo" <wi...@toytalk.com>:

Thanks tobias.

One last thing - you say
> You don't need to scale it by script. It should work with viewPort and css.

(...)