在 Bootstrap 中以模态打开放大图像
Posted
技术标签:
【中文标题】在 Bootstrap 中以模态打开放大图像【英文标题】：In Bootstrap open Enlarge image in modal 【发布时间】：2014-09-21 06:58:43 【问题描述】：我如何open / enlarge 使用 jquery / js 和 不是数据属性的模式中的图像？
每当用户将图像插入内容编辑器时，我都需要它可以点击以使用 js 在模态中展开，因此我不能依赖用户输入他们不知道如何使用的数据属性。
我试过了：-
<a href="/myImage.png" id="pop">
<img src="/myImage.png" style="width: 400px; height: 264px;">
Click to Enlarge
</a>
jQuery :-
$("#pop").on("click", function()
$(this).modal();
);
我需要向 jquery 添加信息以传递图像源以显示在模态中吗？
谢谢！！！
【问题讨论】：
对pop点击设置模态图片源=自己要放大的图片源 @JordanD 感谢您的回复！这在代码中到底是什么样的？ “任何时候用户将图像插入内容编辑器”您需要在用户单击插入编辑器的图像时显示图像吗？ @martinezjc 是的，使用内容管理系统并希望在任何时候通过内容编辑器将图像插入页面时都具有此功能。 有没有办法在没有 JQuery 和 JS 的情况下实现这一点？只有 CSS？ 【参考方案1】：如果您使用的是 bootstrap 3，您可以尝试此代码：
<a href="#" id="pop">
<img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
Click to Enlarge
</a>
<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
$("#pop").on("click", function()
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
);
这是工作的fiddle。 希望这会有所帮助:)
【讨论】：
我弄清楚为什么其他图像不会以模态打开，因为 pop 的 id 是唯一的，所以我将其更改为一个类。现在唯一的问题是其他模态中的图像源显示第一张图像，而不是点击的图像！ 我做了一个更新，现在正在工作，问题是.pop img 总是会拍摄第一张带有.pop 类的图像，我只是做了一个$('.imagepreview').attr('src', $(this).find('img').attr('src')); 来拍摄实际图像(<img>) 在当前<a> 标记内并分配给模式内的图像属性src。请将我的答案标记为解决方案。这是你现在工作的小提琴jsfiddle.net/6CR2H/1 :)
你是绝对的救星！感谢您花时间帮助我，非常慷慨！
您的意思是从图像而不是从链接触发事件？或从包含图像@stom 的 div 触发事件？
@stom 这个想法基本上是一样的。 click 事件基于元素 class 属性而不是 html 标记 <a>。这是小提琴....jsfiddle.net/oLwzepfc【参考方案2】：
所以我在 jsfiddle 中整理了一个非常粗略的模态供您参考。
JSFiddle
$("#pop").on("click", function(e)
// e.preventDefault() this is stopping the redirect to the image its self
e.preventDefault();
// #the-modal is the img tag that I use as the modal.
$('#the-modal').modal('toggle');
);
您缺少的部分是单击链接时要显示的隐藏模式。在示例中，我使用第二张图片作为模态并添加了 Bootstap 类。
【讨论】：
【参考方案3】：我已经改变了一点，但仍然不能做一些事情。
我补充说点击它关闭它 - 它很简单但非常实用。
<div class="modal-dialog" data-dismiss="modal">
我还需要在每张照片下进行不同的描述。我在页脚中添加了描述只是为了显示我需要的内容。 它需要随着每张照片而改变。
HTML
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
<div class="modal-content" >
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
<div class="modal-footer">
<div class="col-xs-12">
<p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
</div>
</div>
</div>
</div>
JavaScript：
$(function()
$('.pop').on('click', function()
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
);
);
如果这个窗口只在 100% 的屏幕上打开，那就太好了。 此处带有描述的图片已超过 100% 并且可以滚动... 如果屏幕比图片大得多，它应该只在原始尺寸上停止。例如。 900 像素，高度不超过。
http://jsfiddle.net/2ve4hbmm/
【讨论】：
【参考方案4】：这个插件非常适合我。
Bootstrap 3 lightbox plugin
【讨论】：
【参考方案5】：上面的两个都没有运行。
表格编辑按钮：
<a data-toggle="modal" type="edit" id="$b->id" data-id="$b->id" data-target="#form_edit_masterbank" data-bank_nama=" $b->bank_nama " data-bank_accnama=" $b->bank_accnama " data-bank_accnum=" $b->bank_accnum " data-active=" $b->active " data-logobank="asset('components/images/user/masterbank/')/$b->images" href="#" class="edit edit-masterbank" ><i class="fa fa-edit" ></i></a>
然后在 JavaScript 中：
$('.imagepreview555').attr('src', logobank);
然后在 HTML 中：
<img src="" class="imagepreview555" style="width: 100%;" />
它不会运行。
【讨论】：
【参考方案6】：css:
img.modal-img
cursor: pointer;
transition: 0.3s;
img.modal-img:hover
opacity: 0.7;
.img-modal
display: none;
position: fixed;
z-index: 99999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
.img-modal img
margin: auto;
display: block;
width: 80%;
max-width: 700%;
.img-modal div
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
.img-modal img, .img-modal div
animation: zoom 0.6s;
.img-modal span
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
@media only screen and (max-width: 700px)
.img-modal img
width: 100%;
@keyframes zoom
0%
transform: scale(0);
100%
transform: scale(1);
Javascript：
$('img.modal-img').each(function()
var modal = $('<div class="img-modal"><span>×</span><img /><div></div></div>');
modal.find('img').attr('src', $(this).attr('src'));
if($(this).attr('alt'))
modal.find('div').text($(this).attr('alt'));
$(this).after(modal);
modal = $(this).next();
$(this).click(function(event)
modal.show(300);
modal.find('span').show(0.3);
);
modal.find('span').click(function(event)
modal.hide(300);
);
);
$(document).keyup(function(event)
if(event.which==27)
$('.img-modal>span').click();
);img.modal-img
cursor: pointer;
transition: 0.3s;
img.modal-img:hover
opacity: 0.7;
.img-modal
display: none;
position: fixed;
z-index: 99999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
.img-modal img
margin: auto;
display: block;
width: 80%;
max-width: 700%;
.img-modal div
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
.img-modal img, .img-modal div
animation: zoom 0.6s;
.img-modal span
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
@media only screen and (max-width: 700px)
.img-modal img
width: 100%;
@keyframes zoom
0%
transform: scale(0);
100%
transform: scale(1);
Javascript:
$('img.modal-img').each(function()
var modal = $('<div class="img-modal"><span>×</span><img /><div></div></div>');
modal.find('img').attr('src', $(this).attr('src'));
if($(this).attr('alt'))
modal.find('div').text($(this).attr('alt'));
$(this).after(modal);
modal = $(this).next();
$(this).click(function(event)
modal.show(300);
modal.find('span').show(0.3);
);
modal.find('span').click(function(event)
modal.hide(300);
);
);
$(document).keyup(function(event)
if(event.which==27)
$('.img-modal>span').click();
);
HTML:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<img src="http://www.google.com/favicon.ico" class="modal-img">【讨论】：
style="display:inline-block"【参考方案7】： <div class="row" style="display:inline-block">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" >
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" >
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery">
<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" >
</a>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">
This text will be overwritten by jQuery
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function()
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current)
$('#show-previous-image, #show-next-image').show();
if(counter_max == counter_current)
$('#show-next-image').hide();
else if (counter_current == 1)
$('#show-previous-image').hide();
/**
*
* @param setIDs Sets IDs when DOM is loaded. If using a php counter, set to false.
* @param setClickAttr Sets the attribute for the click handler.
*/
function loadGallery(setIDs, setClickAttr)
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function()
if($(this).attr('id') == 'show-previous-image')
current_image--;
else
current_image++;
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
);
function updateGallery(selector)
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
if(setIDs == true)
$('[data-image-id]').each(function()
counter++;
$(this).attr('data-image-id',counter);
);
$(setClickAttr).on('click',function()
updateGallery($(this));
);
);
</script>
【讨论】：
【参考方案8】：我知道你的问题被标记为 bootstrap-modal（尽管你也没有明确提到 Bootstrap），但我喜欢看到 W3.CSS 解决这个问题的简单方法，我认为分享它是件好事。
<img src="/myImage.png" style="width:30%;cursor:zoom-in"
onclick="document.getElementById('modal01').style.display='block'">
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<div class="w3-modal-content w3-animate-zoom">
<img src="/myImage.png" style="width:100%">
</div>
</div>
这是 W3Schools modal image 示例的链接，以查看使 W3.CSS 工作的标题。
【讨论】：
以上是关于在 Bootstrap 中以模态打开放大图像的主要内容，如果未能解决你的问题，请参考以下文章
如何让 React.js 和 Bootstrap 4 模态轮播始终在打开时显示第一张图像
如何在 Twitter Bootstrap AngularJS 模态窗口中以 100% 宽度显示 Flot 图表