Making Galleria respond to window resize

Achton's Avatar

Achton

25 Feb, 2012 08: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.

  1. Support Staff 1 Posted by David on 28 Feb, 2012 07:50 PM

    David's Avatar

    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.

  2. 2 Posted by Rob on 29 Feb, 2012 02:41 AM

    Rob's Avatar

    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!

  3. Support Staff 3 Posted by David on 29 Feb, 2012 10:35 AM

    David's Avatar

    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/

  4. 4 Posted by Rob on 29 Feb, 2012 11:30 AM

    Rob's Avatar

    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
    [email blocked]

    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 [email blocked] 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.

  5. Support Staff 5 Posted by David on 29 Feb, 2012 12:45 PM

    David's Avatar

    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?

  6. Support Staff 6 Posted by David on 29 Feb, 2012 11:11 PM

    David's Avatar

    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!

  7. Support Staff 7 Posted by David on 01 Mar, 2012 12:07 AM

    David's Avatar

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

  8. 8 Posted by Rob on 01 Mar, 2012 12:12 AM

    Rob's Avatar

    Hey David

    You are prolific!

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

    Stay tuned.

    (And thank you!)

    Cheers

    Rob.

    >

  9. 9 Posted by Rob on 01 Mar, 2012 12:18 AM

    Rob's Avatar

    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.)

    >

  10. Support Staff 10 Posted by David on 01 Mar, 2012 12:24 AM

    David's Avatar

    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...)

  11. 11 Posted by Rob on 01 Mar, 2012 12:25 AM

    Rob's Avatar

    Hey David

    For me and my specific requirements, that works perfectly.

    Bravo sir!

    Cheers

    Rob.

    >

  12. 12 Posted by Rob on 01 Mar, 2012 12:28 AM

    Rob's Avatar

    : )

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

    Cheers

    Rob.

    ------
    Rob Sweetten
    Writer Guy
    [email blocked]

    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 [email blocked] 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.

  13. David closed this discussion on 01 Mar, 2012 12:35 AM.

  14. Rob re-opened this discussion on 01 Mar, 2012 07:52 AM

  15. 13 Posted by Rob on 01 Mar, 2012 07:52 AM

    Rob's Avatar

    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_4_thumb.jpg. 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.

    >

  16. Support Staff 14 Posted by David on 01 Mar, 2012 10:21 AM

    David's Avatar

    That is just a warning that lets you know that the script has a problem extracting width/height from that specific image. It could have something to do with permissions or image path. It can also be something in the Apache config. If you are doing a server-side resize on the fly, you need to double-check the cache settings.

    CSS can also cause this if you specify a different width/height on the IMG element.

    You can turn off warnings by setting debug: false.

    If you have other questions that are not related to the original topic (responsive resize), please post a new discussion. Thanks!

  17. 15 Posted by Rob on 01 Mar, 2012 11:06 AM

    Rob's Avatar

    G'day David

    Nothing fancy going on at my end, so I just set debug to false.

    Problem solved.

    Thanks again for all your help and congratulations on producing such a terrific piece of software.

    Cheers

    Rob.

    >

  18. David closed this discussion on 01 Mar, 2012 04:43 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac