Your Cart

Making Galleria respond to window resize

These forums are now closed to new replies / tickets.

Please open a support ticket from our new Support page.

Front Page Forums Problems Making Galleria respond to window resize

  • gravatar
    Achton
    February 25, 2012 at 8:30 pm

    I’m trying to embed Galleria into a responsive HTML5
    theme (initializr.com)
    based on media queries.
    I’m using the Picasa plugin to
    source the images. My theme is a clone of Classic.

    My initial approach is to redraw the gallery instance on window
    resize, coupled with a timeout manager to ensure the redraw only
    happens once in spite of multiple resize events firing. There are
    two problems, however.

    1) I can’t seem to find a relevant method for re-rendering
    Galleria, apart from Galleria.loadTheme() which seems
    a bit overkill. A better approach would be to simply re-fetch the
    CSS height of #galleria, recalculate the dimensions of
    the theme elements (e.g. slider and thumbnails) and set the metrics
    in the DOM accordingly. Although I have sifted through the source,
    I’ve been unable to cobble that approach together.

    2) I’m having trouble managing the queue for the timeouts, but
    this is not related to Galleria. One way of doing this is outlined
    on MDN
    but I seem to be having phantom events firing even
    though they should get cancelled before the next timeout is set.
    This hurts Galleria, which returns many interesting errors (can’t
    extract stage height, can’t contact Picasa, etc.). I’m including
    this info for completeness’ sake, but like I said – it is not the
    fault of Galleria.

    I’m sure responsive design is in the pipes for Galleria, so I
    would be very interested in hearing which approach the devs are
    taking to support multiple screen widths.


    gravatar
    Frank
    February 28, 2012 at 7:50 pm

    You are absolutely right about the responsive part, we added a
    .resize() method and a responsive option in the 1.2.7 version. It
    should be exactly what you are looking for, as it makes the gallery
    respond to dynamic CSS.

    Here is a simple demo of the responsiveness: http://jsfiddle.net/zzErT/
    You can download the beta at github: http://github.com/aino/galleria

    We also secured some timeouts in 1.2.7, but I’m not sure
    it’s related to the errors you have on your page.


    gravatar
    Rob
    February 29, 2012 at 2:41 am

    David, this demo looks promising, well done and thank you for
    your effort.

    Am I right in presuming the method and option in tandem will
    deliver a truly responsive outcome – i.e. once that scales
    proportionally in both height and width, as opposed to responding
    to a changed window size with what appears to my untrained eye as
    simply a different scaled crop in a fixed height galleria instance?
    If my presumption is correct, could you please explain what I would
    need to do to achieve that outcome? My javascript understanding is
    fairly modest, but I’m a fast learner. For the record, I am using
    your twelve theme.

    Many thanks — and happy leap year day!


    gravatar
    Frank
    February 29, 2012 at 10:35 am

    Yes, it will rescale both ways, according to the CSS you define.
    Here is another example using 100% height and 100% width: http://jsfiddle.net/m69kj/


    gravatar
    Rob
    February 29, 2012 at 11:30 am

    Hello David, many thanks for your quick reply and, yes, I can
    see what you’ve done.

    I really don’t wish to chew up any more of your time, and I must
    apologise for not making myself clear first time round, however,
    when I think of a responsive image, I think of one that scales with
    behaviour like this:

    img {

         max-width: 100% ;
    

    }

    With your solution, Galleria delivers an image whose crop
    depends on how I resize the window. If I set imageCrop to false,
    the image resizes proportionally but the container doesn’t. Instead
    I get black rectangles.

    Put simply, will your new release of Galleria deliver the type
    of image scaling I seek? (It doesn’t have to be a CSS based
    solution, I’m happy to have a crack at the API)

    Cheers — and thank you once again for your swift
    response.

    Rob.

    P.S. Is it OK to respond to your email like this, or should I go
    through Galleria Support via the web? (This is all a bit new to me,
    can you tell?)

    : )


    Rob Sweetten
    Writer Guy
    rob.sweetten@writerguy.com.au

    Writer Guy
    PO Box 1231
    NORTH FITZROY VIC 3068
    Australia

    t +613 / 9486 4142
    f +613 / 9486 4131

    http://www.writerguy.com.au

    IT’S YOUR WORDS AGAINST THEIRS™

    This email and any files transmitted with
    it are confidential and intended solely for
    the use of the individual(s) to whom they
    are addressed.

    If you have received this email in error please:
    (i) delete it from your system; (ii) notify Writer Guy Pty Ltd
    immediately via email
    to theinbox@writerguy.com.au
    and
    (iii) be advised that disclosing, copying, distributing or taking
    any action in reliance
    on the contents of this email and any files
    transmitted is strictly prohibited.

    Attachments:
    1. IYWAG


    gravatar
    Frank
    February 29, 2012 at 12:45 pm

    You can reply via email, just leave out the footer 🙂

    I’m not sure I understand your question, you are providing
    an image CSS example, but the responsive nature of this project is
    on a gallery level. Setting a max-width to a gallery will work just
    as expected as seen here: http://jsfiddle.net/n2XaK/

    Adding responsive: true will rescale the entire gallery
    according the the CSS specified, and also scale the images within
    according to how you specify the imageCrop option.

    If you don’t want the “black rectangles” you can have
    something else. But you need “something” to fill out the space if
    the image proportions are different from the gallery container,
    unless you set imageCrop to true wich then makes the gallery resize
    the images so they fill & crop.

    The gallery doesn’t resize it’s container according
    to the active image proportions, that’s not what we mean by
    “responsive”. Since a gallery can contain images with different
    proportions, you don’t want to resize the gallery on each
    image slide.

    Perhaps you are asking how to rescale the gallery with kept
    proportions on window resize?


    gravatar
    Frank
    February 29, 2012 at 11:11 pm

    Well, seems like your post made me think about this some more…
    (it happens a lot).

    When programming a responsive layout using images, setting
    max-width:100% works, because the browser “knows” the
    ratio of the image and can scale the image according to it’s
    ratio based on the available width. This is not possible in
    Galleria, since it needs to extract width and
    height in some way.

    The responsive option in Galleria allows it to resize according
    to dynamic CSS values, but sometimes I guess you would like it to
    resize the width and let the height follow according to some
    defined proportions.

    The best solution then would probably be to allow another way of
    defining height. What I’m thinking is that if you could set a
    “ratio” instead of a fixed height, the gallery could resize
    according to the available width, but still keep proportions.

    So, I think we will add a possibility to define height as a low
    number. If it’s set as 2 or below, it will
    assume that this is a ratio and not the actual height.

    So. f.ex by doing: height: 0.5, the gallery will
    always be twice as wide as high, no matter what
    the CSS extractions tell you. Even when resizing the browser.

    Would this be a good option? Thoughts?

    Thank you for your input, it means a lot!


    gravatar
    Frank
    March 1, 2012 at 12:07 am

    And here is a demo using the latest commit: http://jsfiddle.net/3MUTS/


    gravatar
    Rob
    March 1, 2012 at 12:12 am

    Hey David

    You are prolific!

    I’m half-way through writing a response to your earlier
    email.

    Stay tuned.

    (And thank you!)

    Cheers

    Rob.


    gravatar
    Rob
    March 1, 2012 at 12:18 am

    Hey David

    It’s funny you should suggest that…

    I had tried to develop a work around that did exactly that. For
    me it made sense, because the work I wish to show via Galleria will
    always be the same size for any given project, eg. a sequence of
    spreads from a brochure I have written, or pages from a website,
    etc.

    Being quite the novice, my efforts were basically trial and
    error.

    The closest I came to success involved setting CSS
    programatically in conjunction with extending Galleria to performed
    a rescale with every window resize. All using a defined ratio.

    It worked to a point, the gallery container (and hence displayed
    image) re-sized fluidly and in proportion, but it broke doing
    window resizes in full screen.

    Anyway, the ratio idea would definitely work for me!

    As before, I really appreciate your help with this, and if I’ve
    helped in any way by asking all these questions, so much the
    better.

    Now I’m off to investigate your latest link.

    Cheers — and thanks again.

    Rob.

    P.S. Whereabouts in the world are you? (I’m in Melbourne,
    Australia.)


    gravatar
    Frank
    March 1, 2012 at 12:24 am

    Rob, you definitely help with your thoughts. It’s because
    of people like you that the project has evolved and established the
    position it has today.

    Let us know what you think and don’t hesitate to post here
    again!

    We are based in Sweden (it’s actually 1:23 a.m here, so I
    better hit the sack…)


    gravatar
    Rob
    March 1, 2012 at 12:25 am

    Hey David

    For me and my specific requirements, that works perfectly.

    Bravo sir!

    Cheers

    Rob.


    gravatar
    Rob
    March 1, 2012 at 12:28 am

    : )

    Have a good night’s sleep mate — you’ve earned it!

    Cheers

    Rob.


    Rob Sweetten
    Writer Guy
    rob.sweetten@writerguy.com.au

    Writer Guy
    PO Box 1231
    NORTH FITZROY VIC 3068
    Australia

    t +613 / 9486 4142
    f +613 / 9486 4131

    http://www.writerguy.com.au

    IT’S YOUR WORDS AGAINST THEIRS™

    This email and any files transmitted with
    it are confidential and intended solely for
    the use of the individual(s) to whom they
    are addressed.

    If you have received this email in error please:
    (i) delete it from your system; (ii) notify Writer Guy Pty Ltd
    immediately via email
    to theinbox@writerguy.com.au
    and
    (iii) be advised that disclosing, copying, distributing or taking
    any action in reliance
    on the contents of this email and any files
    transmitted is strictly prohibited.

    Attachments:
    1. IYWAG


    gravatar
    Frank
    March 1, 2012 at 12:35 am

    The discussion has been closed.


    gravatar
    Rob
    March 1, 2012 at 7:52 am

    Hey David

    I loaded your latest Galleria version (galleria-1.2.7b5.js) into
    my ‘under development’ website and the height ratio scaling and
    responsiveness works like a charm — well done!

    Unfortunately, I’m now getting the following error message when
    Galleria loads:

    ‘Could not extract width/height from image:
    http://wrwr1143.staging-static.netregistry.net/images/es0016/es0016….
    Traced measures: width:100px, height: 0px.’

    It happens in all my Mac browsers — Safari 5.1.2, Firefox
    10.0.2, Opera 11.61 and Chrome 17.0.963.56.

    Is there something in my CSS that could be causing it?

    Your thoughts, once again, would be greatly appreciated.

    Cheers

    Rob.


1 2
Galleria.io uses cookies to store information. You can read more about that in our Privacy Policy. I understand