Responsive thumbnail layouts

simonjmp / 2012-09-04 11:12:24   

Hello all,

Been scouring the forums for a morsel on this issue. Am wondering, is it possible to set a browser width on the thumbnails for Visual Index, in addition to the limiter? I.e. could you set it so that when a browser window is less than 700 pixels, it would start to reduce the amount of thumbnails in a row. But if more, that it would simply go until whatever maximum amount of thumbnails has been set.

The guy I'm making the website for wants quite a wide amount of thumbnails, but then on a smaller laptop screen it leads to a whole load of images getting 'lost' over the edge of the browser. Is there a way to make the exhibit respond to the browser size?

Thanks :)
simon

Vaska A / 2012-09-04 12:45:06   

Don't set the counter at all and it will natually set all the thumbnails - isn't this the same thing?

simonjmp / 2012-09-04 14:52:59   

Yeah I know what you mean, that's what I've done for the time being.

'The guy' however, likes his desktop mac and the large browser width that it comes with, but doesn't want the thumbnails to go on across 30 inches or wtvr. So instead maybe cap it at 6, but then obviously this doesn't work on a laptop... I know it's petty, but just wondering if doable.

No biggie if not. Cheers Vaska

Vaska A / 2012-09-04 14:58:24   

Check out max-width - it's a CSS rule - apply it to #img-container probably via the format.visaul_index.php file itself (CSS rules are at the bottom). I don't think it will work but it could be the easy solution. Otherwise, javascript will be the only way...and off the top of my head I'm not sure how complicated that will be.

arsondpi / 2012-09-04 14:58:26   

then try restraining the #img-container with a percentage...
for example

  1. #img-container {
  2.     width: 80%;
  3. }

Alternatively use a max-width atributte instead...

  1. #img-container {
  2.     max-width: 900px;
  3. }
Vaska A / 2012-09-04 14:58:58   

Pindaros explains it better, but do read my comment above about it. I hope it works...

simonjmp / 2012-09-06 14:05:03   

Apologies for the delay, very much appreciate the response...
so i was just about to abort and give up. However, it appears that the above fix does work!

I think that the max-width is preferred, as you can set the maximum size that the amount of thumbnails will reach, and therefore not going on ad infinitum. The % width doesn't seem to affect it at all.

So if you set the counter to 0 in the exhibition page, and the max-width in the php, there will still be a limit when on a larger screen. Not that I've check it on one, but I assume from the zoom-response to be the case.

The code I put as such in the format.visaul_index.php

return "#img-container { max-width: 1500px; {$grid} }

thanks guys :)

linuesa / 2012-09-06 17:36:11   

It works for me too! Thanks.

This thread has been closed, thank you.