CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modal
YVS1102
YVS1102

Reputation: 2740

carousel inside modal not working

Good day, I'm trying to create simple image slideshow in carousel.But i facing a proble when i try to add this carousel inside modal. Here is my script

<div id="modalphoto" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-body">
             <div id="carousel-example-generic" class="carousel slide">
                  <div class="carousel-inner">

                  </div>

            </div>
            </div>
    </div>

The trigger to show modal

<?php if(isset($photo)){ ?>
            <?php foreach($photo as $foto) { ?>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                        <a class="thumbnail">
                            <p align="center">Item : (<?=$foto->ItemCode;?>)  <br>
                                <?=$foto->ItemName;?>
                                <input type="hidden" class="itemcodes" value="<?=$foto->ItemCode;?>">
                            </p>
                        </a>
                    </div>
        <?php } } ?>

and then my Javascript.

$(document).on("click",".thumb",function(){
            $('.carousel-inner').html("");
            var Items  = $(this).find('input:hidden').val();
                $.ajax({
                    data : {Items:Items},
                    url : '<?=base_url();?>Item/getphoto',
                    type:'POST',
                    datatype:'JSON',
                    success:function(data){
                           data = $.parseJSON(data);
                         $.each(data, function(k , v) { 
                            $(".carousel-inner").append('<div class="item">'+
                                                        '<img class="img-responsive" src="./assets/file_upload/md/'+v.PhotoName+'" style="width:100%">'+
                                                        '<div class="carousel-caption">'+v.ItemName+'</div></div>'
                                                        )

                        });
                        $("#modalphoto").modal("show");

                    }
                });
        });

the problem is when i click .thumb my screen goes black. Here is the screenshot.

enter image description here

How can i fix it?

sorry for my bad english. My Fiddle https://jsfiddle.net/00113e4g/4/

Upvotes: 0

Views: 5309

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

The structure of your carousel-inner fragment is wrong.

Change it so that each element can be like:

<div class="item">
   <img class="img-responsive" src="http://placehold.it/365"
       style="width: 100%; height: auto">
   <div class="carousel-caption">acts_as_money</div>
</div>

Moreover, the first element needs the active class.

The snippet:

$(document).ready(function() {

    var data = [{
        "ItemCode": "ANK160500191",
        "PhotoName": "1.png",
        "PhotoFlag": 1
    },
        {
            "ItemCode": "ANK160500191",
            "PhotoName": "BTY2.png",
            "PhotoFlag": 1
        }, {
            "ItemCode": "ANK160500191",
            "PhotoName": "fffff.png",
            "PhotoFlag": 1
        }, {
            "ItemCode": "ANK160500191",
            "PhotoName": "result.png",
            "PhotoFlag": 1
        }, {
            "ItemCode": "ANK160500191",
            "PhotoName": "SKSM2.png",
            "PhotoFlag": 1
        }];


    $(document).on("click", ".thumb", function() {
        $('.carousel-inner').html("");
        var Items = $(this).find('input:hidden').val();
        $.ajax({
            url: "https://api.github.com/repositories?since=364",
            data: {
                Items: Items
            },
            type: 'GET',
            datatype: 'JSON',
            success: function(data) {
                //data = $.parseJSON(data);
                $.each(data.slice(0,3), function(k, v) {
                    var act = (k == 0) ? 'active' : '';
                    $(".carousel-inner").append('<div class="item '  + act + '">' +
                            '<img class="img-responsive" src="http://placehold.it/'+v.id+'" style="width: 100%; height: auto">' +
                            '<div class="carousel-caption">' + v.name + '</div></div>'
                    )

                });
                $("#modalphoto").modal("show");

            }
        });
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="modalphoto" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-body">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="http://placehold.it/450x350" alt="Slide 1">
                    <div class="carousel-caption">
                        Caption Slide 1
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/450x350" alt="Slide 2">
                    <div class="carousel-caption">
                        Caption Slide 2
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/450x350" alt="Slide 3">
                    <div class="carousel-caption">
                        Caption Slide 3
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

<div class="box-body table-responsive">
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail">
            <p align="center">Item : (0019177)  <br>
                SANDAL 6170-23 BROWN <input type="hidden" class="itemcodes" value="0019177">
            </p>
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail">
            <p align="center">Item : (ANK160500191)  <br>
                NECKLACE  <input type="hidden" class="itemcodes" value="ANK160500191">
            </p>
        </a>
    </div>
</div>

Upvotes: 1

Shalin Patel
Shalin Patel

Reputation: 1099

You can refer to this link.

It has all the answer you needed. It even shows how you can display modal dynamically. Without even coding anything and just with calling function how can you display a modal is also shown here.

Upvotes: 0

Related Questions