CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrap
Nevermore
Nevermore

Reputation: 882

Why is this image slider not working in the modal?

I am showing an image slider/ carousel when the modal opens. However, the slider doesnt showup when I click the image. The code is generated using javascript and then rendered by the php page.

I am sending a JSON object from my server-side. I am getting it without any error. In that JSON object, I am getting 3 images which I want to display in a slider. Any image maybe blank. Here is what I have done:

displayData += '<div class="well well-sm" id="'+gotData.profile_id+'" style="width:180px;height:150px;background:#ccccff;display:block;float:left; border:1px solid black;padding: 5px;margin: 5px 5px 5px 5px;"';
displayData += '<p><b>'+gotData.first_name+'</b></p>';

if(gotData.img == "" && gotData.img2 == "" && gotData.img3 == ""){
displayData += '<p class="ethumbnail"> <img class="img-responsive" alt="Some image" src="images/no-image-found.png"  width="100" height="100" border=""/></p>';

displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="images/no-image-found.png"  width="200" height="200" border=""/></p>';
} else{

displayData += '<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">';
                                displayData += '<div class="carousel-inner">';

                                if(gotData.img != "" || gotData.img != undefined){
                                    displayData += '<p class="ethumbnail"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img+'"  width="100" height="100" border=""/></p>';

    displayData += '<div class="item active">';
    displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img+'"  width="100" height="100" border=""/></p>';
    displayData += '</div>';
    } else {} 

    if(gotData.img2 != "" || gotData.img2 != undefined){
        displayData += '<div class="item">';
        displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img2+'"  width="100" height="100" border=""/></p>';
        displayData += '</div>';
    } else {}

    if(gotData.img3 != "" || gotData.img3 != undefined){
        displayData += '<div class="item">';
        displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img3+'"  width="100" height="100" border=""/></p>';
        displayData += '</div>';                                    
    } else {}

    displayData += '</div>';
    displayData += '<a class="left carousel-control hidden" href="#carousel-example-generic" role="button" data-slide="prev">';
    displayData += '<span class="glyphicon glyphicon-chevron-left"></span>';
    displayData += '</a>';
    displayData += '<a class="right carousel-control hidden" href="#carousel-example-generic" role="button" data-slide="next">';
    displayData += '<span class="glyphicon glyphicon-chevron-right"></span>';
    displayData += '</a>';
    displayData += '</div>';
}

$('#content').html(displayData);//replacing img with data




$('body').on('click','div.well.well-sm',function(){
        var list = $(this);
        $('#myModal .modal-title').html('Profile Information');
        $('#myModal .modal-body').html(list.html());
        $('#myModal .modal-body p').removeClass('hidden');
        $('#myModal .modal-body p.ethumbnail').remove();
        $('#myModal').modal('show');
    });

Upvotes: 0

Views: 233

Answers (1)

Narendra CM
Narendra CM

Reputation: 1426

I believe you need to call $('.carousel').carousel() after you display the modal like this

$('body').on('click','div.well.well-sm',function(){
    var list = $(this);
    $('#myModal .modal-title').html('Profile Information');
    $('#myModal .modal-body').html(list.html());
    $('#myModal .modal-body p').removeClass('hidden');
    $('#myModal .modal-body p.ethumbnail').remove();
    $('#myModal').modal('show');
    $('.carousel').carousel()
});

Upvotes: 1

Related Questions