javascript - example - En Bootstrap open Ampliar imagen en modal
modal image bootstrap (6)
Así que he creado un modo muy aproximado en jsfiddle del que puedes obtener pistas.
$("#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'');
});
La parte que te falta es el modal oculto que deseas mostrar cuando se hace clic en el enlace. En el ejemplo, utilicé una segunda imagen como modal y agregué las clases de Bootstap .
¿Cómo puedo open / enlarge una imagen en un modal usando jquery / js y no atributos de datos ?
Cada vez que un usuario inserta una imagen en un editor de contenido, necesito que se pueda hacer clic para expandirlo en un modal con js, por lo que no puedo confiar en que el usuario ingrese atributos de datos que no sabe cómo usar.
Lo intenté:-
<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();
});
¿Debo agregar información al jquery para pasar el origen de la imagen para que aparezca en el modal?
¡¡¡Gracias!!!
Este plugin funciona muy bien para mi
Lo he cambiado un poco, pero todavía no puedo hacer algunas cosas.
Añadí que al hacer clic en cerrarlo, fue fácil pero muy funcional.
<div class="modal-dialog" data-dismiss="modal">
También necesito una descripción diferente debajo de cada foto. Agregué la descripción en el pie de página solo para mostrar lo que necesito. Necesita cambiar con cada foto.
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'');
});
});
También sería bueno que esta ventana se abra solo en el 100% de la pantalla. Aquí la imagen en el interior con la descripción tiene más del 100% y se puede desplazar ... y si la pantalla es mucho más grande que las imágenes, debe detenerse solo en tamaño original. por ej. 900 px y no más grande en altura.
Los dos de arriba no se ejecuta.
El botón de edición de la tabla:
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>
y luego en JavaScript:
$(''.imagepreview555'').attr(''src'', logobank);
y luego en HTML:
img src="" class="imagepreview555" style="width: 100%;"
No se ejecuta.
Puede probar este código si está utilizando el programa de arranque 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
});
Este es el fiddle trabajo. Espero que esto ayude :)
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">