Reputation: 2740
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.
How can i fix it?
sorry for my bad english. My Fiddle https://jsfiddle.net/00113e4g/4/
Upvotes: 0
Views: 5309
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
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