Search code examples
javascriptjqueryhtmllightboxlightbox2

lightbox2 blank


I am working on a project with lightbox2. Unfortunately every time I try click on a picture to load it in lightbox the box stays blank white.
I checked the request..The image gets loaded from Instagram correctly. my project:

this is the code of my request:

function getImages(searchText){
    //removing the the last images of the search if there were any 
    $("img").remove();
    //making the ajax call
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/tags/"+searchText+"/media/recent?access_token=HEREISMYTOKEN",
        success: function(data) {
            for (var i=0; i <= 6; i++) {
                var image = data.data[i].images.standard_resolution.url
                $("#images").append("<a href='"+image+"' rel='lightbox[insta]' title='Alternately you can press the right arrow key.' ><img src="+data.data[i].images.thumbnail.url+" alt='Plants: image 2 0f 4 thumb' /></a>")
                Lightbox.initialize();
            };
    }
    });
}

Any ideas how to fix this? Thanks a lot!


Solution

  • I had found your problem after study about how lightbox works.

    By default, lightbox with have <img class="lb-image">.

    After you call your getImages(searchText) function, it is removed due to your function below:

    $("img").remove();
    

    You should specify in details which img you want to remove. This should solve your problem.