var $lightbox = $('#lightbox');

$lightbox.empty();
$lightbox.append("<div class=\"modal-dialog\">\n  <a title=\"Close\" class=\"fancybox-item fancybox-close\" data-dismiss=\"modal\" href=\"javascript:;\"><\/a>\n  <div class=\"modal-content\">\n    <div class=\"modal-body\">\n      <div id=\"carousel-example-generic\" class=\"carousel \" >\n          <ol class=\"carousel-indicators\">\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"0\" class=\"active\">\n            <\/li>\n          <\/ol>\n        <!-- Wrapper for slides -->\n        <div class=\"carousel-inner\" role=\"listbox\">\n          <div class=\"item active\">\n            <img alt=\"Charlie Cook&#x27;s Favourite Book (Board)\" src=\"https://storage.googleapis.com/circlesoft/document/photos/003/502/458/original_9781509830428.jpg?1613531946\" title=\"Charlie Cook&#x27;s Favourite Book (Board)\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Controls -->\n        <a class=\"left carousel-control\" href=\"#carousel-example-generic\" role=\"button\" data-slide=\"prev\">\n          <span class=\"fa fa-chevron-left\" aria-hidden=\"true\"><\/span>\n          <span class=\"sr-only\">Previous<\/span>\n        <\/a>\n        <a class=\"right carousel-control\" href=\"#carousel-example-generic\" role=\"button\" data-slide=\"next\">\n          <span class=\"fa fa-chevron-right\" aria-hidden=\"true\"><\/span>\n          <span class=\"sr-only\">Next<\/span>\n        <\/a>\n      <\/div>\n      <!-- Indicators -->\n\n    <\/div>\n  <\/div>\n<\/div>\n")

 css = {
   'maxWidth': $(window).width() - 100,
   'maxHeight': $(window).height() - 100
 };
$lightbox.find('img').each(function(index,el){
  $(el).css(css);
})

$lightbox.on('shown.bs.modal', function (e) {
  var $img = $lightbox.find('img');
  $lightbox.find('.modal-dialog').css({'width': $img.width()});
  $lightbox.find('.close').removeClass('hidden');
});