loc4lho5t
commented
3 years ago Here is something I coded a while ago, it still works on my private wordpress site.
Whats needed? Define a base dir for your galleries www/content/uploads/galleries for example In galleries you can create folders which will be identical to the name of the page where you will put the gallery into. In My Case: galleries ->2017 ->2018 ->2019 Each folder includes multiple folders with videos and images galleries ->2017 -->Bali -->NYC -->and so on
What does it do? The script scans through the folders and creates thumbnails. For videos it will just create an orange thumbnail with black text saying VIDEO. Afterwards it builds html code for the gallery to be shown.
Pagename: 2017 Ablums shown: Bali, NYC, ... Each album contains jpg and mp4 files
Coded this kinda dirty last year, but maybe it will help you in one way or another.
I have some code which dynamically adds images to my gallery and works well (see CodePen details below). My purpose in adding items dynamically was to save server bandwidth, so when my gallery initializes the server only returns 10 images. There's a "Load more" button which, when clicked, makes an Ajax request to the server for the next 10 images and, when they're received, the Javascript adds the new items to the gallery. I considered using the built-in pagination function, which would have been nice, but it requires returning all of the images when the gallery is initialized, and there could be thousands (eventually!) so that would be slow.
Anyway, I now need my gallery to display both images and videos. Unfortunately, the code I'm using doesn't work for the videos. The issue is that for videos added dynamically, although the thumbnails for the videos display correctly in the gallery, when I open them in the lightbox I just see the loader and the video is never displayed. Examining the rendered markup I see that an
<img>tag is being rendered and not a<video>tag. Note that the videos work just fine if they're amongst the initial 10 items loaded when the gallery initializes, so it's only adding them dynamically which is the issue.Unfortunately, the API I'm using for adding the videos dynamically isn't documented anywhere that I can find, even though the CodePen I've based my code on appears to have been written by @Kris-B. Therefore, I'm don't understand what all of the parameters mean, whether adding videos using this technique is possible and, if it is, what values to use for the parameters (e.g. what would I replace 'img' with in the line
newItem.setMediaURL(this.src, 'img');?)All of my images and videos are self-hosted and I note that when my gallery initializes, each item is added to the
selfhostedobject within themediaListobject (line 6123 of jquery.nanogallery2.js). This seems to include code for identifying the items as videos, but it is not called when I add items dynamically, so perhaps that is part of the problem.So my question really is: Is the adding of videos dynamically to a gallery possible in the same way as it is for images, and if so, how? And, secondarily, could the
NGY2Item.New()function be documented on the website's API page?CODE PLAYGROUND I'm using the code that is shown in this example, under the section
// add one image. I've pretty much copied and pasted it as is, so there doesn't seem any point in creating a new CodePen for it.