效果: 在一个table里显示很多的小图,每点击一个图片,显示一张大图。
- 小图的html
<td><img height='120px' width='200px' src="{$vo['img']}?imageView2/1/w/200/h/120" onclick="showBigImg('{$vo['img']}')"/></td>
- 图片的url来自TP的模板替换
- 图片的末尾的
?imageView2/1/w/200/h/120
是七牛的样式调整
- 显示大图的modal
<!--放大图的imgModal-->
<div class="modal fade bs-example-modal-lg text-center" id="imgModal"tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >
<div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">
<div class="modal-content">
<img id="imgInModalID" src="" >
</div>
</div>
</div>
- 以默认大小的 modal 为例,要做改变宽度其实只需要在 .modal-dialog 样式上做文章就行了。为了简单,我现在直接写在元素标签上了。
关键三点:
- 用
display: inline-block;
- 父节点用
text-center
样式居中; - 重置宽度
width: auto