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

[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

[allvip]

Chanes for v1.1

1) I deleted fom template.html:

Code Select Expand


jQuery(function(){
      jQuery('.masonry').masonry({
          itemSelector: '.item',
          columnWidth: 50
      });
});


2) I deleted <div class="grid-sizer"></div> from theme.php. Is an error.
3) I deleted <br /> after <a href="{LINK_TGT}">{THUMB} from theme.php
4) I replaced in style.css:

Code Select Expand


/* Styles for masonry.
------------------------------------------------------- */
.grid-sizer {
        float: left;
        margin:2px;
}
.item {
        width:132px;
        float: left;
        margin:2px;
        padding:4px;
        border:1px solid #cccccc;
        background: #f1f1f1 ;
        box-shadow:5px 5px 5px #888888;
}
.thumbTitle {
    color:#cccccc;
    background:#000000;
    clear:both;
    padding-left: 10px;
    font-family:Arial,sans-serif;
    font-size: 100%;
    font-weight: normal;
    line-height: 30px;
    margin-top:5px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.tabDiv {
        margin-top:10px;
}
/* End Styles for masonry.
------------------------------------------------------- */


with:

Code Select Expand


/* Styles for masonry.
------------------------------------------------------- */

.item {
        width:14%;
        float: left;
        margin:4px;
        padding:0.5% 1% 0.5% 0.5%;
        border:1px solid #cccccc;
        background: #f1f1f1 ;
        box-shadow:5px 5px 5px #888888;
}
.item img {
        max-width: 100%!important;
height: auto!important;
}
.thumbTitle {
    color:#cccccc;
    background:#000000;
    clear:both;
    padding-left: 10px;
    font-family:Arial,sans-serif;
    font-size: 100%;
    font-weight: normal;
    line-height: 30px;
    margin-top:5px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments {
    max-width: 100%!important;
    overflow: hidden;
word-break: break-all;
}
.tabDiv {
        margin-top:10px;
clear: both;
}
/* End Styles for masonry.
------------------------------------------------------- */


[Αndré]

Added theme to our demo and download section, added links to initial post, added version number to zip file in initial post.

[allvip]

much better coppermine masonry theme by Jeff Bailey:

http://forum.coppermine-gallery.net/index.php/topic,75270.0.html