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=\"\">\n            <\/li>\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"1\" class=\"\">\n            <\/li>\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"2\" class=\"\">\n            <\/li>\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"3\" class=\"\">\n            <\/li>\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"4\" class=\"active\">\n            <\/li>\n          <\/ol>\n        <!-- Wrapper for slides -->\n        <div class=\"carousel-inner\" role=\"listbox\">\n          <div class=\"item \">\n            <img alt=\"Field Guide to New Zealand&#x27;s Native Trees\" src=\"/document/photos/002/585/935/original_9781877517822.jpg?1487906340\" title=\"Field Guide to New Zealand&#x27;s Native Trees\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Field Guide to New Zealand&#x27;s Native Trees\" src=\"/document/photos/002/591/300/original_img_0627_copy.jpg?1488753084\" title=\"Field Guide to New Zealand&#x27;s Native Trees\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Field Guide to New Zealand&#x27;s Native Trees\" src=\"/document/photos/002/591/301/original_img_0629_copy.jpg?1488753101\" title=\"Field Guide to New Zealand&#x27;s Native Trees\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Field Guide to New Zealand&#x27;s Native Trees\" src=\"/document/photos/002/591/302/original_img_0628_copy.jpg?1488753115\" title=\"Field Guide to New Zealand&#x27;s Native Trees\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item active\">\n            <img alt=\"Field Guide to New Zealand&#x27;s Native Trees\" src=\"/document/photos/002/591/303/original_img_0626_1__copy.jpg?1488753159\" title=\"Field Guide to New Zealand&#x27;s Native Trees\" />\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');
});