How to make my photo grid thumbnail sizes dynamic How to make my photo grid thumbnail sizes dynamic
 

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

How to make my photo grid thumbnail sizes dynamic

Started by matheso, January 19, 2015, 02:49:11 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

matheso

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

#1
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

allvip

#3
January 20, 2015, 12:27:23 AM Last Edit: January 20, 2015, 12:35:14 AM by allvip
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

#4
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

#5
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
Thanks!
Greg
My Coppermine Gallery
Need a web hosting account? See my gallery for an offer for CPG Forum users.
Send me money

allvip

#6
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

#7
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

#8
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
Print
Go Up Pages1
User actions