makfak supports this item


188 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

Hello, I’ve just purchased the Photomosaic Plugin, very nice work! I have one Problem: if I have a small screen (or little sized browser) then the images will overlap on the right side and I will get vertical scroll. If I manually resize the screen (my browser) the Issue is resolved. If I hit the reload button, the images will again overlap the previous divs on the right side. I have this issue only when I use a small browser or small screen size (1 or 2 colums in photomosaic). Here you can see my site (in progress): Thank you for your help! Best Regards, Chris

my Purchase Code: f9a3af37-064f-40e5-85d1-42e57e169144

Looking at your site, I can’t reproduce the problem you’re describing. Is it still happening? Can you provide more information? Which browser are you using? Is there a screen size (exact pixel width) when the problem starts?

I’m using Chrome & Firefox, it happens on every browser. Just use a small browser windows (for example 500px width) then hit reload. the Image boxes are a bit wider than the browser window size. if you resize the window, the problem disapears. after reload, you can see again the too wide image boxes. it happens with every windows size and colum count…

I can’t reproduce the problem as you describe it. But, based on your description it sounds like forcing the mosaic to refresh (what happens when the page resizes) will correct things. You can do this for all mosaic on a page with something like…


... or for a single mosaic just by calling .photoMosaic() on the element again.


Hi, it’s me again :) Is it possible to get a “mouseOver” Text when I hover over the Image?

It looks like you figured this out on your own. Congratulations!

Yes it works with the title / mouseOver text. But how can I do some multiple row text? I can’t give a line break (
or \n) within the title tag…

You can put anything an attr as long as you encode it. Then, simply decode it and then set it as .html() instead of .text().


MULISH Purchased

Hi Mak

Simple question here.. I am using PhotoMosaic here: and for some reason, the images have a slight delay on load. You should notice when you refresh, the first image (top left) loads first, and you quickly see the rest of the images load under it and then abruptly loads in place. Do you know how to tweak this? am I loading something I shouldn’t be?


- Austin

You’re using the html input method but aren’t including width and height data on your images. This means that they have to load completely before PhotoMosaic can get their dimensions and construct the gallery. Adding those attributes to your images will prevent that delay.

worked. thank you!


I’ve integrated your cool tool and have a “little” problem. I can see the pics only on a hover.

Can you tell me what’s wrong?

Best regards

T. Wessel