Category Archives: Responsive jQuery Gallery

How to make the gallery responsive

Question:

You seem to have a unique gallery that will do exactly what I need. One of the things mentioned on your site is that it is responsive. The page on your site that I want to emulate is:

http://html5box.com/html5gallery/demo_mediacenter.php

but this isn’t responsive.

What I want to achieve with your gallery:

There has a video container at the top with potentially unlimited rows of three thumbs under, that break to a single column on mobile devices.

So the question is, if I buy a licence will I be able to make your gallery responsive and style it to look identical to my test page.

Answer:

Yes, you can achieve that with HTML5 Gallery.

The reason http://html5box.com/html5gallery/demo_mediacenter.php is not responsive is because our website itself is not responsive.

You just need to add the following data tag to your DIV, then the gallery will be responsive. Of course, your website itself must be responsive too.

data-responsive="true"

Responsive HTML5 Video Gallery

Question:

We install the video gallery, but its not responsive, and the thumbwidth and thumbheight attribute doent work to set the dimensions of the thumbnails.

Theres the code :

<div class="html5gallery" data-width="1000" data-height="560" thumbwidth="140" thumbheight="85" data-showimagetoolbox="always"  data-skin="light" style="display:none;">

Answer:

You need to add data-responsive="true" to your div. For more details, you can check http://html5box.com/html5gallery/install.php#skinandsize

For the thumbnails, it's because you did not add "data-" prefix to the parameters. You can change your code to the following:

<div class="html5gallery" data-responsive="true" data-width="1000" data-height="560" data-thumbwidth="140" data-thumbheight="85" data-showimagetoolbox="always"  data-skin="light" style="display:none;">