fancybox-2fancybox-3

Fancybox V2 CSS for V3


I am trying to migrate a project with Fancybox V2.5 to V3, but it needs to retain the original look.

How can I get the original X in a circle on the top right corner and other options such as rounded corners, shadow, etc to work in V3?


Solution

  • You could simply use callback to add additional elements and then use css snippets from v2 to style, for example:

    $('[data-fancybox="images"]').fancybox({
      toolbar  : false,
      smallBtn : false,
      arrows   : false,
      idleTime : false,
      loop     : true,
      transitionEffect : false,
      animationDuration : 333,
      afterLoad : function(instance, slide) {
        $('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;" data-fancybox-close></a><a title="Previous" class="fancybox-item fancybox-nav fancybox-prev" href="javascript:;" data-fancybox-prev><span></span></a><a title="Next" class="fancybox-item fancybox-nav fancybox-next" href="javascript:;" data-fancybox-next><span></span></a>').appendTo( slide.$content );
      }
    });
    

    Demo - https://codepen.io/fancyapps/full/ePYNZo