ui
ui copied to clipboard
Share url
On v3 I had - button: ["share"] and a custom share tpl with a link like https://www.facebook.com/sharer/sharer.php?u={{url}} or href="https://twitter.com/intent/tweet?url={{url}}&text={{descr}}" where url is a link to fullsize and descr is a caption of an image. On v4 i created a custom html layout with $leftCol and $rightCol like in tutorial https://fancyapps.com/playground/16W And $rightCol.innerHTML = 'Share to Twitter a href="https://twitter.com/intent/tweet?url={{url}}&text={{descr}}"'; How can I change href for each slide when "Carousel.ready Carousel.change": (fancybox, carousel, slideIndex) => to set {{url}} and {{descr}} for each image properly?
Is this way OK?
Pass link and descr to html with <a data-fancybox="gallery" data-src="link" data-descr="descr" ... etc
$rightCol.innerHTML =
FB shareTwitter share
When "Carousel.ready Carousel.change": (fancybox, carousel, slideIndex) const $trigger = fancybox.items[slideIndex].$trigger;
- Get link to fullsized image with src_link = $trigger.dataset.src || "";
- Get descr with descr = $trigger.dataset.descr || "";
- $('a[class=fb_share]').attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://localhost/"+src_link);
- $('a[class=tw_share]').attr("href", "https://twitter.com/intent/tweet?url=https://localhost/"+src_link+'&text='+descr);
Thanks ahead!
Hi,
Here is an example of how to create a custom toolbar button in v5: https://fancyapps.com/fancybox/plugins/toolbar/#custom-button https://jsfiddle.net/1oj7zt9v/
And here is an example of how to create a sidebar - https://stackblitz.com/edit/js-ktcv4h?file=index.js