coppermine Masonry coppermine grid layout

[allvip]

HOW TO USE MASONRY WITH YOUR OWN THEME:

Curve masonry theme http://forum.coppermine-gallery.net/index.php/topic,76859.0.html

Download it and see what I have changed:

1.template.html

I just added masonry.pkgd.min.js , imagesloaded.pkgd.min.js and bounceIn.css for a bounce effect.

and :

Code Select Expand


<script>
$(document).ready( function() {

  // for each .masonry element
  $('.masonry').each( function( i, elem ) {
    // separate jQuery object for each element
    var $elem = $( elem );
    // do imagesLoaded on it
    $elem.imagesLoaded( function() {
      // trigger .masonry() when element has loaded images
      $elem.masonry();
    });
  });

});
</script>


imagesloaded is for images to load before masonry to not overlap.

DOWNLOAD Masonry and imagesloaded from:

http://masonry.desandro.com/

http://desandro.github.io/imagesloaded/

about imagesloaded and masonry http://masonry.desandro.com/appendix.html

2.  theme.php:

I edited functions $template_thumbnail_view and theme_display_thumbnails.

look at the 2 function and see what I have changed.

theme_display_thumbnails is a big function - is  better read step 2 for details.

If you do not have those functions in your theme.php then open themes/sample/theme.php find the 2 functions and copy them in your theme then look at my curve masonry and see what I have changed.

3. style.css

I added section:

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

and added max-width:120px; and overflow:hidden; to .thumb_filename , .thumb_title, .thumb_caption,word-wrap:break-word; only to  .thumb_filename and clear:both; to .footer.

[allvip]

OK.i decided to add some details:

1.template.html:

Code Select Expand


<link rel="stylesheet" href="themes/your_theme_name/bounceIn.css">


and after {JAVASCRIPT}:

Code Select Expand


<script src="themes/your_theme_name/js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="themes/your_theme_name/js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script>
$(document).ready( function() {

  // for each .masonry element
  $('.masonry').each( function( i, elem ) {
    // separate jQuery object for each element
    var $elem = $( elem );
    // do imagesLoaded on it
    $elem.imagesLoaded( function() {
      // trigger .masonry() when element has loaded images
      $elem.masonry();
    });
  });

});
</script>


[allvip]

2. theme.php

in function theme_display_thumbnails

A) replace:

Code Select Expand



    if ($mode == 'thumb') {
        starttable('100%', $title, $thumbcols);
    } else {
        starttable('100%');
    }


with:

Code Select Expand


    echo '<div class="thumbTitle">';
    echo $title;
    echo '</div>';

    echo '<div class="masonry js-masonry">';


B) at the end of the function after echo $footer; add: echo '</div>'; and delete endtable();

C) DELETE:

Code Select Expand


    for (;($i % $thumbcols); $i++) {
        echo $empty_cell;
    }


AND

Code Select Expand


        if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;
        }


[allvip]

3.theme.php

function $template_thumbnail_view :

I will not post in detail the changes.is a small function so is easy to see and compare the after and before.

BEFORE - this is the original function:

Code Select Expand


/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/

// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/


AFTER - this is the function after all my changes:

Code Select Expand


/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/
// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
<!-- END header -->
<!-- BEGIN thumb_cell -->                           
        <div class="item animated bounceIn" width ="{CELL_WIDTH}" align="center">
                             <a href="{LINK_TGT}">{THUMB}</a>
                                      {CAPTION}
                                      {ADMIN_MENU}                       
         
        </div>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <div valign="top" class="thumbnails" align="center">&nbsp;</div>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
<!-- END row_separator -->
<!-- BEGIN footer -->
<!-- END footer -->     
<!-- BEGIN tabs -->
       
                <div class="tabDiv">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>       
                                       {TABS}
                                </tr>
                        </table>
                </div>
       
<!-- END tabs -->
<!-- BEGIN spacer -->       
<!-- END spacer -->
EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/



[allvip]

4. style.css style is the name of my main css file.

A) add:

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.
------------------------------------------------------- */



DOWNLOAD AND UPLAOD in your_theme_name/js folder masonry and imagesloaded (links in the first post)

[allvip]

5.bounceIn.css

creat a new blank file and paste this code:

Code Select Expand


.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-ms-animation-duration:0.8s;-o-animation-duration:0.8s;animation-duration:0.8s;}.animated.hinge{-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-ms-animation-duration:0.8s;-o-animation-duration:0.8s;animation-duration:0.8s;}@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.1);
}
        25% {
opacity: 0.5;
-webkit-transform: scale(.1);

}
50% {
        opacity: 1;
-webkit-transform: scale(1);
}

70% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1);
}
}

@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.1);
}
50% {
        opacity: 1;
-webkit-transform: scale(1);
}

70% {
-webkit-transform: scale(1);
}
25% {
opacity: 0.5;
-webkit-transform: scale(.1);

}


100% {
-moz-transform: scale(1);
}
}

@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.1);
}
25% {
opacity: 0.5;
-webkit-transform: scale(.1);

}
50% {
        opacity: 1;
-webkit-transform: scale(1);
}

70% {
-webkit-transform: scale(1);
}

100% {
-o-transform: scale(1);
}
}

@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.1);
}
25% {
opacity: 0.5;
-webkit-transform: scale(.1);

}

50% {
        opacity: 1;
-webkit-transform: scale(1);
}

70% {
-webkit-transform: scale(1);
}
100% {
transform: scale(1);
}
}

.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}



name it bounceIn.css and place it in your theme folder.

[allvip]

the bounceIn code is from https://daneden.me/animate/ and I edit it because I did not like it with his original setttings.

you can change the bounceIn effect with other effects from the website.

download animate.min from https://github.com/daneden/animate.css

from the zip file place only animate.min in your theme folder only and add to template.html :

Code Select Expand


<link rel="stylesheet" href="themes/your_theme_name/animatemin.css">


then in function $template_thumbnail_view replace  only the word bounceIn with the name of the effect you like most from the website.