makfak supports this item


184 comments found.

Just bought PhotoMosaic, great work!

It’s clean and easy to implement!

Do you know the best way to change the columns based on screen size without auto? I would like to keep three columns for mobile dimensions. However, I would like 6 columns for desktop dimensions.


Just in case anybody else needs this solution, the following is what I used.

var col = 5;

$(window).on("resize", function() {
    if ($(this).width() >= 1200) {
        col = 6;
    if ($(this).width() < 1200) {
        col = 5;
    if ($(this).width() < 1000) {
        col = 4;
    if ($(this).width() < 800) {
        col = 3;
    if ($(this).width() < 600) {
        col = 2;
    $('#target').photoMosaic({input: 'html', columns:col,});
    $('#target').photoMosaic({input: 'html', columns:col,});

Here’s another good resource on loading gallery images from folder with php script. It can be easily integrated with photomosaic dynamic jquery php image gallery from folder


Hi, I have just purchased photomosaic for html and I would like to set the minimum width of an image, like you can do in your WordPress plugin.

Basically I would like 2 columns but turning into one column on a smaller screen (responsive). The images would be around 650 pixels wide in each column.

My parameters are:

<script type=”text/javascript”> $(document).ready(function(){ </script>

        // input examples
        //    input: 'json',
        //    gallery: PMalbum, // var PMalbum is defined in data/
// input: 'xml',
        // gallery: 'data/',
input: 'html',
     padding: 10,
     order: "masonry",
// lightbox settings
    modal_name : 'prettyPhoto',
    modal_ready_callback: function($pm) {
        $('a[rel^="prettyPhoto"]', $pm).prettyPhoto({
            overlay_gallery: false,
            slideshow: false,
            theme: "pp_default",
            deeplinking: false,
            social_tools: "",
            show_title: false

You can use the following function as a replacement for the method built-in to your copy of PhotoMosaic. All you need to do is put it in a <script> tag after your PhotoMosaic JS include <script> but before your $(document).ready(...) call.

For example…
<script src="../path/to/photomosaic.js/"></script>
<script>makeColumnBuckets = function(){...}</script>

The first four variables in the function are the only things you should need to touch.

max_columns guarantees that you’ll never have more than 2 columns.

min_columns guarantees that you’ll never have less than 1 column.

min_column_width is used to determine when a column can be added or when a column needs to be removed. You said you wanted this to be 625… that means that PhotoMosaic won’t add a second column until the mosaic is wide enough so both columns can be 625px wide (meaning the smallest mosaic that would be 2 columns would be 1250px wide).

mobile_cutoff guarantees that the mosaic will only be 1 column wide when the total width of the mosaic is this wide.

Given that you want your desired min_column_width means your mosaics will drop down to one column at 1249px… mobile_cutoff probably won’t matter to you.

PhotoMosaic.Layouts.Common.makeColumnBuckets = function (opts) {
    var max_columns = 2;
    var min_columns = 1;
    var min_column_width = 625;
    var mobile_cutoff = 425;

    var columns = [];
    var num_cols = 0;
    var max_width = 0;
    var num_images = 0;
    var i = 0;

    if (opts.columns && opts.columns !== 'auto') {
        num_images =;
        num_cols = (num_images < opts.columns) ? num_images : opts.columns;
    } else {
        max_width = opts.width;
        num_images =;
        num_cols = (max_width < mobile_cutoff) ? 1 : Math.floor(max_width / min_column_width);

        if (num_images < num_cols) {
            num_cols = num_images;

        if ((max_columns !== 'auto') && (num_cols > max_columns)) {
            num_cols = max_columns;

        if ((min_columns !== 'auto') && (num_cols < min_columns)) {
            num_cols = min_columns;

    for (i = 0; i < num_cols; i++) {
        columns.push( [] );

    return columns;

Good luck!

Thank you very much, it works a treat


Can I populate a masonry grid with one photo each from either 1) all posts or 2) a category of posts?

3) How about from custom posts types, such as Portfolio Posts?

4) Are there hover effects? In particular, I want to display the title of the post over the block upon hover.

Thanks, Mike

You posted on the JS-only version of PhotoMosaic. You’re asking questions about the WordPress version.

To answer your questions:
  1. yes
  2. yes
  3. yes
  4. yes – here’s an FAQ that explains how