Add new row of color palettes in iris color picker

1 Views

I am working on a WordPress theme and I am using the built in iris color picker (by Automatic).
Iris supports color palettes by default, however it displays all colors on one single line, and once you add more than 8 colors, the color boxes get very small (see JSFiddle demo below).
Is there anyway to add a new row of colors to the iris color picker?

Here’s the default jQuery plus JSFiddle

Read More
jQuery(document).ready(function($){
    $('#color-picker').iris({
        hide: false,
         palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f', '#125', '#459', '#78b', '#ab0', '#de3', '#f0f'],
    });
});

http://jsfiddle.net/rcm0pdu1/

Post Views: 1

Related posts

1 comment

  1. It seems the iris plugin makes a few calculations for the design width and height based on the amount of palettes used. The function option responsible for this can be found here: https://github.com/Automattic/Iris/blob/master/src/iris.js#L466-L513

    Since I am not that familiar with JavaScript, I don’t really know how to override a function option inside of a plugin without touching the core file.

    Here is a jQuery hack I quickly wrote. It’s not the best solution, but it does the trick. (not the best solution because the iris plugin still makes the calculations of the width and height, although they’re not being used in the end)

        $('.iris-palette').css({'height':'20px','width':'20px', 'margin-left':'','margin-right':'3px','margin-top':'3px'});
    $('.iris-strip').css('height','140px');
    paletteCount = $('.iris-palette').length
    paletteRowCount = Math.ceil(paletteCount / 8);
    $('.iris-picker').css({'height': 150 + (paletteRowCount * 23)+'px', 'padding-bottom':'15px'});

    http://jsfiddle.net/rcm0pdu1/16/

Comments are closed.