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=\"active\">\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=\"\">\n            <\/li>\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"5\" class=\"\">\n            <\/li>\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"6\" class=\"\">\n            <\/li>\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"7\" class=\"\">\n            <\/li>\n            <li data-target=\"#carousel-example-generic\" data-slide-to=\"8\" class=\"\">\n            <\/li>\n          <\/ol>\n        <!-- Wrapper for slides -->\n        <div class=\"carousel-inner\" role=\"listbox\">\n          <div class=\"item \">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/732/835/original_9780714875361.jpg?1510095324\" title=\"Bread Is Gold\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/693/547/original_9780714875361-lk-1.jpg?1504056456\" title=\"Bread Is Gold\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item active\">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/693/548/original_9780714875361-lk-2.jpg?1504056514\" title=\"Bread Is Gold\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/693/549/original_9780714875361-lk-3.jpg?1504056529\" title=\"Bread Is Gold\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/693/551/original_9780714875361-lk-4.jpg?1504056546\" title=\"Bread Is Gold\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/693/552/original_9780714875361-lk-5.jpg?1504056561\" title=\"Bread Is Gold\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/693/553/original_9780714875361-lk-6.jpg?1504056578\" title=\"Bread Is Gold\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/693/554/original_9780714875361-lk-7.jpg?1504056592\" title=\"Bread Is Gold\" />\n            <div class=\"carousel-caption\">\n            <\/div>\n          <\/div>\n          <div class=\"item \">\n            <img alt=\"Bread Is Gold\" src=\"/document/photos/002/693/555/original_9780714875361-lk-8.jpg?1504056607\" title=\"Bread Is Gold\" />\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');
});