Topic: How to make my photo grid thumbnail sizes dynamic (Read 6040 times)

matheso · « **on:** January 19, 2015, 02:49:11 am »

Hello,

I'd like to change the layout of the thumbnails on my homepage from what it is now, to something like this: http://www.pexels.com/

The thumbnail shouldI assume I'll need to change themes, but I don't know which one would be best?

Two main things I'd like:

matheso · « **Reply #1 on:** January 19, 2015, 02:50:39 am »

Sorry about that! Thumbnail width should be dynamic, based on the photo's resolution.

Can you recommend a solution? Thank you

matheso · « **Reply #2 on:** January 19, 2015, 02:51:11 am »

my site: http://taskbasket.net/gallery/

allvip · « **Reply #3 on:** January 20, 2015, 12:27:23 am »

Type in Google grid dynamic jquery.

I found this:

Isotope (is made by same person that made the famous mansonry) : http://isotope.metafizzy.co/layout-modes/fitrows.html
packery jquery plugin: http://packery.metafizzy.co/
freewallpackery http://vnjs.net/www/project/freewall/

More: http://speckyboy.com/2013/07/15/15-jquery-plugins-for-creating-dynamic-layouts/

I did a very fast read and search of the plugins I listed.
I did not payed attention if it really is what you want.

matheso · « **Reply #4 on:** January 20, 2015, 01:38:06 am »

Thank you, freewall looks perfect. However, I have 2 questions:

1. Is freewall free to use for commercial purposes? I can't find this info

2. I don't see where I place the html code into my template.html file? Right now my template file has this code to show my gallery:

Code: [Select]

<div id="cpg_main_block_outer">
        <div class="cpg_main_block_inner">
            {GALLERY}
            <br /> 
        </div>
        </div>

I don't see where I place freewall's code?

Thanks again

gmc · « **Reply #5 on:** January 20, 2015, 05:22:21 am »

Quote from: matheso on January 20, 2015, 01:38:06 am

1. Is freewall free to use for commercial purposes? I can't find this info

At the bottom of the Freewall site:

Code: [Select]

Copyright
© 2013 Minh Nguyen
Released under the MIT license

The MIT license:
http://opensource.org/licenses/MIT

allvip · « **Reply #6 on:** January 20, 2015, 02:58:59 pm »

Should work like this: add in template.html in the head (<head> </head> section):

<script type="text/javascript" src="themes/matheso/js/freewall.js"></script>

and under {JAVASCRIPT} or before </body>

Code: [Select]

  <script>
    $(function() {
      var wall = new freewall("#thumbWrapp");
      wall.fitWidth();
    });
  </script>

matheso · « **Reply #7 on:** January 22, 2015, 07:07:01 pm »

Thank you both for your helpful feedback. @allvip I'll try exactly that when I get a chance, and will report back. I appreciate it!

allvip · « **Reply #8 on:** February 02, 2015, 05:24:02 pm »

Topic related with How to integrate Free Wall jQuery plugin into Coppermine's gallery? http://forum.coppermine-gallery.net/index.php/topic,78030.0.html

News:

Author Topic: How to make my photo grid thumbnail sizes dynamic (Read 6040 times)

matheso

How to make my photo grid thumbnail sizes dynamic

matheso

Re: How to make my photo grid thumbnail sizes dynamic

matheso

Re: How to make my photo grid thumbnail sizes dynamic

allvip

Re: How to make my photo grid thumbnail sizes dynamic

matheso

Re: How to make my photo grid thumbnail sizes dynamic

gmc

Re: How to make my photo grid thumbnail sizes dynamic

allvip

Re: How to make my photo grid thumbnail sizes dynamic

matheso

Re: How to make my photo grid thumbnail sizes dynamic

allvip

Re: How to make my photo grid thumbnail sizes dynamic