jirihybek / wa-mediabox Goto Github PK

Currently this project is only useable by downloading and saving the files in a local project. It would be easier if it was published on npmjs, so it can be used in a package.json.

https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages

Hi!

first of all: thank you very much for this beautiful, nice library! Works really fine and easy!

In a new project I import wa-mediabox via webpack and would like to instantiate it the js-way:

import WAMediaBox from 'wa-mediabox'

// --- Enable WAMediaBox
const _enableLightBox = () => {
  WAMediaBox.bindAll(document.getElementsByTagName('img'))
}

// --- Init app
window.addEventListener('DOMContentLoaded', () => {
   _enableLightBox()
}

Webpack claims that subpage.js:129 Uncaught TypeError: wa_mediabox__WEBPACK_IMPORTED_MODULE_16___default.a.bindAll is not a function at _enableLightBox

Any idea why this happens?

Hi.

Pressing and holding the right arrow should lead the carousel to the last slide. Most of the times it's not showing the last one, but another one and it is still removing the controls to go to the right. When I go slowly through the images, it works correct.

Any idea?

In your CSS you use for the 'preview' and 'next' button opacity to hide them, but it does not realy hide the button. If you use 'display: none' instead you realy hide the button.

I hope that is the right way to send you this advice, because this is my first post on GitHub.

PS: you did really create a nice ligthbox ;-)

On mobile, when going from portrait to landscape the mediabox changes size to match the view (as it should) but the content does not.

(only tried this with an embedded youtube video)

if (this.current != -1) {
	if (this.mediaList[this.current].type == "iframe") {
		mediaEl = document.createElement("iframe");
		mediaEl.src = this.mediaList[this.current].src;
		mediaEl.setAttribute("width", parseInt(this.frame.style.width));
		mediaEl.setAttribute("height", parseInt(this.frame.style.height) - (this.mediaList[this.current].title ? 52 : 0));
		mediaEl.setAttribute("frameborder", "0");
		mediaEl.setAttribute("allowfullscreen", "allowfullscreen");
		this.container.innerHTML = mediaEl.outerHTML;
	}
}

Just add 341 line in WAMediaBox_Gallery.prototype.resizeContainer

How can I start with something like this:

<a href="/pic"><img src="desktop.png" title="Desktop" /></a>

And then using JavaScript I change it to say, iPhone:

<a href="/pic"><img src="iphone.png" title="iPhone" /></a>

When I do this it is always the original desktop.png that is shown when clicking. I have tried resetting _waMediaBoxBound and then rebinding the image using window.WAMediaBox.bind(image) but I think the original value is being persisted in WAMediaBox_Gallery.mediaList. Can this be cleared?