Develop Reference

Toggling lottie hamburger/menu animation on .nav-link click?

SOLVED, SEE MY SOLUTION BELOW
Hello so my navigation works fine like this apart from when the links are clicked, the lottie animation doesn't toggle back to it's first frame.
Could anyone help me with a solution to this as I've been trying for awhile now with no luck.
I'm using bootstrap and this is my navigation toggler button:
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#lowetoggle"
aria-controls="lowetoggle"
aria-expanded="false"
aria-label="Toggle navigation"
>
<div class="lowe-menu" style="width: 50px;"></div>
</button>
<lottie-player id="toggleLottie" src="assets/menu.json" style="width:50px;">"></lottie-player>
</button>
and this is my js:
let iconMenu = document.querySelector('.lowe-menu');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "/assets/menu.json"
});
var directionMenu = 1;
iconMenu.addEventListener('click', (e) => {
animationMenu.setDirection(directionMenu);
animationMenu.play();
directionMenu = -directionMenu;
});
var navLinks = document.querySelectorAll('.nav-link')
var menuToggle = document.getElementById('lowetoggle')
var bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
});

Bootstrap 5 Lottie Hamburger Menu
Solved this myself, So if you are using Lottie for your hamburger menu in Bootstrap, and your page is using anchor links to scroll to different sections, this code will make the hamburger close on clicking a .nav-link element.
Hope this is useful, as I've not found anyone else with a snippet for this online! Maybe I didn't far though!
let iconMenu = document.querySelector('.lowe-menu');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
animationData: {"v":"5.7.4","fr":60,"ip":0,"op":39,"w":600,"h":600,"nm":"hamburger to x","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"ScaleCTRL","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[300,300,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[391.026,391.026,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Line03","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,30.5,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"t":69,"s":[0,30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Line02","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Line01","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[-48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[-45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[-45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[-48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,-30.5,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"t":69,"s":[0,-30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0}],"markers":[]}
});
var directionMenu = 1;
iconMenu.addEventListener('click', (e) => {
animationMenu.setDirection(directionMenu);
animationMenu.play();
directionMenu = -directionMenu;
});
var navLinks = document.querySelectorAll('.nav-link')
var menuToggle = document.getElementById('lowetoggle')
var bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
navLinks.forEach((l) => {
l.addEventListener('click', () => {
if (window.innerWidth < 992){ // This part fixes flickering on desktop nav-items!
bsCollapse.toggle()
animationMenu.setDirection(directionMenu);
animationMenu.play();
directionMenu = -directionMenu;
}
});
});
.navbar-lowe {background-color: black;}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-lowe">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<p>Logo</p>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#lowetoggle"
aria-controls="lowetoggle"
aria-expanded="false"
aria-label="Toggle navigation"
>
<div class="lowe-menu" style="width: 50px;"></div>
</button>
<div class="collapse navbar-collapse" id="lowetoggle">
<div class="navbar-nav align-items-end">
<a class="nav-link active" href="#home">Home</a>
<a class="nav-link" href="#work">Work</a>
<a class="nav-link" href="#contact">Contact</a>
</div>
<div class="navbar-text ms-auto text-end">
<a class="btn nav-button" role="button">Call Today <strong>05555555 555</strong></a>
</div>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js"></script>
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap Dropdowns and Popovers call parent element's hide function

When a Bootstrap Dropdown item is selected or a Popover closed, the popped up content is closed. However, a call is also made to the hide() function of the parent:
<div id="Dropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<button id="Button" type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-placement=bottom title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<script>
Button.hide = function() {console.log('hide button called')};
Dropdown.hide = function() {console.log('hide dropdown called')};
</script>
In the above code, messages will appear on the console when the dropdown or popover are dismissed. Looking at the stack trace, the actual call to the hide function is coming from jQuery.
This happens in both Bootstrap 3 and 4.
Is there anyway to prevent this from happening? If not, is there a way to detect if hide() is being called from jQuery?

Don't know how will we stop the event but it's dispatched from Bootstrap. I have used unminified version and below is a snippet from Bootstrap 4 which generates hide event as shown in call stack by chrome. jQuery fires click on window event which Bootstrap listens and afterwards fires hide event for every element which should be hidden.
Dropdown._clearMenus = function _clearMenus(event) {
if (event && event.which === RIGHT_MOUSE_BUTTON_WHICH) {
return;
}
var backdrop = $(Selector.BACKDROP)[0];
if (backdrop) {
backdrop.parentNode.removeChild(backdrop);
}
var toggles = $.makeArray($(Selector.DATA_TOGGLE));
for (var i = 0; i < toggles.length; i++) {
var parent = Dropdown._getParentFromElement(toggles[i]);
var relatedTarget = { relatedTarget: toggles[i] };
if (!$(parent).hasClass(ClassName.OPEN)) {
continue;
}
if (event && event.type === 'click' && /input|textarea/i.test(event.target.tagName) && $.contains(parent, event.target)) {
continue;
}
var hideEvent = $.Event(Event.HIDE, relatedTarget);
$(parent).trigger(hideEvent);
if (hideEvent.isDefaultPrevented()) {
continue;
}
toggles[i].setAttribute('aria-expanded', 'false');
$(parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget));
}
};

The answer is to detect the popup showing in the show.bs.popover event. Only do the hide if no popup was involved. Here's the code for Button in the sample above:
$('#Button').on('show.bs.popover', function () {
Button.popoverShowing = true;
})
Button.hide = function() {
if (Button.popoverShowing) {
Button.popoverShowing = false;
return;
}
Button.style.display = "none";
};

Disable collapsing animation in bootstrap on "close" click

I have made some collapsing panels with bootstrap. Then added a method to "close" and remove the panels using angular. Only problem is that when I close the panel, the collapsing, open/close functionality still works. So the panel might open and then disappear, when it really should just disappear.
Here is a simplified version of the HTML
<div class="panel-group">
<div class="panel panel-info fadein fadeout" ng-repeat="p in panels">
<div class="panel-heading" data-toggle="collapse" data-target="#test_{{p}}" style="cursor:pointer">
<h4 class="panel-title">
open / close - {{p}}
<span class="glyphicon glyphicon-remove pull-right" ng-click="close(p)"></span>
</h4>
</div>
<div id="test_{{p}}" class="panel-collapse collapse" aria-expanded="false">
<div class="panel-body">
hello {{p}}
</div>
</div>
</div>
</div>
and angularJS
angular.module('app', ['ngAnimate'])
.controller('controller', function($scope){
var i = 4;
$scope.panels = ['panel_1', 'panel_2', 'panel_3']
$scope.add = function(){
console.log('add');
$scope.panels.push('panel_' + i++);
}
$scope.close = function (p) {
console.log('close ' + p);
for (var i = 0; i < $scope.panels.length; i++){
if ($scope.panels[i] == p){
$scope.panels.splice(i, 1);
}
}
}
});
Made a fiddle to illustrate:
https://jsfiddle.net/fiddlejan/82bmcyt0/
When you click on close, the cross on the right. The panel will "open", then disappear (the fadeOut animation does not seem to work here). I would like the close button to just remove the panel when you click close. Not "open" or "close" the panel.
So in case of clicking the close button, the panels collapsing, opening/close function should be disabled.

Add the event object to your ng-click definition:
<span class="glyphicon glyphicon-remove pull-right" ng-click="close(p, $event)"></span>
And use that object in your event handler:
$scope.close = function (p, e) {
console.log('close ' + p);
for (var i = 0; i < $scope.panels.length; i++){
if ($scope.panels[i] == p){
$scope.panels.splice(i, 1);
}
}
e.stopPropagation();
}

Bootstrap dropdown-toggle close on click

I have a dropdown button with a list of things that are anchored to different parts of the page. This dropdown is only for mobile.
However the problem is, the dropdown would not close after I click on it. Is there anyway I can make it close on click? I've tried looking around but it wouldn't work on mine.
<div id="mobile-dropdown" class="nav2 w" data-spy="affix" data-offset-top="350">
<div class="container">
<div class="pull-left" style="margin-top:3px; margin-right:3px;">Jump to </div>
<div class="pull-left">
<div class="btn-group mob-fl">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Categories
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
</div>
</div>
I also took a look at bootstrap's js itself and caught this line:
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
Is this be the reason why it won't close? Are there any workaround to make it work?
EDIT:
So with some help i got this script:
$('document').ready(function() {
$("a.dropdown-toggle").click(function(ev) {
$("a.dropdown-toggle").dropdown("toggle");
return false;
});
$("ul.dropdown-menu a").click(function(ev) {
$("a.dropdown-toggle").dropdown("toggle");
return false;
});
});
My javascript is pretty weak, how do i actually edit this to make it work only in my "mobile-dropdown" id div.
Alright so far I've updated my script to this:
$('document').ready(function() {
$("#subject_cat_mob .dropdown-toggle").click(function(ev) {
$("#subject_cat_mob .dropdown-toggle").dropdown("toggle");
return false;
});
$("#subject_cat_mob ul.dropdown-menu a").click(function(ev) {
$("#subject_cat_mob .dropdown-toggle").dropdown("toggle");
return false;
});
});
It works like how I want it to be. But the dropdown won't open again after the first time.

This should make it work for your HTML:
$('document').ready(function() {
$("#mobile-dropdown .dropdown-toggle").click(function() {
$(this).dropdown("toggle");
return false;
});
});
Update
Here's a working example including your smooth scroll functionality:
$(function() {
$('a[href*=#]:not([href=#])[href^="#"]:not([data-toggle])').click(function() {
$(this).dropdown("toggle"); // this is the important part!
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-100
}, 1000);
return false;
}
}
});
});
Notice the third line? That's all it needs: $(this).dropdown("toggle");.
You can check out a working example on JSFiddle.

