fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
814 stars 98 forks source link

Share url #301

Closed eukraina closed 1 year ago

eukraina commented 2 years ago

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?

eukraina commented 2 years ago

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;

  1. Get link to fullsized image with src_link = $trigger.dataset.src || "";
  2. Get descr with descr = $trigger.dataset.descr || "";
  3. $('a[class=fb_share]').attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://localhost/"+src_link);
  4. $('a[class=tw_share]').attr("href", "https://twitter.com/intent/tweet?url=https://localhost/"+src_link+'&text='+descr);

Thanks ahead!

fancyapps commented 1 year ago

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