jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg"></a>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg"></a>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg"></a>

CSS

.fancybox-container .fancybox-image {
  padding: 80px;
  background: #fff;
  border-radius: 20px;
}

.fancybox-container .fancybox-navigation .fancybox-button.prev,
.fancybox-container .fancybox-navigation .fancybox-button.next {
  width: 69px;
  height: 69px;
  font-size: 35px;
  border-radius: 50%;
  border: none;
  background-color: #fe7f40;
  color: white;
  cursor: pointer;
  padding: 0;
}

JavaScript

$('[data-fancybox="gallery"]').fancybox({
  btnTpl: {

    arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left prev" title="{{PREV}}">' +
      '<i class="fa fa-angle-left" aria-hidden="true"></i>' +
      "</button>",

    arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right next" title="{{NEXT}}">' +
      '<i class="fa fa-angle-right" aria-hidden="true"></i>' +
      "</button>"

  }

});