Giter VIP home page Giter VIP logo

photo-gallery's Introduction

Published on webcomponents.org

<photo-gallery>

A photo gallery element based on Polymer

Example

<photo-gallery height='120'>
  <div class='item' data-url='https://images.unsplash.com/photo-1500487003906-9baadc8d610d?auto=compress,format&fit=crop&w=334&h=&q=80&aspect-ratio=0.67'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1483653085484-eb63c9f02547?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.50'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1499958919714-e10d2741a387?auto=compress,format&fit=crop&w=334&h=&q=80&aspect-ratio=0.67'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1503263892381-7f7fd5e5ec15?auto=compress,format&fit=crop&w=376&h=&q=80&aspect-ratio=0.75'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1429554429301-1c7d5ae2d42e?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.50'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1501422955948-a75c84b11ecf?auto=compress,format&fit=crop&w=752&h=&q=80&aspect-ratio=1.50'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1455796653466-32048b2b780e?auto=compress,format&fit=crop&w=749&h=&q=80&aspect-ratio=1.50'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1463414689943-2aca18b2242b?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.78'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1428976365951-b70e0fa5c551?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.50'></div>
  <div class='item' data-url='https://images.unsplash.com/photo-1500284306430-8f3cad668bb2?auto=compress,format&fit=crop&w=750&h=&q=80&aspect-ratio=1.50'></div>
</photo-gallery>

Installation

$ bower install --save supachailllpay/photo-gallery

Properties

  • height (number) - The height (px) of each item, default is 240

  • selected (number) - The index of current item, default is -1

Methods

  • open() - Enter to full screen, event target must be descendant of item

  • close() - Exit from full screen

License

MIT

photo-gallery's People

Contributors

alejost848 avatar fooloomanzoo avatar supachailllpay avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

fooloomanzoo hectorsantillan maritzstl alejost848 hzmsrv vectors-project valyrie97

photo-gallery's Issues

Component doesn't work with dom-repeat

I'm trying to use dom repeat inside of photo-gallery component like this

<photo-gallery height="120">
                
                <template is="dom-repeat" items="{{images}}">
                    <div class='item' data-url='[[item.src]]'></div>
                </template>
               
</photo-gallery>

But doesn´t work :(

hero-animation: toPage is undefined!

Your gallery is exactly what I want, but when click on grid image I get black page with navigation and error:
hero-animation: toPage is undefined!

Please help!

IOS Support

This is a very nice gallery, but doesn't currently work on IOS.
Any plans to get it working on IOS soon?

Add keyboard support

It would be great to have keyboard support when viewing the images to cycle through them using the arrow keys. It could use the iron-a11y-keys element and make a call to the previous() and next() functions on every left/right arrow press.

I can make a pull request if this functionality is desired.

Some images are not being displayed in the gallery

I'm experiencing a weird problem with a few images that are not being displayed, like this one. They don't show up in the gallery, but when you open them in the viewer they do appear.

I started debugging the code and found the line where the image is set.

item.style.backgroundImage = `url(${url})`

It turns out that if you add quotes around the url variable, the problem is gone and the images display correctly. Like this:

item.style.backgroundImage = `url("${url}")`

Do you know why this happens? Is it safe to create a pull request to address this?

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.