https://github.com/carry0987/imgcheckbox-js

Seamlessly transform your images into interactive checkboxes with ImgCheckBox, a versatile and easy-to-use JavaScript library designed to enhance user interfaces by introducing customizable image-based selection functionality.
https://github.com/carry0987/imgcheckbox-js

checkbox imgcheckbox typescript

Last synced: 12 days ago
JSON representation

Seamlessly transform your images into interactive checkboxes with ImgCheckBox, a versatile and easy-to-use JavaScript library designed to enhance user interfaces by introducing customizable image-based selection functionality.

• Host: GitHub
• URL: https://github.com/carry0987/imgcheckbox-js
• Owner: carry0987
• License: mit
• Created: 2023-10-14T12:12:28.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-10-20T07:33:18.000Z (2 months ago)
• Last Synced: 2024-11-20T16:50:49.725Z (about 1 month ago)
• Topics: checkbox, imgcheckbox, typescript
• Language: TypeScript
• Homepage: https://carry0987.github.io/ImgCheckBox-JS/
• Size: 482 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ImgCheckBox-JS

[![version](https://img.shields.io/npm/v/@carry0987/imgcheckbox.svg)](https://www.npmjs.com/package/@carry0987/imgcheckbox)

![CI](https://github.com/carry0987/ImgCheckBox-JS/actions/workflows/ci.yml/badge.svg)  

Seamlessly transform your images into interactive checkboxes with **ImgCheckBox**, a versatile and easy-to-use JavaScript library designed to enhance user interfaces by introducing customizable image-based selection functionality.

## Description

**ImgCheckBox** is a modern, lightweight, and versatile JavaScript library for transforming regular image elements into clickable checkboxes. Wrapped in an intuitive API, it offers a range of customizable options to create a unique and interactive user experience. Whether you're implementing image selection features or looking for a creative way to handle user inputs, **ImgCheckBox** seamlessly integrates with your projects, elevating web interfaces with minimal effort.

## Installation

```bash

pnpm i @carry0987/imgcheckbox

```

## Usage

Here is a simple example of how to use **ImgCheckBox** in your project.

#### UMD

```html



    


        


            

        

        


            

        

        


            

        

    



document.addEventListener('DOMContentLoaded', () => {

    const imgCheckBox = new imgCheckBoxjs.ImgCheckBox('#imgList img', {

        graySelected: false,

        scaleSelected: true,

        checkMarkPosition: 'center',

        checkMarkSize: '50px',

        styles: {

            'span.imgCheckbox img': { 'border-radius': '0px' },

            '.image-box .image-layer ~ .imgChked': { 'background-color': 'transparent' }

        },

        preselect: [0, 2],

    });

    imgCheckBox.on('change', (el, checked) => {

        console.log(el);

    });

});

```

#### ES6

```ts

import { ImgCheckBox } from '@carry0987/imgcheckbox';

document.addEventListener('DOMContentLoaded', () => {

    const imgCheckBox = new ImgCheckBox('#imgList img', {

        //...

    });

    imgCheckBox.on('change', (el, checked) => {

        console.log(el);

    });

});

```