Support > cpg1.5 theme contributions

Curve masonry theme ( JavaScript grid layout theme) + bounceIn css

(1/2) > >>

allvip:
1. Masonry removes all the empty space around thumbnails specially with this settingd in CONFIG:
Thumbnails settings : Use dimension (width or height or max aspect for thumbnail)* -  weight and if width was set when images were uploaded.If not use admin tool to updated thumbs.

2. Images repositon on browser resize.


Masonry Official Website:

http://masonry.desandro.com/


What is Masonry?

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.


site that has masonry layout: http://staff.tumblr.com/archive


Demo - Download

allvip:
Coppermine masonry theme - Coppermine grid layout theme

If the demo is not working anymore:

IMAGE PREVIEW


        
     

Αndré:
Thank you for your contribution. I'll have a look at your theme and upload it to our demo gallery as soon as possible.

allvip:
I just replaced the zip for v1.0 (december 08/2013).
it was looking OK only in firefox (sorry I forgot to check how the theme looks in other browsers the first time) and the admin tools page was not working.

the changes I made to the new zip:
1.I added width:132px for .item in style.css (withot width it looks ok only in firefox)
2.I adeed js-masonry to echo '<div class="masonry">'; like this: echo '<div class="masonry js-masonry">' to function theme_display_thumbnails from theme.php; this way masonry will work even without jqury.min.js or colunWidth.
2.deleted js_include('js/jquery.min.js'); at the end of function theme_display_thumbnails from theme.php.
3.deleted jquery.min.js from js folder.

allvip:
How to add masonry to your own theme

coppermine Masonry coppermine grid layout http://forum.coppermine-gallery.net/index.php/topic,76860.0.html

Navigation

[0] Message Index

[#] Next page