В Bootstrap откройте Увеличить изображение в модальном режиме
https://stackoverflow.com//questions/25023199
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как я могу 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, чтобы передать исходный код изображения для отображения в модальном режиме?
Спасибо!!!
Решение
Вы можете попробовать этот код, если используете bootstrap 3:
HTML
<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>
JavaScript:
$("#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
});
Это и есть рабочая скрипка.Надеюсь, это поможет :)
Другие советы
Я немного изменил это, но все еще не могу сделать несколько вещей.
Я добавил, что, нажав на него, вы закроете его - это было просто, но очень функционально.
<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 пикселей и не больше по высоте.
Этот плагин отлично работает для меня.
Я знаю, что ваш вопрос помечен как boostrap-modal (хотя вы и не упомянули о явности начальной загрузки), но мне понравилось видеть простой способ 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>
Я даю вам ссылку на W3School модальное изображение пример, чтобы увидеть заголовки, позволяющие заставить W3.CSS работать.
Итак, я собрал очень грубый модал в 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');
});
Часть, которую вам не хватает, - это скрытый модал, который вы хотите отображать при нажатии на ссылку.В приведенном примере я использовал второе изображение в качестве модального и добавил Загрузочный Стапель классы.
<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" alt="Short alt text">
</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" alt="A alt text">
</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" alt="Another alt text">
</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>
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">Двумя вышеперечисленными он не управляется.
Кнопка редактирования таблицы:
<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%;" />
Это не работает.
Не связан с StackOverflow
