Modal popup for attachments – images results

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Modal popup for attachments – images results

This topic contains 7 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 1 month, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #48028
    DusanV
    DusanV
    Participant

    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

    #48059
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


    #48062
    DusanV
    DusanV
    Participant
    You cannot access this content.
    #48066
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


    #48069
    DusanV
    DusanV
    Participant
    You cannot access this content.
    #48071
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


    #48122
    DusanV
    DusanV
    Participant

    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 1 month, 1 week ago by Ernest Marcinko Ernest Marcinko. Reason: made it visible
    #48131
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.