How do I open / enlarge an image in a modal using jquery / js and not data attributes?
Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, so I cannot rely on the user to input data attributes they don't know how to use.
I tried:-
<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();
});
Do I need to add info to the jquery to pass the image source to appear in the modal?
Thank you!!!
This question is related to
javascript
jquery
image
bootstrap-modal
image-enlarge
I have change it little bit but still can not do few things.
I added that clicking on it close it - it was easy but very functional.
<div class="modal-dialog" data-dismiss="modal">
I also need different description under each photo. I added description in footer just to show what I need. It need to change with every photo.
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');
});
});
Also it would be nice if this window will open only on 100% of screen. Here picture inside with description have more than 100% and in become scrollable... and if screen in much bigger than pictures it shoud stop only on orginal size. for ex. 900 px and no bigger in height.
I know your question is tagged as boostrap-modal (althought you didn't mentioned Bootstrap explicity neither), but I loved to see the simple way W3.CSS solved this and I think is good to share it.
<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>
I let you a link to the W3School modal image example to see the headers to make W3.CSS work.
The two above it is not run.
The table edit button:
<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>
and then in JavaScript:
$('.imagepreview555').attr('src', logobank);
and then in HTML:
<img src="" class="imagepreview555" style="width: 100%;" />
Not it runs.
<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>
This plugin works great for me.
So I have put together a very rough modal in jsfiddle for you to take hints from.
$("#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');
});
The part that you are missing is the hidden modal that you want to display when the link is clicked. In the example I used a second image as the modal and added the Bootstap classes.
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() {_x000D_
var modal = $('<div class="img-modal"><span>×</span><img /><div></div></div>');_x000D_
modal.find('img').attr('src', $(this).attr('src'));_x000D_
if($(this).attr('alt'))_x000D_
modal.find('div').text($(this).attr('alt'));_x000D_
$(this).after(modal);_x000D_
modal = $(this).next();_x000D_
$(this).click(function(event) {_x000D_
modal.show(300);_x000D_
modal.find('span').show(0.3);_x000D_
});_x000D_
modal.find('span').click(function(event) {_x000D_
modal.hide(300);_x000D_
});_x000D_
});_x000D_
$(document).keyup(function(event) {_x000D_
if(event.which==27)_x000D_
$('.img-modal>span').click();_x000D_
});img.modal-img {_x000D_
cursor: pointer;_x000D_
transition: 0.3s;_x000D_
}_x000D_
img.modal-img:hover {_x000D_
opacity: 0.7;_x000D_
}_x000D_
.img-modal {_x000D_
display: none;_x000D_
position: fixed;_x000D_
z-index: 99999;_x000D_
padding-top: 100px;_x000D_
left: 0;_x000D_
top: 0;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
overflow: auto;_x000D_
background-color: rgba(0,0,0,0.9);_x000D_
}_x000D_
.img-modal img {_x000D_
margin: auto;_x000D_
display: block;_x000D_
width: 80%;_x000D_
max-width: 700%;_x000D_
}_x000D_
.img-modal div {_x000D_
margin: auto;_x000D_
display: block;_x000D_
width: 80%;_x000D_
max-width: 700px;_x000D_
text-align: center;_x000D_
color: #ccc;_x000D_
padding: 10px 0;_x000D_
height: 150px;_x000D_
}_x000D_
.img-modal img, .img-modal div {_x000D_
animation: zoom 0.6s;_x000D_
}_x000D_
.img-modal span {_x000D_
position: absolute;_x000D_
top: 15px;_x000D_
right: 35px;_x000D_
color: #f1f1f1;_x000D_
font-size: 40px;_x000D_
font-weight: bold;_x000D_
transition: 0.3s;_x000D_
cursor: pointer;_x000D_
}_x000D_
@media only screen and (max-width: 700px) {_x000D_
.img-modal img {_x000D_
width: 100%;_x000D_
}_x000D_
}_x000D_
@keyframes zoom {_x000D_
0% {_x000D_
transform: scale(0);_x000D_
}_x000D_
100% {_x000D_
transform: scale(1);_x000D_
}_x000D_
}_x000D_
Javascript:_x000D_
_x000D_
$('img.modal-img').each(function() {_x000D_
var modal = $('<div class="img-modal"><span>×</span><img /><div></div></div>');_x000D_
modal.find('img').attr('src', $(this).attr('src'));_x000D_
if($(this).attr('alt'))_x000D_
modal.find('div').text($(this).attr('alt'));_x000D_
$(this).after(modal);_x000D_
modal = $(this).next();_x000D_
$(this).click(function(event) {_x000D_
modal.show(300);_x000D_
modal.find('span').show(0.3);_x000D_
});_x000D_
modal.find('span').click(function(event) {_x000D_
modal.hide(300);_x000D_
});_x000D_
});_x000D_
$(document).keyup(function(event) {_x000D_
if(event.which==27)_x000D_
$('.img-modal>span').click();_x000D_
});_x000D_
_x000D_
HTML:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<img src="http://www.google.com/favicon.ico" class="modal-img">Source: Stackoverflow.com