Remove loaded element after fancybox closing

Question

How can I delete the loaded data through a ajax call so that when I press on another image the relative images are loaded?

This is my code for loading fancybox:

$(document).ready(function () {
    $("[data-fancybox]").fancybox({
        loop: false,
        closeExisting: true,
        buttons: [
            // "zoom",
            //"share",
            "slideShow",
            // "fullScreen",
            //"download",
            // "thumbs",
            "close"
        ],
        onInit: function (instance) {
            let id_album = $("[data-fancybox]").attr('id');
            $.ajax({
                type: 'POST',
                url: './function/retrive-photo.php',
                data: {
                    id_album: id_album
                },
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (index, item) {
                        instance.addContent({
                            'type': 'image',
                            'src': item.src
                        });
                    });
                }
            });
        },
        afterClose: function () {
            $('.fancybox-content').remove();
            console.log("DONE B!");
        }
    });
});

I try to delete the content of the fancybox loaded via ajax using the command $('.fancybox-content').remove()but it doesn't work

@LeeTaylor Nope, it doesn't work. When I click on another image, the images that are loaded are those that were previously uploaded — th3g3ntl3man, Sep 10 '19 at 21:11
Without a working demo to play with it's hard to see the issue. — Lee Taylor, Sep 10 '19 at 21:15
You can see the problem at this link: http://foobanizer.altervista.org/photography.php — th3g3ntl3man, Sep 10 '19 at 21:55
You have an error in your code `instance.hideLoading( slide )` — Lee Taylor, Sep 10 '19 at 22:03
I'm not seeing the problem. I can click on images and they load up. — Lee Taylor, Sep 10 '19 at 22:09
@LeeTaylor If you click on the first image it will load the correct images. Afterwards, if you press on the second image (bottom right) you will reload the images from before and not those related to the album — th3g3ntl3man, Sep 10 '19 at 22:11

Lee Taylor · Accepted Answer · 2019-09-10T23:53:46.963

2

Change your

onInit: function (instance) 
{
    let id_album = $("[data-fancybox]").attr('id');

to:

onInit: function (instance) 
{
    let id_album = $("[data-fancybox]").eq(instance.id-1).attr("id");

Since $("[data-fancybox]") is an array, you are getting its id which will always give you the first one.

EDIT

Change :

$("[data-fancybox]").fancybox(
{
   XXX
});

to:

$("[data-fancybox]").each(function() 
{
    var that = this;
    $(this).fancybox(
    {
        XXX
    });
});

Then change your onInit code to:

let id_album = $(that).attr('id');

edited Sep 10 '19 at 23:53

answered Sep 10 '19 at 22:32

Lee Taylor

7,761
16
33
49

And if I have a number of images other than 2? Which I don't know because it can increase or decrease based on the number of albums that are loaded? – th3g3ntl3man Sep 10 '19 at 23:12
I'm pretty sure that as long as you use the same mechanism that it will work. Let me know if it doesn't. – Lee Taylor Sep 10 '19 at 23:13
If I use the same solution you suggested, it doesn't work. If I start to look at the gallery from the fifth image I upload the photos of the first one because it takes the id of the first image. – th3g3ntl3man Sep 10 '19 at 23:16
Can you upload to your site? – Lee Taylor Sep 10 '19 at 23:17
I just updated! Also, I noticed that as a second image it always shows me the cover of the album that is there before. If, for example, I press on the third image (bottom right), as a second image the gallery shows me the image at the top left. – th3g3ntl3man Sep 10 '19 at 23:32
OK. I've made an edit to my answer. It's hard to test without being able to edit the code. So hopefully that's closer. I could be wrong, but I think you can just miss out the initial image from the php call... – Lee Taylor Sep 10 '19 at 23:54

Remove loaded element after fancybox closing

1 Answers1