A good solution can be found here:
https://github.com/CWSpear/bootstrap-hover-dropdown
Add class="dropdown-toggle disabled"
It's better explained here Allow click on twitter bootstrap dropdown toggle link?

Cannot create custom toolbar button that works on mobile

I have the simple code:
<button class="pswp__button" id="CustomButton" style="background:none;" title="Custom" onclick="CustomClicked()">
<img src="~/CustomImage.jpg"">
</button>
This works as expected on desktop browsers. When I switch to mobile though, I cannot get the event to fire when I tap the button. I've tried attaching every event handler I can think of: tap, click, touch, touchstart, etc, and I can still not get any of the events to fire on mobile.
If I invoke the click event through the console, it works on mobile as well, but I can't seem to get the click event to propagate to that control. I've tried setting its zindex to ridiculous values, and still no luck. Anyone have a clue?
After searching for some solutions online, they all seem to have teh same problem. This one, for instance, doesn't fire on mobile either:
var openPhotoSwipe = function() {
var pswpElement = document.querySelectorAll('.pswp')[0];
// build items array
var items = [
{
src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
w: 964,
h: 1024
},
{
src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
w: 1024,
h: 683
}
];
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
openPhotoSwipe();
$(document).on('click', '.pswp__button.pswp__button--close' , function(){
alert('d'); // did not fire?
});
document.getElementById('btn').onclick = openPhotoSwipe;
<button id="btn">Open PhotoSwipe</button>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
<div class="pswp__container">
<!-- don't modify these 3 pswp__item elements, data is added later on -->
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>

In order to achieve this functionality, you must edit hte photoswipe-ui-default.js file.
Your custom button must have the class pswp__button--myCustomButtonName as well as pswp__button.
<button class="pswp__button pswp__button--myCustomButtonName" id="CustomButton" style="background:none;" title="Custom" onclick="CustomClicked()">
<img src="~/CustomImage.jpg"">
Inside the photoswipe-ui-default.js file, you'll see a list of controls:
var _uiElements = [
{
name: 'caption',
option: 'captionEl',
onInit: function(el) {
_captionContainer = el;
}
},
{
name: 'myCustomButton',
option: 'customOptionName',
onTap:MyCustomButtonFunction
},
You must then add that button name to the options:
var options = {
history: false,
escKey: false,
closeOnScroll: false,
pinchToClose: false,
closeOnVerticalDrag: false,
customOptionName: true
};

Use :before to apply additional styles to the buttons, or modify the default UI JS file, so it registers click on image too.
By default, it registers tap only on the target element (in your case it's image), and does not propagate up in the DOM tree.

Figured out a way that doesn't involve altering the library. It's just a bit unfortunate the way the click handling is written, since you cannot use preventDefault or stopPropagation to cancel the handler.
// Disable hiding controls when tapping action buttons
pswp.framework.bind(pswp.scrollWrap, 'pswpTap', (e) => {
let el = e.target || e.srcElement;
while ((el = el.parentElement) && !el.classList.contains('action'));
if (el) {
pswp.options.tapToToggleControls = false;
setTimeout(() => {
pswp.options.tapToToggleControls = true;
}, 50);
}
});