1

I'm trying to implement Fancybox-3 in my website for the image gallery. However the problem is that by default fancybox has the Next/Prev arrows right at the edge of either side. What I'm trying to achieve is to get them inside the image content.

Any kind of feedback on how this can be achieved would be highly appreciated.

This is what my js script looks like so far

$(window).on('load', function(){
    $("[data-fancybox").fancybox({
    infobar : false,
    buttons : false,
    afterShow : function( instance, current ) {
    if ( instance.group.length > 1 && current.$placeholder ) {
      current.$placeholder.append('<a data-fancybox-next class="button-next" 
      href="javascript:;">→</a><a data-fancybox-previous class="button- 
      previous" href="javascript:;">←</a>');
    }
    current.$placeholder.append('<a data-fancybox-close class="button-close" 
    href="javascript:;">×</a>');
    }})
});
jsadev.net
  • 2,800
  • 1
  • 16
  • 28
Zamry
  • 11
  • 2
  • Sorry about the code formatting, new to stackoverflow – Zamry Jun 18 '19 at 11:45
  • https://codepen.io/anon/pen/ryvQwy This is what I've found and tried so far but this doesnt seem to work as expected because the js and fancybox verions are older ones – Zamry Jun 18 '19 at 11:47
  • 1
    Hi and welcome to Stack Overflow! To improve your experience, read [how to ask](https://stackoverflow.com/help/how-to-ask) an [on-topic](https://stackoverflow.com/help/on-topic) question. You should also take a look at the [question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) and [how to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). To lean more about how Stack Overflow works, [take the tour](https://stackoverflow.com/tour). :) – jsadev.net Jun 18 '19 at 11:48
  • Did you also took care about the css provided in the codepen? I think we were not able to solve your issue without seeing more code. Could you create an own codepen or fiddle including the fancybox version you're using? – jsadev.net Jun 18 '19 at 11:53
  • 1
    That was it! I Got it working using the codepen example I linked. The problem was the fancybox css version. Thank you very much for your assistance :) – Zamry Jun 18 '19 at 12:23

0 Answers0