Please open a support ticket from our new Support page.
Front Page › Forums › Problems › Making Galleria respond to window resize
I’m trying to embed Galleria into a responsive HTML5
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.
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.
David, this demo looks promising, well done and thank you for
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
fairly modest, but I’m a fast learner. For the record, I am using
your twelve theme.
Many thanks — and happy leap year day!
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/
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:
max-width: 100% ;
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
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?)
PO Box 1231
NORTH FITZROY VIC 3068
t +613 / 9486 4142
f +613 / 9486 4131
This email and any files transmitted with
it are confidential and intended solely for
the use of the individual(s) to whom they
If you have received this email in error please:
(i) delete it from your system; (ii) notify Writer Guy Pty Ltd
immediately via email
(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.
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
Perhaps you are asking how to rescale the gallery with kept
proportions on window resize?
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
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!
And here is a demo using the latest commit: http://jsfiddle.net/3MUTS/
You are prolific!
I’m half-way through writing a response to your earlier
(And thank you!)
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,
Being quite the novice, my efforts were basically trial and
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
Now I’m off to investigate your latest link.
Cheers — and thanks again.
P.S. Whereabouts in the world are you? (I’m in Melbourne,
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
We are based in Sweden (it’s actually 1:23 a.m here, so I
better hit the sack…)
For me and my specific requirements, that works perfectly.
Have a good night’s sleep mate — you’ve earned it!
The discussion has been closed.
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
‘Could not extract width/height from image:
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.