zaikio / chromatic.js Goto Github PK

line #1179: console.log(viewport_width, _scrollbar_width());

In line number 1370 in chromatic.js there is a reference to the global variable photos.

It would be very nice if the plugin could calculate the aspect_ratio for the images when the are loaded the first time.

Hi!

I noticed that if you put large margins on images (say 30px), layouting engine produces not optimal layout:

• if you use background-size: cover, images are cropped
• if you use background-size: contain, images may have bigger margins

I know it's because large margins affect original aspect ratios, so final image area has slightly different aspect ratio.

My question: Is it possible to change algorithm to do perfect layout with large margins?

I would super cool if the gallery could build in a container with fixed width and fluid height. The result could look something like this:
http://test.co3.dk/damngood/chromatic/example4.html

This looks a lot more convincing if you want to use the gallery as a part of a page edited from a cms. The only time i want vertical scroll is when the gallery is viewed in full screen.

Hi!

Please tell me what can be caused by the chromatic has problems with scaling resolutions window between 440px and 666 px.

Watching Chrome dev console while resizing the window after visiting http://www.chromatic.io/FQrLQsb gives multiple JS errors:

(anonymous) @ application.178626a….js:735
(anonymous) @ application.178626a….js:736
Chromatic.GalleryView.GalleryView.layout @ application.178626a….js:755
(anonymous) @ application.178626a….js:750
(anonymous) @ application.178626a….js:756
l @ application.178626a….js:744
application.178626a….js:735 Uncaught TypeError: Cannot read property '0' of undefined
    at application.178626a….js:735
    at application.178626a….js:736
    at GalleryView.Chromatic.GalleryView.GalleryView.layout (application.178626a….js:755)
    at GalleryView.layout (application.178626a….js:750)
    at application.178626a….js:756
    at l (application.178626a….js:744)

When clicking the empty space around the zoomed view the image closes normally but then page up/down and home/end keys don't work - at least unless one clicks the tiny gaps between the photos or the scroll bar which restores window focus.

Closing the zoom view with Esc key OTOH doesn't produce this effect.

Can you fix or suggest a workaround?

It would be very nice if the plugin provided custom events for all actions. I like the way bootstrap handles this: http://getbootstrap.com/javascript/#js-events

It would be nice if there was an option to add a caption element to .chromatic-zoom-photo

The scrollbar width should not be added to the gallery container width, unless it actually has a scrollbar, eg. overflow prop set to any value except hidden.

Try resizing this page:
http://test.co3.dk/damngood/chromatic/example4.html

Calculations are based on marginLeft and marginTop which will return wrong values when styling is changed.