HOW TO USE MASONRY WITH YOUR OWN THEME:
Curve masonry theme http://forum.coppermine-gallery.net/index.php/topic,76859.0.html (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 :
<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://masonry.desandro.com/)
http://desandro.github.io/imagesloaded/ (http://desandro.github.io/imagesloaded/)
about imagesloaded and masonry http://masonry.desandro.com/appendix.html (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.
OK.i decided to add some details:
1.template.html:
<link rel="stylesheet" href="themes/your_theme_name/bounceIn.css">
and after {JAVASCRIPT}:
<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>
2. theme.php
in function theme_display_thumbnails
A) replace:
if ($mode == 'thumb') {
starttable('100%', $title, $thumbcols);
} else {
starttable('100%');
}
with:
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:
for (;($i % $thumbcols); $i++) {
echo $empty_cell;
}
AND
if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
echo $row_separator;
}
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:
/******************************************************************************
** 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"> </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:
/******************************************************************************
** 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"> </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
******************************************************************************/
4. style.css style is the name of my main css file.
A) add:
/* 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)
5.bounceIn.css
creat a new blank file and paste this code:
.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.
the bounceIn code is from https://daneden.me/animate/ (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 (https://github.com/daneden/animate.css)
from the zip file place only animate.min in your theme folder only and add to template.html :
<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.