Loading... 0%
skip loading
Hallo daar!

Mijn naam is Jeroen Penninck.
Ik ben een programmeur die houdt van het maken van spelletjes en 3D-graphics.

Welkom op mijn website!


A responsive GalleryView
18 maart 2013
(Dit blogitem is enkel beschikbaar in Engels.)
responsive GalleryView

Some time ago, I reworked my website and needed an image gallery. I found this nice image gallery called GalleryView which was very easy to configure. (Thanks Jack Anderson for making this gallery!)

But, as my website was responsive I needed a responsive version of this GalleryView. This was not available at that time so I wrote a version myself. This was possible as the code was available on Github. The responsive version can also be found on Github: https://github.com/jeroenpx/GalleryView.

UPDATE 20 April 2014 - Added a template for easier usage.

A template for easier usage. (new)

For people who just want a responsive GalleryView and don't care that the filmstrip is at the bottom and how exactly it scales, you can download this template.

However, if you do want to change some settings or want a different scaling, you should continue reading! Changing settings means you will need to write a small piece of javascript to tell the GalleryView how the scaling works.

For the use in Wordpress, see this blogpost.

How to use the responsive version?

The responsive version supports all the features of the normal GalleryView. Therefore you can start by creating a non-responsive version and making it responsive later. I will only explain the steps you need to do to make an existing GalleryView responsive.

Step 1: create a non-responsive GalleryView.

For this step you can find information on http://spaceforaname.com/galleryview/ and https://github.com/jackwanders/GalleryView.

Step 2: decide how you would like the GalleryView to scale.

There are a lot of possible ways to resize a GalleryView. You will need to know how you want it to scale...

For example, would you like to let the GalleryView try to fit a div? Or make the height fixed and make only the width dependent on the size of the div? You could also make the height change to fit x images in the filmstrip (when the images in the filmstrip resize).

About the thumbnails... Do the thumbnails stay the same size independent of the size of the GalleryView, resulting in more thumbnails that are shown when there is more place? Or would you like to scale the thumbnails to fit the filmstrip and leave the number of thumbnails shown the same? Another option would be to scale the thumbnails so that they take a certain procent of the width of the GalleryView. (assuming the filmstrip is placed vertically)

Step 3: calculate the frame_width, frame_height, panel_width, panel_height depending on the size of the browser.

When you know how you want the filmstrip to resize, it is time to make it happen. Depending on the choices you made in step 2 you will have a totally different responsive gallery.

We need to calculate the width and height of the frame and an individual thumbnail

What do we need to do?

Every time the browser resizes, we will need to tell the GalleryView the new size of the thumbnails and the frame.

So we need to be able to calculate the things shown in the figure to the right.

How do you do this? An example...

Let us assume the filmstrip is horizontal. We also know the total width of the gallery we want. For example the width of a div.


We want the frame to fit the width of the gallery. Note that we have to take into account the padding as we can see in the picture to the right.

So, to calculate the width of the frame, we take the total width of the gallery and subtract the padding two times. (You can set the padding in the GalleryView: parameter "frame_gap". The default value is 5px.)

Depending on your GalleryView, the calculations are different and I will not go into detail. Just some notes:
- If we want the thumbnails to have a constant width/height, calculating the width/height of the panel is really easy: it is just a constant.
- If we want something to keep the same aspect ratio we calculate the width first and then multiply it by a certain number (e.g. 0.6) to get the height.

The final step: adding the resize calculations to the code

First we need to be able to call methods on the GalleryView. Therefore we need to save the <ul>, the GalleryView was created from.
To do this you save the <ul> just before the call to .galleryView();
For example: var $gallery = $('#myGallery');

After calling .galleryView() we need to setup the resize code.

function resizeTheGallery(){
    // Implement your own way of resizing here!
    var new_frame_width = <add calculations from step 3 here>
    var new_frame_height = <add calculations from step 3 here>
    var new_panel_width = <add calculations from step 3 here>
    var new_panel_height = <add calculations from step 3 here>
    // call the resize method
    $gallery.resizeGalleryView( new_panel_width,
//call the resize method and bind to resize event

The above code defines a method which contains the calculations from step 3 and calls the correct method on the GalleryView when the calculations are done. The lines at the end make sure the code gets called when the window is resized, and in the beginning.

If you are using a div which the gallery tries to fit, you should also add style="overflow:hidden;" to the div. Otherwise the div will expand to fit the size of the gallery and not the inverse.

And as last, make sure you use the responsive GalleryView. You can download the js-file here: jquery.galleryview-3.0-dev.js.

Examples of the responsive GalleryView

A demo of the responsive GalleryView can be found here.

Some other examples of the responsive GalleryView can be found on various pages of my website, for example: here.

More examples of the GalleryView

If you would like to know what kind of things you can do with the GalleryView, you can visit the site of the GalleryView: http://spaceforaname.com/galleryview/.


Feel free to ask questions... (You can ask them on github or send me an e-mail)