jirihybek / wa-mediabox Goto Github PK
View Code? Open in Web Editor NEWModern lightbox without jQuery and with iframe support.
License: MIT License
Modern lightbox without jQuery and with iframe support.
License: MIT License
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)
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
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?
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?
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
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?
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 ;-)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.