views:

177

answers:

0

I'm using Eric Martin's SimpleModal plugin (thanks, Eric for sharing such a great solution!) on a project and have run into a few problems integrating OnOpen and OnClose effects into my existing code.

The page I'm working on has 6 different modals with prev/next functionality and I can't figure out how to integrate the following onOpen effects to my existing prev/next code.

I'm relatively new to JQuery and have been spinning my wheels on this for a few days. Thank you in advance for any and all help.

onOpen sample (courtesy of Eric Martin's SimpleModal project page) that I'd like to incorporate for starters:

  $("#element-id").modal({onOpen: function (dialog) {

dialog.overlay.fadeIn('slow', function () { dialog.container.slideDown('slow', function () { dialog.data.fadeIn('slow'); }); }); }});

My existing code with prev/next functionality:

$(function()

{

$('a.foo').each(function()
    {
            $(this).click(function()
            {
                    $('#modal_' + this.id).modal({
                    overlayClose:true
                    });
            });
    });

    var num_divs = $('div.basic-modal-content').length;

    $('div.basic-modal-content').each(function(i)
    {   
            if (i > 0)
            {

    var prev_id = $(this).prev('.basic-modal-content').attr('id');

            $('<a href="#" class="simplemodal-container-prev"></a>')
                            .click(function()
                            {
                                    $.modal.close();
                                    $('#' + prev_id).modal({overlayClose:true});
                            })
                            .appendTo($(this));
            }

            if (i < num_divs - 1)
            {

                    var next_id = $(this).next('.basic-modal-content').attr('id');

                    $('<a href="#" class="simplemodal-container-next"></a>')
                            .click(function()
                            {
                                    $.modal.close();
                                    $('#' + next_id).modal({overlayClose:true});
                            })
                            .appendTo($(this));
            }
    });

});

Thanks again for your feedback!