henrygd/bigpicture

Lightweight JavaScript image / video viewer. Supports Youtube, Vimeo, etc.

bigpicture's Issues

Transition animation for galleries

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!

Support for multiple video URL sources

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.

Feature request: onClose event listener option

Please add a onClose event listener option:

BigPicture({
	el: e.target,
	onClose : function() {
		console.log('Lightbox closed')
	},
})

Feature request: Zoom on mouse wheel

Ability to Zoom images on mouse wheel like google drive

Feature request: Option to pass controlslist value to HTML Video

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.

Feature request - support for iframes with variable height

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:

1. Resizing is a problem... even if I add code to resize, I'll be fighting with BP because it's also resizing. Perhaps BP could support a resize callback?
2. It would be better to apply the load callback to the iframe immediately when the its created so I don't miss the event
3. I'm accessing #bp_sv directly, which is not documented

I'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.

Customized animation

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.

Feature request: Support custom HTML element type

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"
})

Feature request. Make use of youtube nocookie domain.

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.

Separate style and script

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?

Alert question

If the image does not exist, it will display alert. I hope I can remove the alert. Can I do it?

Feature request: onLoaded option

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

Loading bigpicture via Dynamic Import with Webpack

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',
      });
    }
  });
});

Feature request: Option for limiting the maximal width

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?

open content on click event from js on demand

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

Feature request: Publish 2.6.0 to npm

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.

Make onError option works for all media types

I noticed the onError event listener option does not work for iframe, youtube...

When initiating with Array, can't pass initial position other than 0

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.

just wanna say Thank You!

the DEMO look awesome! exactly what I need for my next project

Thank you so much!
(you can close this issue)

The example site refuses to connect

FYI the example site at https://henrygd.me/bigpicture refuses to connect.

allow for playsinline for ios users

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!

dimensions not working for <video>

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.

Es6 modules

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.

Provide build for npm

Please

Feature request. support for responsive images by using srcset attribute

img/1-200.jpg 220w, img/1-800.jpg 820w

Youtube autoplay on desktop chrome

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/

Destroy BigPicture

Hey,

thanks for this lightweight simple image modal plugin 👍
Is there any way to close the current open image and remove all memory allocations?

Loop

Hi, how can I do loop for gallery?
Thanks for nice script :)

Attribute caption not allowed on element img at this point

For SEO Friendly website and following w3 standard can you make it data-caption

Hide scrollbar

Hi,

Is it possible to hide the scrollbars when bigpicture is open?

Thanks.

Add controls for printing and saving

Add the capability of printing pictures by adding an icon for print and saving videos and pictures by adding a button.

Feature request: add swipe support

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!!!

Content Security Error - refused to evaluate string

Hey @henrygd

we are testing bigpicture together with Content Security Policy (CSP)

Unfortunately CSP refuses to execute this line:

bigpicture/index.js

Lines 656 to 657 in 68cc922

	// set animationEnd callback to run after animation ends (cleared if container closed)
	animationEnd = setTimeout(animationEnd, 410);

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?

Not work multiple (

<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
	  	============================================== */

Provide overview of the next slides

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?

Iframe

Hi,
is possible to open an iframe? Or html div?

Thanks you

Callback when video has loaded

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.

Feature request: support pinch zoom in/out

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.

Full screen button on Vimeo player not working when browser is full screen

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?

can support audio file?

[how to] instantiate BigPicture for Nodelists [array of img nodes]

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

1. can the same img tags be triggers other than thumbnail buttons or similar
2. how to instantiate for a group of images

Aspect Ratio seems not working correnctly with iframe. Black bars in Vimeo video.

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.

Any plans to add support for videos in gallery?

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.

Separate scripts for video demos

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..

Feature request? Can I programmatically close the lightbox?

Can I close it from code?

Image fails to open when targeting a class

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?

Gallery

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?

Add support for start time for YouTube videos

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

Feature request: optional params Youtube

Ability to add/remove params for example enablejsapi

https://developers.google.com/youtube/player_parameters#Parameters

Feature request: Ability to make a gallery mixing videos images and iframes...

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,
})