Comments (9)
@fancyapps: I'm also interested in the same feature. As @zub0r, I have a page with some image thumbnail, and if the user scrolls down, more are loaded. However, I would like that when the user opens the Fancybox gallery view, and reaches the last image, more images are loaded with AJAX and appended to the current Fancybox instance.
Is there a way to achieve this? Thanks!
from ui.
Hi,
Unfortunately, there is so much to do, and I have not yet updated the documentation to reflect recent changes. So, either use the groupAll
option to group them all, or add data-fancybox
attribute to your links, see this demo for different uses - https://fancyapps.com/playground/w6
from ui.
Thanks for the fast reply, that's what I was looking for.
Is there a way to dynamically add new slides to an opened gallery from the DOM? Something like a reload?
Thanks
from ui.
Sorry, it is currently not possible to add / remove slides from an already open instance. You could do something like this to destroy and reinitialize Carousel, but it is not optimized and there can be glitches:
Fancybox.getInstance().items.push({src : "https://lipsum.app/id/99/300x200/", type : "image"});
Fancybox.getInstance().Carousel.destroy();
Fancybox.getInstance().initCarousel();
Anyway, your goal is to create something like infinite gallery? Sometimes people ask for it, but I think it's useless. I believe it would be best to display maximum 20 or 25 images on the page, but include all images in the Fancybox. Unless you really have infinite number images, you can easily use Fancybox to display hundreds of images. Fancybox (and thumbnail carousel) will load visible images and next/prev items (you can configure that).
from ui.
Thanks. My use case is that I'm loading hundreds of items to the grid with infinite scroll in sets of 20-30 (imagine like a photo bank). When someone opens the gallery and reaches the final gallery item from the first set, it looks like there are no more items.
I've added the logic to fetch next set of items (html) when last slide is displayed, but can't load them in opened gallery. The user would have to close the gallery and reopen it for every set of new images.
from ui.
Good idea, waiting for this feature too :)
from ui.
Hi,
Starting from v5, you can add new slides like this:
Fancybox.getInstance().carousel.appendSlide({ src : "https://lipsum.app/id/1/800x600", type: "image"});
However, currently the thumbnails are not synchronized, but this is planned to be implemented.
from ui.
你好,
从 v5 开始,您可以像这样添加新幻灯片:
Fancybox.getInstance().carousel.appendSlide({ src : "https://lipsum.app/id/1/800x600", type: "image"});不过,目前缩略图尚未同步,但计划实施。
Looking forward to adding thumbnail synchronization function.
from ui.
As of v5.0.25, it is possible to create a gallery with an infinite number of items, and thumbnails are synchronized.
Here are two possible solutions.
1. Solution
Add new slides as the user nears the end of the gallery while navigating.
const addSlides = () => {
const carousel = Fancybox.getInstance()?.carousel;
const totalSlides = carousel?.slides.length || 0;
const requiredSlides = Math.ceil(window.innerWidth / 96);
if (carousel && carousel.page >= totalSlides - requiredSlides) {
carousel.appendSlide({
src: `https://lipsum.app/id/${totalSlides + 1}/1024x768/`,
thumb: `https://lipsum.app/id/${totalSlides + 1}/300x225/`,
caption: `#${totalSlides + 1}`,
});
addSlides(carousel);
}
};
Fancybox.bind('[data-fancybox="gallery"]', {
Carousel: {
infinite: false,
},
on: {
"Carousel.ready": () => {
addSlides();
},
"Carousel.change": () => {
addSlides();
},
},
});
https://jsfiddle.net/d17qftax/
2. Solution
In the previous solution, you'll notice that even though the main carousel is infinite, the user can reach the end of the row of thumbnails. The solution would be to add new slides when the thumbnail carousel position is changed.
const addSlide = () => {
const carousel = Fancybox.getInstance()?.carousel;
if (carousel) {
const totalSlides = carousel.slides.length;
carousel.appendSlide({
src: `https://lipsum.app/id/${totalSlides + 1}/1024x768/`,
thumb: `https://lipsum.app/id/${totalSlides + 1}/300x225/`,
caption: `#${totalSlides + 1}`,
});
}
};
Fancybox.bind('[data-fancybox="gallery"]', {
Carousel: {
infinite: false,
},
Thumbs: {
Carousel: {
on: {
"refresh Panzoom.afterTransform": (carousel) => {
const { viewportDim, contentDim, panzoom } = carousel;
const currentPos = (panzoom?.current.e || 0) * -1;
if (contentDim - viewportDim - currentPos < viewportDim * 0.5) {
addSlide();
}
},
},
},
},
});
https://jsfiddle.net/nom5p2u7/
from ui.
Related Issues (20)
- Unable to select text inside a Carousel HOT 1
- Flash of content on close() in Safari 17.4.1 HOT 8
- Fancybox PDF Presentation mode HOT 3
- Image, that open when loading the page with #hash, immediately after opening closes HOT 5
- Rearrange dots HOT 1
- Emulator.js Popup window HOT 2
- Vertical carousel doesn't work HOT 1
- Description of `reveal` and `done` events are not accurate and behaviour is undesirable HOT 2
- Vimeo parameters have no effect HOT 3
- Mouse panning breaks zoom on Android (panMode: "mousemove") HOT 8
- Fancybox.getInstance is incorrectly typed, missing string option HOT 2
- Download button is disabled for videos HOT 2
- Aspect Ratio via data-attribute HOT 1
- Unable to click on a link positioned over a Fancybox/Carousel HOT 1
- Carousel error when trying to control slides using useState in React HOT 1
- Fancybox: Hide caption when idle? HOT 1
- iframe performance issue HOT 2
- Slideshows aren't waiting for videos anymore HOT 2
- Zoom doesn't work when image is max size HOT 1
- Carousel position resetting when toggling visibility (display none) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.