Develop Reference

Bootstrap modal shows all images and not limited to the images in any given Tab

My question is about a bootstrap snippet as you can see here:
https://bootsnipp.com/snippets/P2gor
I wanted to use this gallery with tab views as you can see below. But my problem is that when click on first tab (Animal) and open image modal, I see the next button until all images in all tabs are shown. And when I click on second tab (Painting) the modal opens app empty and neither previous nor next button works.
First Tab
Second Tab
I want to be able to use this snippet with Tabs, so I'm here seek advice what can I do to make it work. When I click on first tab and browse the images in the modal, I want the next button to disappear when the last image on the current Tab is shown, not after all other images are shown.
Because there is no argument (id / class) passing to the JavaScript methods, I can't figure out how to make this work without making lots of duplication in the JavaScript file.
I'm sorry if this question is too generic and not enough specific.

Slideshow goes crazy after navigating away and back to the page, Aurelia framework, how to fix?

If I reload the page it fixes it. I tried to force a reload when navigating to the page, but was unsuccessful. Does anyone have any suggestions?
here is the page https://web-jam-back-dev.herokuapp.com/music
to cause the issue click back, then click /library in the menu (there is another slideshow on that page), then click back and click /ohaf (there is another slideshow on that page, so that's three total), now click back and click /music from the menu, and this slideshow will go crazy.
here is the link to the code
https://github.com/WebJamApps/combined-front/blob/dev/src/music.js
https://github.com/WebJamApps/combined-front/blob/dev/src/music.html
Thank you in advance,
Josh Sherman

So I realized that I needed to provide a unique ID for each slideshow so that the Jquery wasn't invoking it three times. That is all.

I think you need to reinitialize slider on route change success

Magnific Popup and Bootstrap 3 Modal Call Stack Exceeded

I'm having an interesting issue when combining Boostrap 3 Modal with Magnific Popup. I have a Bootstrap Modal that contains a list of videos, and each video has a view link that opens up a Magnific Popup iframe popup.
Everything worked fine until I played with Magnific Popup's z-index in order to get it to appear on top of the Bootstrap Modal. Problem is, if you try and close the Magnific Popup (or interact with it at all) a stackoverflow error occurs (Maximum call stack exceeded).
Note: Everything works fine if I leave the z-index of the Magnific Popup alone.
Simplified Example: http://codepen.io/craigh/pen/GoWWOK/
Note: codepen suppresses SO errors, so the issue is not as obvious. But on my site, the SO occurs locking the browser up.
I think it has something to do with how clicking outside of a Bootstrap Modal closes the modal, but I changed the modal backdrop to static (forces user to click the x or close button) but no change. Any ideas?

Someone posted the answer to this question in a github issue about this same problem. Commenting out a line of code seems messing it does do the trick and I haven't found any side effects as of now.
Taken from github user RandomArray's response
Line 375 seems to be the problem. I commented it out and the Maximum
call stack size exceeded error went away.
_document.on('focusin' + EVENT_NS, mfp._onFocusIn);

If you don't want to do meddle in the magnific popup code,
github user alyak46141414 later suggests in the same issue
so , I did
$(document).off('focusin' );
after after magnific load ( any funcrion called after it loaded , you
may do inside .ready(). it clear all 'focusin' handlers . no magnific
popup code modification need .
Both this and Craig Harschbarger's (your) answer worked for me.

How can I check which function will be fired after clicking a link?

I am interested how the following technique is made: http://www.otherfocus.com/
When you click on a thumbnail, the website will overlay the single page with an animation.
I consulted the source, but do not quite understand what the core of these functions is. Does anyone know how to check which function is fired after clicking a thumbnail?

You can right click on the thumbnail and check for the source (if u using chrome), in this case it is just a link - no function. for example the left upper thumbnail is a link to this path: 'http://www.otherfocus.com/wp-content/uploads/2014/11/thumb-800x600.jpg'

Fancybox stops working when invoked twice in the same browser session

I have an odd problem with Fancybox. Using version 1.2.6 (yes it's old, but that's what I'm stuck with currently), I invoke an iframe via a button click (see screenshot below)
Everything is fine if the user selects a radio button and submits the form. However, if the user closes the fancybox then invokes the iframe again (using the same button click as before), the form is not clickable. Instead there are left and right arrows on the iframe as if it's trying to display a picture (see screenshot below)
The only way to 'fix' the issue is to reload the page or not dismiss the fancybox in the first place.
[UPDATE]
Here is how I invoke the fancybox. To dismiss the fancybox, you have to click on the "Modify Address" button.
$('#hidden_link').fancybox({
frameWidth:400,
frameHeight:500,
hideOnOverlayClick:false,
hideOnContentClick:false,
showCloseButton:false
}).trigger('click');
The element #hiddenlink is a hidden href.
[UPDATE 2]
Firebug displays the error Image corrupt or truncated: data:image/gif;base64,AAAA when this occurs. Not sure if that is related or not.

Does Fancybox create a container div for the modal on page load, or does it create it on demand? If it creates one on page load then it might offer a "destroy" or "delete" method you can call on close.
If it creates one on demand then you might be able to explicitly destroy the existing one on close.