#ifnotnull($publishing)

	#if($publishing.get("distributiontype") == "gallery") 
		<script type="text/javascript" src="$!siteroot$applink/components/javascript/jquery-3.7.1.min.js"></script>
		<script type="text/javascript" src="$!siteroot$applink/components/javascript/emedia/brickvertical.js"></script>
		<script type="text/javascript" src="$!siteroot$applink/components/javascript/simpleLightbox/simple-lightbox.jquery.min.js"></script>
		
		<div id="previewgallery" style="height: 100%;">
		##$pages.include("${apphome}/services/publishingdestination/gallery/index.html", $context)
		
		##Moved to use Module Players
		$pages.include("${apphome}/services/module/${moduleid}/players/gallery/index.html", $context)
		
		</div>
				
		<script type="text/javascript">
		/**
		 * Init
		 */
		(function ($) {
			jQuery(document).ready(function () {
				var grid = $(".masonry-grid2");
				grid.brickvertical();
				var slb = $('a.lightbox').simpleLightbox({
					captionSelector: 'self',
					captionType: 'data',
					captionsData: 'caption',
					captionDelay: 250,
					widthRatio:0.98,
					heightRatio:0.98,
					overlayOpacity: 1,
					fadeSpeed: 60
				});
				slb.on("shown.simplelightbox", function () {
						gridlang = document.documentElement.lang;
						if (!gridlang) {
							var drupalSelector = $("script[data-drupal-selector='drupal-settings-json']").text();
							if (drupalSelector) {
								var drupalSettings = JSON.parse(drupalSelector);
								lang = drupalSettings.dataLayer.defaultLang;
							}
						}
						if (!gridlang) gridlang = window.navigator.language || window.navigator.userLanguage;
						if (gridlang.indexOf("-") != -1 || gridlang.indexOf("_") != -1) {
							var loc = lang.split(/[-_]/)[0];
							var variant = lang.split(/[-_]/)[1];
							if (loc.toLowerCase() == "zh") {
								if (
									variant.toLowerCase() == "hant" ||
									variant.toLowerCase() == "tw" ||
									variant.toLowerCase() == "hk"
								) {
									gridlang = "zh_TW";
								} else {
									gridlang = "zh";
								}
							} else {
								gridlang = loc;
							}
						}

						customload($(this));  //load custom caption & download link		

					});
					slb.on("changed.simplelightbox", function () {
						customload($(this));
					});

					function customload(element) {
						var locales = element.data("locales");
						if (locales) {
							try {
								if (typeof locales === "string") {
									var txt = document.createElement("textarea");
									txt.innerHTML = locales;
									locales = JSON.parse(txt.value);
								}
								var localeCaption = locales[gridlang] ? locales[gridlang] : locales["en"];
								if (localeCaption) {
									element.attr("data-caption", localeCaption);
									$(".sl-caption").html(localeCaption);
								}
							} catch (e) {
								// ignore
							}
						}
						//Download link
						var dl = element.data("downloadlink");
						if (dl) {
							$(".simple-lightbox").append("<a class='sl-dl' href='" + dl + "' target='_blank'></a>");
						}
					}
			});
		}(jQuery));		
		</script>

	#else 
		<script type="text/javascript" src="$!siteroot$applink/components/javascript/splide/splide.min.js"></script>
	
		##$pages.include("${apphome}/services/publishingdestination/carousel/index.html", $context)
		
		##Moved to use Module Players
		$pages.include("${apphome}/services/module/${moduleid}/players/carousel/index.html", $context)
		
		<script type="text/javascript" src="$!siteroot$applink/components/javascript/emedia/players/carousel.js"></script>
	#end
  
#end

#ifnull($publishing)
  <h2>Preview not available</h2>
#end