https://github.com/ptgamr/google-image-layout

A library help you to build Google like Image Gallery
https://github.com/ptgamr/google-image-layout

css gallery google-images image-gallery

Last synced: 18 days ago
JSON representation

A library help you to build Google like Image Gallery

• Host: GitHub
• URL: https://github.com/ptgamr/google-image-layout
• Owner: ptgamr
• Created: 2014-09-08T12:21:23.000Z (about 10 years ago)
• Default Branch: gh-pages
• Last Pushed: 2017-01-26T02:00:01.000Z (almost 8 years ago)
• Last Synced: 2024-10-11T00:49:58.895Z (about 1 month ago)
• Topics: css, gallery, google-images, image-gallery
• Language: CSS
• Size: 35.2 KB
• Stars: 74
• Watchers: 4
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
'google-image-layout

===================

A library help you to build Google like Image Gallery. Vanilla Javascript

DEMO [http://ptgamr.github.io/google-image-layout/](http://ptgamr.github.io/google-image-layout/)

TUTORIAL [http://trinhtrunganh.com/2014/09/12/google-image-layout.html](http://trinhtrunganh.com/2014/09/12/google-image-layout.html)

Documentation

=============

### Init via Data Attribute

very simple, add your markdown as bellow

```html



	

	

	

	

	...



```


####data-max-height (default 120)

The maximum height of images in the gallery

### API

####.align(element)

`element` the gallery container which contains images

***Important Notice

===================

Thís plugin requires the image's `width` and `height` have to be known in prior to initialization. If you already have that information, put `data-width` & `data-height` to your image tags.

Otherwise, please consider using [imagesLoaded](https://github.com/desandro/imagesloaded) to load the images first

```javascript

var imgLoad = imagesLoaded( document.querySelector('body') );

imgLoad.on( 'progress', function( instance, image ) {

  image.img.setAttribute('data-width', image.img.offsetWidth);

  image.img.setAttribute('data-height', image.img.offsetHeight);

});

imgLoad.on( 'done', function( instance ) {

  GoogleImageLayout.init();

});

```

Todo List

=========

- Responsive support

- Append images (for infinite scrolling, loadmore button)

- More configuration options

## License

MIT license