Updated Demo
1) I need to add different description to each photo
To add your descriptions to the photo, you can use data attributes to store the text or html that you want to add for each image. In my example, I used 3 separate data attributes to set a title, description and source for each image as follows:
<a href="#" class="pop" data-title="Turkish Van Cat" data-desc="The Turkish Van is a semi-long-haired breed of domestic cat, which was developed in the United Kingdom from a selection of cats obtained from various cities of modern Turkey, especially Southeast Turkey." data-source="<strong>Source</strong> Wikipedia">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" class="img-responsive" />
</a>
Then you can easily retrieve the value of the data attribute using the jQuery data method.
$('.pop').on('click', function () {
//Get the value of the data-title attribute
var title = $(this).data('title');
//Get the value of the data-desc attribute
var desc = $(this).data('desc');
//Get the value of the data-source attribute
var source = $(this).data('source');
//Add the title text to the container with the title class
$('.title').text(title);
//Add the desc text to the container with the desc class
$('.desc').text(desc);
//Add the source *html* to the container with the source class
$('.source').html(source);
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
You place text with the jQuery text method, but if you're adding html, like I did to make the word "Source" bold in the data-source attribute, you need to use the JQuery html method. Both methods work the same in that they will replace the contents of the target entirely. I created three separate targets with a class of .title, .desc and .source accordingly in the html of your modal.
<div class="img-description">
<p class="text-left title"></p>
<p class="text-left desc"></p>
<p class="text-left source"></p>
</div>
2) I want to modal window will be max. full height of screen not 100%
of photo...
There are a couple of different ways to approach this, and a few challenges if your images are of different height/width ratios and your text is an unknown length. To address these issues, instead of overriding the .modal-footer class, I just created a new class of .img-description which I place absolutely relative to the modal-body.
The trick to getting the modal to be 100% of the screen height/width is to override the .modal-dialog class and position it absolutely. The image container, which has a class of .img, is given a height of 80%, so you can set the max-height of the image itself to 100% to make it fill the space vertically.
.modal-dialog {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.modal-content, .modal-body {
height: 100%;
overflow: hidden;
}
.img-description {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 15px;
background-color: #fff;
border-radius: 6px;
}
.title {
font-weight: bold;
font-size: 1.2em;
}
.img {
height: 80%;
}
.imagepreview {
max-height: 100%;
display: inline-block;
}
The html for the modal now looks like this:
<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>
<div class="text-center img">
<img src="" class="img-responsive imagepreview" />
</div>
<div class="img-description">
<p class="text-left title"></p>
<p class="text-left desc"></p>
<p class="text-left source"></p>
</div>
</div>
</div>
</div>
</div>
