Discussion on PhotoMosaic


makfak supports this item


199 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().

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

Is there a way to hide/remove the gallery name at the top of the gallery? Thank you.

PhotoMosaic galleries aren’t named and, as such, can’t place a name (that doesn’t exist) at the top of the gallery. That name is coming from somewhere else.

FYI, your live preview is broken.

Thanks for the heads-up.

Hi. I created a masonry gallery with PhotoMosaic which works fine. Now I want to switch off certain images in the mobile view. Is there a way to realize that? How can I mark the »non-visible« images (I use the json-way with Thank you.

This is absolutely something you can do yourself. You can use windows.matchMedia (or a great library like Enquire.js) to monitor breakpoints and reload the mosaic with whatever data you want.

I haven’t actually run this code but it’s an example of how you’d do what you want. There’s some extra work happening here because this example assumes you might have multiple mosaics on a page.

// decorate your data however you want
var PMalbum1 = [
        src: '...',
        caption: '...',
        thumb: '...',
        show_on_mobile: false
        show_on_mobile: true
var PMalbum2 = [...];

// this makes it easy to say which data belongs to which mosaic
var mosaic_pairs = [
    ['#target1', PMalbum1],
    ['#target2', PMalbum2]

// the settings shared by all your mosaics (minus 'gallery')
var common_settings = {
    columns: 'auto',

// init your mosaics
    var settings = $.extend(true, common_settings, { gallery: pair[1] });

function reloadMosaic(selector, data) {
    var $mosaic = $(selector).children('.photoMosaic');
    var options = $.extend(true, common_settings, { gallery: data });

// filter the data to only be the images you want to see
enquire.register("screen and (max-width: 720px)", {
    match : function() {
            var new_data = pair[1].filter(function(image){
                return image.show_on_mobile;
            reloadMosaic(pair[0], new_data);
    unmatch : function() {
            reloadMosaic(pair[0], pair[1]);

That should get you moving in the right direction. Good luck!


I just purchased your Photomosaic javascript plugin. This has to be the best masonry plugin I’ve ever used.

However there is an issue. I use this on a wordpress webpage. The reason I didn’t purchase the wordpress plugin was because I’m using this on a bunch of images dynamically populated onto our site. The grid is formed successfully, but the images have the loading animation on them. Could you please provide me with a quick solution? Thank you.

Best Regards, Nishad

I am following up to chrigu_t’s question on the Text on mouseOver from 10 months ago. I have followed what chrigu_t had done on his site to get the text on mouseOver, but cannot get the line breaks to display correctly. I have my attempt up at I am not strong at JavaScript, but have tried setting the line at $span.text($img.attr(‘alt’)); to $span.html($img.attr(‘alt’)); but then the
is ignored. If I leave the $span.text($img.attr(‘alt’));, the
in the ALT tag displays, but does not function as HTML. I am sure that I am missing something basic, but not sure what it is. Thanks in advance.

Hi, I love this plugin.

I want to use it in nearly ten more items. Can you please let me know if I can just use the existing license to use this on other projects? Or Do I have to purchase the extended license to use on unlimited sites? If I can do that, I’m happy. I just don’t want to buy a regular license every time I want to use this. please let me know the details. Thanks in advance :)

When I try to use the gallery, it gives this error: r.getClientRects is not a function

hi i have integrated photomosaic gallery in codeigniter project. we did not get any success result. can you tell us which js and css file are nucessarary to show photomosaic gallery layout. we get our image result in php foreach loop in html ul->li format. not json and xml

is there any functionality to rotate photomosaic view image..?


Jeihoon Purchased

I am trying to use html codes in the page , but it is not working … does not call css and does not function.

is there any functionality to rotate photomosaic view image..?

I get a javascript error when using your plugin: TypeError: React.createClass is not a function. (In ‘React.createClass’, ‘React.createClass’ is undefined)