# PhotoCollage

[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/appleple/document-outliner/master/LICENSE)

A utility that changes the display method according to the aspect ratio and order of images when uploading multiple images at once.

## Development

This project uses [Vite](https://vite.dev/) and [pnpm](https://pnpm.io/) (requires Node.js >= 22.12). pnpm is managed via [Corepack](https://nodejs.org/api/corepack.html); run `corepack enable pnpm` once to activate the version pinned in `package.json`.

```bash
pnpm install      # install dependencies
pnpm dev          # start the dev server (demo: examples/index.html)
pnpm build        # build the library into dist/
pnpm typecheck    # type-check with tsc
pnpm lint         # run ESLint
```

The build outputs `dist/photo-collage.bundle.js` (UMD) and `dist/photo-collage.es.js` (ES module). The stylesheet used by the demo lives in `examples/photocollage.css` and is not part of the published package — copy it into your own project as needed.

## Installation

Install from npm:

```bash
npm install @appleple/photocollage
# or: pnpm add @appleple/photocollage
# or: yarn add @appleple/photocollage
```

Then import it as an ES module:

```js
import PhotoCollage from "@appleple/photocollage";

document.addEventListener("DOMContentLoaded", () => {
  new PhotoCollage(".js-photocollage");
});
```

## Usage
Include the PhotoCollage .js/.css file in your site.
```html
<script src="/path/to/js/photocollage.bundle.js"></script>
```
```html
<link rel="stylesheet" href="/path/to/css/photocollage.css">
```
photocollage.js
```js
document.addEventListener('DOMContentLoaded',function(){
    new PhotoCollage(".js-photocollage");
});
```

jquery-photocollage.js
```js
$(function(){
    $(".js-photocollage").PhotoCollage();
});
```

### Basic Standalone Usage
At the time of five vertically long sheets
```html
<div class="js-photocollage">
  <img src="example1.jpg" width="480" height="640">
  <img src="example2.jpg" width="480" height="640">
  <img src="example3.jpg" width="480" height="640">
  <img src="example4.jpg" width="480" height="640">
  <img src="example5.jpg" width="480" height="640">
</div>
<link rel="stylesheet" href="./css/photocollage.css">
<script src="./js/photocollage.bundle.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
  new PhotoCollage(".js-photocollage");
});
</script>
```

### Option

<table>
	<tr>
		<th>variable</th>
		<th>description</th>
		<th>default</th>
	</tr>
	<tr>
		<td>gap</td>
		<td>Spacing between images</td>
		<td>5px</td>
	</tr>
	<tr>
		<td>srcAttribute</td>
		<td>Image source</td>
		<td>src</td>
	</tr>
	<tr>
		<td>margin</td>
		<td>Album spacing</td>
		<td>0px 0px 10px 0px</td>
	</tr>
	<tr>
		<td>imgClass</td>
		<td>img tag class</td>
		<td>none</td>
	</tr>
	<tr>
		<td>aClass</td>
		<td>a tag class</td>
		<td>none</td>
	</tr>
	<tr>
		<td>aAttribute</td>
		<td>a tag attribute</td>
		<td>none</td>
	</tr>
</table>

#### Example
```js
document.addEventListener('DOMContentLoaded',function(){
  new PhotoCollage(".js-photocollage",{
    srcAttribute: "src",
    gap: "5px",
    margin:"0px 0px 20px 0px",
    aClass: "aExampleClass",
    imgClass:"imgExampleClass",
    aAttribute: {
      "data-example1" : "example1",
      "data-example2" : "example2",
    }
  });
});
```

#### When used in combination with SmartPhoto
```js
document.addEventListener('DOMContentLoaded',function(){
        const elements = document.getElementsByClassName('js-photocollage');
        Array.from(elements).forEach((element, index) => {
          element.classList.add('js-photoCollage-' + index)
          new PhotoCollage(".js-photoCollage-" + index,{
          aClass: "js-smartPhoto",
          aAttribute: {
            "data-group": "group-" + index,
            "data-rel": "group-" + index,
          }
        });
        });
        new SmartPhoto(".js-smartPhoto")
});
```