henrygd / bigpicture Goto Github PK
View Code? Open in Web Editor NEWLightweight JavaScript image / video viewer. Supports Youtube, Vimeo, etc.
Home Page: https://henrygd.me/bigpicture
License: MIT License
Lightweight JavaScript image / video viewer. Supports Youtube, Vimeo, etc.
Home Page: https://henrygd.me/bigpicture
License: MIT License
Thank you for this awesome lightbox.
Given the attention that has been given to the initial transition, it's almost puzzling to the user that there's no transition between two images of the gallery (like the one in baguetteBox for instance).
It would be a real plus!
mp4
doesn't want to play in Edge and IE11, but webm
is supported.
I would like to suggest allowing the vidSrc
parameter to accept an array. If an array is used, then multiple <source>
can be used instead of a single src
attribute.
Please add a onClose event listener option:
BigPicture({
el: e.target,
onClose : function() {
console.log('Lightbox closed')
},
})
Ability to Zoom images on mouse wheel like google drive
It would be best if we have an option that we can pass to the controllist
of the HTML video tag. The use case for me is to disable the download option controlslist="nodownload"
.
If the feature already exists, I might have missed it. can you please point it out?
Thanks for the awesome library.
I would like to set the height of an iframe to be something other than the aspect ratio calculated from the width/height of the dimension array in the options. Is this possible?
Scenario: I have an iframe embed that renders a media player along with some text, so the height of the embed can vary. I want to use as much of the window as I can to render the iframe.
Here's what I'm doing to accomplish this at the moment (using jquery):
BigPicture({
el: $(elem).get(0),
iframeSrc: 'iframe.html',
animationStart: function () {
var wrap = $('#bp_sv'),
iframe = $('>iframe', wrap);
$(iframe).on('load', function () {
var maxHeight = $(window).height() - 50,
native = $(this).get(0)
height = Math.min(native.contentWindow.document.body.scrollHeight + 30, maxHeight);
$(wrap).css({
height: height + 'px'
});
});
}
});
A couple issues:
load callback
to the iframe immediately when the its created so I don't miss the eventI'm guessing the easiest thing to do would be to add a height option for an iframe, like:
iframeHeight: 'auto' | 'content' | callback
Then, the auto
option would be the way it works now. The content
option is more or less the code I have above (I'm sure it could be more robust), and a callback would allow the app to return a height.
Another nice feature that we could implement would be custom animation.
Basically, people would be able to choose which animation they want to see when they click on the image. Currently, we've got sort of fade in, maybe someone wants to have something different.
It will be awesome if I can show a custom text message for not previewable file types like Google drive:
So a new option "customElement" could be added:
var element = $("<div id="unpreviewable">Unable to preview this item</div>");
BigPicture({
el: e.target,
customElement: element
})
or by id:
BigPicture({
el: e.target,
customElement: "unpreviewable"
})
YouTube embedded videos set up cookies without user's consent in the browser. This is violation of ePrivacy Regulation.
Proposal to make an option using of youtube-nocookie.com domain instead.
Hello,
I love your plugin but I actually can't use it because it's impossible to adapt the design to match my website. I guess I'm not the only one as every website is different...
To make this plugin universal it should be a priority to separate the style from the script. You could do it easily by using SCSS with a bunch of default variables that can be override.
What do you think about the idea?
If the image does not exist, it will display alert. I hope I can remove the alert. Can I do it?
Please add an onLoaded option.
I need this to detect if the iframe initialized a download popup, in which case, the onLoaded option allow me to detect if data appear in iframe; and thus, I can close BigPicture
This is possibly some of the oddest shit I've seen.
For some when trying to load bigpicture with a dynamic import, it doesn't let the styles in my entry point be applied to the elements on page.
The styles in my entry point have no problem being bundled to a .css
file, no ES Lint errors or problems bundling.
I can see the file loaded perfectly fine. Inspecting the css file my styles for elements are present. The selectors for a specific element are there, the browser has loaded the file ok.
But the styles just do not get applied.
In addition, I found that commenting out a collection of .scss
file imports above made it work, almost like there was a limit.
This doesn't happen with any other library I have tried yet.
const getBigPicture = () => import('bigpicture');
const link = document.querySelector('.link');
link.addEventListener('click', (e) => {
e.preventDefault();
getBigPicture().then((module) => {
if (typeof module.default === 'function') {
const BigPicture = module.default;
console.log(BigPicture);
BigPicture({
el: link,
ytSrc: '8ktONdU_wXU',
});
}
});
});
I tried to use: https://codepen.io/nnico/pen/MWWjqJo
#bp_sv {
width: 96vw !important;
max-width: 500px !important;
}
but is messes things up. Any idea or maybe a option of I limit the maximal width of the lightbox?
hello
first i want to thank u for the great plugin
I have a need to assign dynamic created divs to preview video and image
and i can create divs as follow
<div id="vid1" filesrc="files/vid2.mp4" onclick="previewfile(this); />
<div id="vid2" filesrc="files/vid2.mp4" onclick="previewfile(this); />
<script>
function previewfile(e){
myvidSrc=e.getAttribute('filesrc')
//code to open bigpicture directly without initialization
//.......
}
</script>
due to heavy ajax usage I cannot use the initialize constructure on dynamic created div
therefore would it be possible to open the preview from such external function
Currently it looks like the 2.5.3 is the latest release published on npm, but commits on this repo indicate that 2.6.0 should be published to npm.
I noticed the onError event listener option does not work for iframe, youtube...
If, for whatever reasons[1], you try to initiate the gallery with Array
of elements, this line of makeGallery
automatically sets the position to 0
, and there's no way to set it to any other position. I'd like to propose (I'll PR this, even) to add an optional position
argument, which would apply here.
So you could do this:
BigPicture({
el: this,
position: someValueIGot,
gallery: galleryElements
})
This would be useful in use cases where you get the elements/nodes in other way than from DOM.
Also, thank you for making this 🎉.
[1]: In my case, I've tried to pair this with Stimulus by Basecamp, which probably returns an array of Nodes
instead of NodeList
. When I've modified it transform the elements to array
for BigPicture , I was still not able to force the gallery position.
the DEMO look awesome! exactly what I need for my next project
Thank you so much!
(you can close this issue)
FYI the example site at https://henrygd.me/bigpicture refuses to connect.
Very nice library, thanks!
You might know that as part of Apple's general program to destroy the open internet, they disallowed "inline" HTML5 video playing for a long time.
They have recently opened things up a bit:
https://webkit.org/blog/6784/new-video-policies-for-ios/
So if you declare a video tag like
<video playsinline src = "whatever.mp4">
Then iOS browsers will actually honor this and play the video inline, instead of full screen.
I think ideally, if possible, bigpicture should support this.
I tried modifying this line
displayVideo.controlsList = "nodownload noremoteplayback nofullscreen playsinline";
But for some reason it doesn't work. It might be because controlsList
is actually only for chrome.
Any suggestions on a tweak to get bigpicture to play videos inline on iOS?
thanks!
See: https://codepen.io/nnico/pen/QWyERbw
I can simply set the dimensions on the created <video>
in animationStart
and that seems to work fine. Not sure if that is the best way to do it but I think it should be part of the script.
Because aspect ratio and height work automatically for <video>
I think only width is needed.
I think it would be good split de js file into es6 modules. Es6 modules are more easy to test, change and fix. For example, we can create a module that has a function responsible for create elements and than import it into main file.
Please
img/1-200.jpg 220w, img/1-800.jpg 820w
First, thanks for a nice library, much appreciated. It appears that youtube videos now require two clicks to play on a desktop browser. I know mobile safari prohibits this, but it was working previously on the desktop with chrome: click once, bigpicture launches and the video begins playing. I'm using
class="vid iframevid"
iframesrc="https://www.youtube.com/embed/{id-here}?html5=1&rel=0&playsinline=1&autoplay=1&modestbranding=1"
The youtube example in your documentation also requires two clicks to play, once to launch the bigpicture modal and a second to start the youtube video. Vimeo works with one click. That makes me think there's an issue here. As a reference, fancybox does autoplay, so it's not a change in chrome or youtube. Example here: https://fancyapps.com/fancybox/3/
Hey,
thanks for this lightweight simple image modal plugin 👍
Is there any way to close the current open image and remove all memory allocations?
Hi, how can I do loop for gallery?
Thanks for nice script :)
For SEO Friendly website and following w3 standard can you make it data-caption
Hi,
Is it possible to hide the scrollbars when bigpicture is open?
Thanks.
Add the capability of printing pictures by adding an icon for print and saving videos and pictures by adding a button.
It would be great to support basic swipe events:
swipe up/down - close
swipe left - next slide
swipe right - previous slide
This is a great library... love the simplicity. Thank you!!!
Hey @henrygd
we are testing bigpicture together with Content Security Policy (CSP)
Unfortunately CSP refuses to execute this line:
Lines 656 to 657 in 68cc922
The reason is that animationEnd
is undefined
.
Would it be possible to wrap this call with an if
or to set animationEnd
to a noop function?
<a href="#!" class="weight_bold main_page_link_ogange js_lightbox" ytsrc="vsypFJ5mNw0" data-caption="Демо-кабинет">Посмотрите пример</a>
<a href="#!" class="main_page_link_ogange d_none d_xs_block weight_bold main_page_small_txt js_lightbox" ytsrc="p96y6FiD7sU" data-caption="Демо-кабинет">
Все изменения по вашему делу вы увидите в Личном кабинете
</a>
<a href="#!" class="weight_bold main_page_link_ogange js_lightbox" ytsrc="vsypFJ5mNw0" data-caption="Демо-кабинет">Посмотрите пример</a>
/* ==============================================
Name function
============================================== */
if(document.querySelector('.js_lightbox')) {
document.querySelector('.js_lightbox').addEventListener('click', function (e) {
e.preventDefault();
var className = e.target.className
if (~className.indexOf('js_lightbox')) {
BigPicture({
el: e.target,
ytSrc: e.target.getAttribute('ytSrc'),
});
}
});
};
/* ==============================================
End of Name function
============================================== */
I've been thinking, when you one of the images from the gallery, we've got left and right arrow to use only. What if we add the possibility to have thumbnails on the bottom of the page?
I'd like to contribute and develop it. What do you think?
Hi,
is possible to open an iframe? Or html div?
Thanks you
I'm trying to display my own loading indicator while BigPicture is loading an embedded video. To do this I'd like to be able to define a callback which is called when BigPicture displays the viewer (i.e. the embed has finished loading). This could either be a simple callback or a promise.
Ideally I'd also like an option to disable the built in loading spinner.
Seems like I should be able to natively pinch zoom in/out when viewing an image on a mobile device when my viewport setting doesn't prevent it, as so:
<meta name="viewport" content="width=device-width, initial-scale=1">
However, when showing an image, I cannot zoom in/out.
I noticed that when the browser (Chrome) is full screen, the button to activate the video to go full screen on the Vimeo embed doesn't work.
can support audio file?
hello,
i am not mentioning a bug but want to know how to use
i don't know how to instatiate BigPicture for series of images in a container like
<section id="bigPicture">
<img src="http://oi49.tinypic.com/2wd63h1.jpg" alt="">
<img src="http://oi40.tinypic.com/awvrdx.jpg" alt="">
<img src="http://oi43.tinypic.com/2lke6ug.jpg" alt="">
</section>
javascript
var images = document.querySelectorAll('bigPicture img');
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
forEach(images, function(ind, el){
BigPicture({
'el': el
});
});
questions
See: https://codepen.io/nnico/pen/OJJRzyL
I am trying to use it for a Vimeo Video with a very wide Aspect Ratio and it creates black bars.
I saw in the source that you at some point take the dimensions of the element specified and that you set the css to positon: absolute;
but I could not figure out how the aspect ratio it kept. No position: relative
?
I would rather like to just pass a string of HTML to be used for wrappers I have prepared with the padding-top
element as sibling where the + position: absolute
iframe
is.
Hi, are there any plans to add support for videos in gallery? I created a rough solution which seems to work OK, but it doesn't preload videos like it does with images. I basically check if the object in the gallery has .src or .vidSrc to determine if it's video or image.
He mate,
i love the script.
but how i add to a Html, Youtube, Vimeo video on a button click????
i trying and final result showing repeated - Error: The requested image could not be loaded.
why this message showing when i trying to get video on popup window???
i guess i miss something but didn't get the actual issue....
Please help with a little but separate code for lightbox video player?? any feedback would be great..
Can I close it from code?
I am trying to target only images with a specific class using the following code. Unfortunately, the image does not open nor is there any console error.
(function() {
function setClickHandler(id, fn) {
document.getElementById(id).onclick = fn;
}
setClickHandler('mybook', function(e) {
(e.target.className === 'thumb') && BigPicture({
el: e.target,
imgSrc: e.target.src.replace('thumbs', 'slides')
});
});
})();
If I use this code, it works as expected.
(function() {
function setClickHandler(id, fn) {
document.getElementById(id).onclick = fn;
}
setClickHandler('mybook', function(e) {
e.target.tagName === 'IMG' && BigPicture({
el: e.target,
imgSrc: e.target.src.replace('thumbs', 'slides')
});
});
})();
AmI missing something when targeting an image with a class rather than all images?
Is it possible to do a gallery with bigpicture?
THis comp is awasome, but im trying to do a lightbox gallery with an array of local images.
Can your lib do this?
in YouTube videos, you can specify the start time with a t=<time>
param, e.g. t=60
. It would be great if this can be supported
Ability to add/remove params for example enablejsapi
https://developers.google.com/youtube/player_parameters#Parameters
A very nice feature will be the ability to make a gallery mixing various media type (videos, images, pdf and iframes) like Google drive
Something like:
var items= [];
items.push({
vidSrc: 'https://yourvideo.mp4',
caption: 'video caption'
});
items.push({
ytSrc: 'z_PeaHVcohg',
});
items.push({
vimeoSrc: '119287310',
});
items.push({
iframeSrc: 'https://youriframe/my-file.pdf',
});
items.push({
audio: 'https://youraudio.mp3',
caption: 'audio caption'
});
items.push({
imgSrc: 'https://yourimage.jpg',
caption: 'image caption'
})
BigPicture({
el: e.target,
gallery: items,
// optionally specify a starting index
position: 2,
})
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.