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=\"The Secrets She Keeps\" src=\"/document/photos/002/690/434/original_9780733638015.jpg?1503473946\" title=\"The Secrets She Keeps\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item product-youtube \">\n            <object width=\"450\" height=\"300\"><param name=\"movie\" value=\"https://www.youtube.com/v/Gl5VP9eBL_E&hl=en\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><embed src=\"https://www.youtube.com/v/Gl5VP9eBL_E&hl=en\" type=\"application/x-shockwave-flash\"  allowfullscreen=\"true\"  width=\"450\" height=\"300\"><\/embed><\/object>\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');
});