├── img └── beach.png ├── css └── swatches.css ├── README.md └── jquery.swatches.js /img/beach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mixinmax/jquery.swatches/HEAD/img/beach.png -------------------------------------------------------------------------------- /css/swatches.css: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------- 2 | holders hold the colours and everything 3 | else for the swatches 4 | ----------------------------------------- */ 5 | .jqueryswatches .holder { 6 | position: relative; 7 | width: 100%; 8 | height: 90px; 9 | margin-top: 50px; 10 | border-radius: 10px; 11 | } 12 | 13 | .jqueryswatches .holder:hover { 14 | box-shadow: 0 0 30px 3px #ddd; 15 | } 16 | 17 | /* ----------------------------------------- 18 | everything below styles the individual 19 | color blocks 20 | ----------------------------------------- */ 21 | .jqueryswatches .color:first-child { 22 | border-radius: 7px 0 0 7px; 23 | } 24 | 25 | .jqueryswatches .color:nth-last-child(2) { 26 | border-radius: 0 7px 7px 0; 27 | } 28 | 29 | .jqueryswatches .color { 30 | height: 100%; 31 | display: inline-block; 32 | } 33 | 34 | /* ----------------------------------------- 35 | the shade class contains the names of 36 | the colors for the popup effect 37 | ----------------------------------------- */ 38 | .jqueryswatches .shade { 39 | position: absolute; 40 | bottom: 0; 41 | left: 0; 42 | height: 10px; 43 | width: 100%; 44 | background-color: #000; 45 | opacity: 0.14; 46 | border-radius: 0 0 7px 7px; 47 | text-align: center; 48 | color: #FFF; 49 | } 50 | 51 | .jqueryswatches .color-names { 52 | font-size: 9px; 53 | color: #aaa; 54 | } 55 | 56 | .jqueryswatches .name { 57 | display: inline-block; 58 | height: 100%; 59 | opacity: 0; 60 | margin-top: 4px; 61 | font-size: 12px; 62 | } 63 | 64 | /* ----------------------------------------- 65 | styles the name of the swatch 66 | ----------------------------------------- */ 67 | .jqueryswatches .info { 68 | font-size: 20px; 69 | text-align: center; 70 | margin-top: 10px; 71 | color: #000; 72 | } 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jquery.swatches 2 | 3 | This is a jQuery plugin that turns a single `div` into a sweet color swatch (aka, color pallette). 4 | 5 | ## Usage 6 | 7 | Simply place a similar `div` element where ever you want a swatch to appear: 8 | 9 |
10 | 11 | Then, after including `jquery.swatches.js`, call the `swatchify()` function on the `div`: 12 | 13 | $('.swatch').swatchify(); 14 | 15 | And when you load your page, you'll have this lovely thing staring at you (the right is what it looks like when you hover over the swatch): 16 | 17 | 18 | 19 | Check out the examples section to see the animation too. 20 | 21 | ## Customizing 22 | 23 | The `div` can have any class you want, however the stylesheet supplied is only configured for the `.swatch` class. Using different classes would allow you to render groups of swatches at individual times by calling `swatchify()` on a different selector. 24 | 25 | Two strings of data need to be provided by the `div`: `data-name` and `data-colors`. The name must be a string representing the name of the swatch. The `data` string is a comma-seperate list of hex color codes. The list can be as long as you want, each color code will be used to create a portion of the swatch. 26 | 27 | You can also provide a `.swatch` element with an javascript array of colors in the `data-colors` attribute. For example: 28 | 29 | // assume
30 | var arr = ['#F35C9F','#F3F3F3']; 31 | var test = $('#test-swatch'); 32 | test.data('colors', arr); 33 | $('.swatch').swatchify(); 34 | 35 | ## Examples 36 | 37 | For more examples, check out [the examples website](http://maxmackie.github.io/jquery.swatches/) 38 | 39 | ## Contributing 40 | 41 | I'm open to any kind of contribution. If you don't have time to submit a pull request, open an issue for a new feature or enhancement and I'll get to it when I have time (or someone else will). 42 | 43 | ## License 44 | 45 | Swatches is released under the MIT license, which is included in the plugin itself. 46 | 47 | -------------------------------------------------------------------------------- /jquery.swatches.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.swatches.js 3 | * 4 | * Copyright (c) 2013 Max Mackie 5 | * 6 | * http://maxmackie.com/jquery.swatches 7 | * 8 | * Permission is hereby granted, free of charge, to any person 9 | * obtaining a copy of this software and associated documentation 10 | * files (the "Software"), to deal in the Software without 11 | * restriction, including without limitation the rights to use, copy, 12 | * modify, merge, publish, distribute, sublicense, and/or sell copies 13 | * of the Software, and to permit persons to whom the Software is 14 | * furnished to do so, subject to the following conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 21 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS 23 | * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 24 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 25 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 26 | * SOFTWARE. 27 | */ 28 | 29 | (function($) { 30 | // gimme some swatches! 31 | $.fn.swatchify = function() { 32 | return this.each(function() { 33 | var target = $(this); 34 | var name = target.data('name'); 35 | var colors = typeof target.data('colors') === 'string' ? target.data('colors').split(',') : target.data('colors'); 36 | var width = 100/colors.length + '%'; 37 | 38 | var infoContents = $('
', {class: 'shade'}); 39 | var holder = $('
', {class: 'holder'}); 40 | 41 | for (var i = 0; i < colors.length; i++) { 42 | infoContents.append( $('', {class: 'name'}).css('width', width).text(colors[i].toUpperCase()) ); 43 | holder.append( $('', {class: 'color'}).css({width: width, 'background-color': colors[i]}) ); 44 | } 45 | 46 | holder.append(infoContents); 47 | target.append(holder); 48 | 49 | target.append( $('
', {class: 'info'}).text(name) ); 50 | 51 | target.addClass('jqueryswatches'); 52 | }); 53 | }; 54 | 55 | // hover animation 56 | $(document).on('mouseenter', '.jqueryswatches .holder', function() { 57 | $(this).find('.shade').stop().animate({height: '27px'}, 200); 58 | $(this).find('.name').stop().animate({opacity: '1'}, 200); 59 | }) 60 | .on('mouseleave', '.jqueryswatches .holder', function() { 61 | $(this).find('.shade').stop().animate({height: '10px'}, 200); 62 | $(this).find('.name').stop().animate({opacity: '0'}, 200); 63 | }); 64 | 65 | }( jQuery )); 66 | --------------------------------------------------------------------------------