https://github.com/appleple/photocollage
https://github.com/appleple/photocollage
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/appleple/photocollage
- Owner: appleple
- License: mit
- Created: 2021-12-27T05:31:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-11T04:41:02.000Z (over 4 years ago)
- Last Synced: 2025-02-26T19:39:12.577Z (over 1 year ago)
- Language: HTML
- Size: 204 KB
- Stars: 2
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PhotoCollage
[](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.
## Usage
Include the PhotoCollage .js/.css file in your site.
```html
```
```html
```
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
document.addEventListener('DOMContentLoaded',function(){
new PhotoCollage(".js-photocollage");
});
```
### Option
variable
description
default
gap
Spacing between images
5px
srcAttribute
Image source
src
margin
Album spacing
0px 0px 10px 0px
imgClass
img tag class
none
aClass
a tag class
none
aAttribute
a tag attribute
none
#### 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")
});
```