Having installed galleria on my webpage, I then wanted to align the gallery vertically inside the containing div.
Unfortunatley, there is little CSS support to do this, vertical-align is a property that does not work for images, and only really works for text appearing next to images or in table-cells. (Apparently, this property maybe improved for CSS3).
I figured out a way to use Galleria’s onImage : function, which handles anything every time an image is loaded. So adding the following code will insert a class to any landscape image, and removes it for portrait ones:
if (image.height() < image.width()) {
$('#main_image').addClass('landscape');
} else {
$('#main_image').removeClass('landscape');
}
This can also be extended to be used for other means. For example, in one gallery I wanted the first image to have some text appearing next to it. To do this, I created two separate CSS classes to hide and show the text and used this code to flip between them:
if (image.attr('src') == "images/imageWithText.jpg") {
$('#main_image').addClass('showText');
$('#main_image').removeClass('hideText');
} else {
$('#main_image').removeClass('showText');
$('#main_image').addClass('hideText');
}
An example of this in use can be found here.
