動きも可愛いカラーパレット

こんにちは、スウェルデザインのWです。

今日は、jQueryプラグイン「Colorselector」を紹介します。

・こちらから色指定ができること

・色の追加が可能なこと

・サイズやレイアウトの変更が可能なこと

主にこの3つの要素がこの機能の良い点です。

まずはこちらからファイルをダウンロード↓

github.com

デモ画面を使って説明していきます。

実際に使う時はjsファイルを追加してhtmlを埋め込んでください。

デモ画面です↓

赤茶の部分をクリックしてみると・・・↓

パラパラパラと他の色も出てきました。

因みに上はミニサイズです、両方クリックしました。

このままだと色が暗すぎるのでカスタマイズしていきましょう。

index.htmlの23行目

<script type="text/javascript">
jQuery(document).ready(function($){
$("#small-selector").colorbox({
labels: [
'Black', 'Brown', 'Cardinal', 'Columbia', 'DkGreen', 'Gold', 'Gray', 
'Kelly', 'Maroon', 'Navy', 'Orange', 'Pink', 'Purple', 'Red', 'Royal', 'White'
],
colors: [
'000000', '502800', '500000', '1F2264', '003200', '646400', '4B4B4B', '005000', 
'320000', '000032', '643C00', '642864', '330032', '640000', '000064', 'fdfdfd'
],
</script>

こんな感じで変更！↓

<script type="text/javascript">
jQuery(document).ready(function($){
$("#small-selector").colorbox({
labels: [
'blue', 'purple', 'skyblue', 'mint', 'green', 'yellow', 'orange', 
'salmon', 'led', 'pink'
],
colors: [
'5484ED', 'A4BDFC', '46D6DB', '7AE7BF', '51B749', 'FBD75B', 'FFB878',
'FF887C','DC2127', 'DBADFF'
],
</script>

この部分のcolorsでカラーコードを変更・追加・削除します。 labelsの部分は名前なので解りやすくしておけば問題無いです。

そしてこんなに可愛くなりました～ 横一列にレインボーカラーで並べてみました

CSSも変更すればサイズも変えられます。

perLine: 10,
</script>

また、scriptタグ内のこの部分の数字を変えることで 横にいくつ並べるか決めることができます。

試してみてください。