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

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

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 2 Guests 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