我想建立一个图库.每张图片代表一组图片.我有点意识到这个很好的解决方案就是：每个图像都会触发一个模态,而在一个模态中,我会把旋转木马放在其他图像显示的地方.但我遇到了一个问题,我无法使旋转木马正常工作(它们嵌入一行).请查看jsfiddle获取更多信息：
https://jsfiddle.net/r0ukv00d/4/
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" height="42" width="42" data-toggle="modal" data-target="#myModal"><h5>
Click on the image and you will be able to see images from Iceland.
</h5>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Modal content-->
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listBox">
<div class="item active"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" alt="...">
<div class="carousel-caption"> Iceland1 </div>
</div>
<div class="item"> <img src="http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg" alt="...">
<div class="carousel-caption">Iceland2 </div>
</div>
<div class="item"> <img src="http://querzy.com/wp-content/uploads/2016/06/iceland.jpg" alt="...">
<div class="carousel-caption"> Iceland3 </div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1" 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-1" 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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg" height="42" width="42" data-toggle="modal" data-target="#myModal">
<h5>
Click on the image and you will be able to see images from Brazil.
</h5>
<h3 style="color:red">
Second carousel is not working! It shows pictures from Iceland instead of Brazil!
</h3>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Modal content-->
<div id="carousel-2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listBox">
<div class="item active"> <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg" alt="...">
<div class="carousel-caption"> Brazil1 </div>
</div>
<div class="item"> <img src="http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg" alt="...">
<div class="carousel-caption"> Brazil2 </div>
</div>
<div class="item"> <img src="http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png" alt="...">
<div class="carousel-caption"> Brazil3 </div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-2" 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-2" 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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
解决方法
以下是现代的做法.您可以参考
this link以获取动态创建模态的方式的更多详细信息.然后我在消息或消息中的javascript代码由我完成动态生成所有内容,这样如果你已经在数据库中存储了所有内容,你只需在那里创建一个类似的json并在此处解析它就完成了.添加和删除图像,国家也将很容易也将很容易.
var countryjson={
list : [
{
name : 'Iceland',img_path : 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg',otherimages : [
{
image_path : 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg',image_title: 'Title goes here.',image_caption : 'This is 1st image of iceland and this is its caption',},{
image_path : 'http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg',image_caption : 'This is 2nd image of iceland and this is its caption',{
image_path : 'http://querzy.com/wp-content/uploads/2016/06/iceland.jpg',image_caption : 'This is 3rd image of iceland and this is its caption',}
]
},{
name : 'Brazil',img_path : 'https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg',otherimages : [
{
image_path : 'https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg',{
image_path : 'http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg',{
image_path : 'http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png',}
]
}
]
}
function loadCountries()
{
for(i=0;i<countryjson.list.length;i++)
{
var countrybean=countryjson.list[i];
var msg='';
msg+='<div class="col-sm-3">';
msg+=' <div class="panel panel-default" onclick="showModal('+i+')">';
msg+=' <div class="panel-body">';
msg+=' <img src="'+countrybean.img_path+'" class="adjust-img" alt="'+countrybean.name+' Image">';
msg+=' </div>';
msg+=' <div class="panel-footer" align="center">'+countrybean.name+'</div>';
msg+=' </div>';
msg+='</div>';
$('#country_list').append(msg);
}
}
function showModal(country_id){
BootstrapDialog.show({
title: 'Other images of '+countryjson.list[country_id].name,message: function(dialog) {
var message ='';
var ol_list='';
var image_list='';
var corosol_id='myCarousel_'+country_id;
var countrybean=countryjson.list[country_id];
for(i=0;i<countrybean.otherimages.length;i++)
{
var imagebean=countrybean.otherimages[i];
ol_list+='<li data-target="#'+corosol_id+'" data-slide-to="'+i+'" '+ (i==0?'class="active"':'') +'></li>';
image_list+='<div class="item '+ (i==0?'active':'') +'">';
image_list+=' <img src="'+imagebean.image_path+'" alt="'+imagebean.image_title+'" >';
image_list+=' <div class="carousel-caption">';
image_list+=' <h3>'+imagebean.image_title+'</h3>';
image_list+=' <p>'+imagebean.image_caption+'</p>';
image_list+=' </div>';
image_list+='</div>';
}
message+='<div id="'+corosol_id+'" class="carousel slide" data-ride="carousel">';
message+=' <!-- Indicators -->';
message+=' <ol class="carousel-indicators">'+ol_list+'</ol>';
message+=' <!-- Wrapper for slides -->';
message+=' <div class="carousel-inner" role="listBox">'+image_list+'</div>';
message+=' <!-- Left and right controls -->';
message+=' <a class="left carousel-control" href="#'+corosol_id+'" role="button" data-slide="prev">';
message+=' <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>';
message+=' <span class="sr-only">PrevIoUs</span>';
message+=' </a>';
message+=' <a class="right carousel-control" href="#'+corosol_id+'" role="button" data-slide="next">';
message+=' <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>';
message+=' <span class="sr-only">Next</span>';
message+=' </a>';
message+='</div>';
return message;
}
});
}
$(document).ready(function(){
loadCountries();
});
.adjust-img
{
width : 100%;
height : 300px;
}
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> <div class="container-fluid"> <div clas="rows" id="country_list"> </div> </div>
