Using this component

Script Tag

• Place this script tag, <script src='https://unpkg.com/@themindleproject/img-gallery@latest/dist/img-gallery.js'></script> ,in the head of your index.html

• Then you can use it anywhere as any other normal html element. See usage example section below.

Node Modules

• Run npm install @themindleproject/img-gallery --save in your terminal.

• Place a script tag similar to this, <script src='node_modules/@themindleproject/img-gallery/dist/img-gallery.js'></script> ,in the head of your index.html

• Alternatively, for stencil,react etc add this import, import @themindleproject/img-gallery

• Then you can use it anywhere as any other normal html element. See usage example section below.

Usage Example

1. Place your images as direct children of the component. It is important that the images are direct children. Do not place them in a container such as a div or section etc.

   < img-gallery >      < img src = "example1.jpg" >      < img src = "example2.jpg" >      < img src = "example3.jpg" >      < img src = "example4.jpg" >      < img src = "example5.jpg" > </ img-gallery >

2. Feed an array of image source urls to the src property. Please note that this is for use within frameworks such as Angular, Ionic Framework, Stencil, React etc.

   In your .ts file

   URLArray: Array<string> = [ 'example1.jpg' , 'example2.jpg' , 'example2.jpg' , 'example2.jpg' ];

   In your .html file

   < img-gallery src={URLArray}></ img-gallery >

   Or in your tsx file

   URLArray: Array< string > = ['example1.jpg','example2.jpg','example2.jpg','example2.jpg'];   render() {      return(          < div >              < img-gallery src={this.URLArray}></ img-gallery >          </ div >      ) };

Component Properties

Image Gallery Component only takes two optional properties.

1. src property discussed above.

2. color property.

   This is the background color of the Gallery. If not supplied the Gallery will inherit the background color of the page,div or section that it is placed in. It can either be a valid css color name or a valid css hex color code.

   < img-gallery color = "black" >      ... </ img-gallery >   <!-- or -->   < img-gallery color = "#000" >      ... </ img-gallery >