How to implement Next/Prev for modal Ajax popup

Question

I'm using a bPopup jquery plugin to open ajax html files in the modal popup, but I want to extend it in order to go to the next slide in the modal without clicking out?

Here is the current code that I'm using:

$(document).ready(function() {
$('.my-button').bind('click', function(e) {//select all the buttons with a class selector

        var loadFile = $(this).data("file");

        // Prevents the default action to be triggered. 
        e.preventDefault();

        // Triggering bPopup when click event is fired
        $('#element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: loadFile //Uses jQuery.load()
        });
    });
});

<button data-file="test1.html" class="my-button">Load one modal</button>
<button data-file="test2.html" class="my-button">Load another modal</button>
<button data-file="test3.html" class="my-button">Load a third modal</button>

For example, if test1.html is open in the modal, and I want to go to test2.html within the open modal box without closing test1.html, and opening test2.html in another modal, is there a way to do this? I have tried adding in the open modal, but it does trigger an event.

Answer 1

It will probably save you a lot of time to just use something like Fancybox since extending bPopup like you are trying to do will be probably be very buggy. With Fancybox, you can simply add a rel attribute to each of the modal links, and the $.fancybox.next() and $.fancybox.prev() will take you to the next/previous modal with that rel. Another alternative is colorbox with similar functionality.