Modal popup for attachments – images results

[DusanVParticipant]

Hi,

I want to implement modal popup for images results.

This is the function built by now but obviously there is some other click behavior running before.

$(".asp_main_container").on("asp_search_end", function (event, id, instance, phrase) {
    console.log("Search ended");
    $('.asp_isotopic_item .asp_item_overlay').off("click").click(function () {
        // Get the source of the image
        var imgSrc = $(this).find('.asp_content .asp_res_url').attr('href');
        // Open modal with the clicked image
        $("#modal_popup_image_container").attr("src", imgSrc);
        $(window).attr('modalimage', 'modalimage');
    });

});

Any workaround or way to go?

Bests,
Dušan

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[DusanVParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[DusanVParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[DusanVParticipant]

Just to finish it up if someone else would require this.

The previous solution didn’t work well. On pagination the items were zero sized. So I had to change the code into this:

var isSearchChanged = false;

function ajaxSearchModal() {

    // change the default behavior of ajax search module
    // replace the items to remove the default click behavior
    // add click to open modal popup "#popup-image-view"
    // if contacts, do not add the modal popup

    ajaxSearchIntervalChecker = setInterval(function () {

        if (isSearchChanged) {

            // if search was performed, alter the items click
            $('.results .item').each(function () {

                $(this).on("mouseover", function () {

                    $(this).replaceWith($(this).clone().off('click').on('click', function (e) {

                        e.preventDefault();

                        var imgSrc = $(this).find('.asp_content .asp_res_url').attr('href');

                        // Check if imgSrc is not null or undefined, if true, open modal and set the image source
                        imgSrc ? (
                            DiviArea.show('modalimage'),
                            $("#popup-image-view").attr("src", imgSrc)
                        ) : null;

                    }));

                });

            });

            isSearchChanged = false;

        }

    }, 100);

    $(".asp_main_container").on("asp_results_show", function (event, id, instance, phrase) {

        isSearchChanged = true;

    });

}

And disabled grid items animation to avoid visual glitches.

• This reply was modified 5 days, 5 hours ago by  Ernest Marcinko. Reason: made it visible

[Ernest MarcinkoKeymaster]

Thank you very much for the feedback! This might be useful in the future.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts