HOW TO USE MASONRY WITH YOUR OWN THEME:
Curve masonry theme
http://forum.coppermine-gallery.net/index.php/topic,76859.0.htmlDownload 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://desandro.github.io/imagesloaded/about imagesloaded and masonry
http://masonry.desandro.com/appendix.html2. 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.